Overlays

Bottom sheet panel

A mobile-style sheet that rises from the bottom edge with a grabber handle and can be dragged back down to dismiss.

Daily activity

Today

Current goal: 420 kcal
Logged so far: 286 kcal
Streak: 6 days

Drag the handle down, or press Escape.

Using Bottom sheet panel

A mobile-style sheet that rises from the bottom edge with a grabber handle and can be dragged back down to dismiss.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: title, accent, dragToDismiss

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

1540Sheet drawerOverlaysA slide-over panel that springs in from one edge over a dimmed backdrop, holds focus inside, and closes on Escape, the close button, or a pull on its header.

1953Edge slide sheetOverlaysA panel that slides in from a screen edge to hold supplementary content like a cart or filters, without leaving the current page.

2340Drag Dismiss Bottom DrawerOverlaysA panel that slides in from an edge with a small drag handle, tracks a finger or pointer drag with rubber-band resistance, and either snaps back open or dismisses depending on how far it is pulled.

2146Edge-slide panelOverlaysA settings panel that springs in flush against a screen edge while the page behind it dims and blurs.

2441Staggered Offer DrawerOverlaysA bottom drawer promoting a limited offer, where the heading, price and buttons spring in one after another instead of all appearing at once.

2445Swipe action rowOverlaysA message-style list row that reveals colored action buttons behind it as you drag it sideways.