Foundations

Components

Multi-directional modal sheets that slide fluidly from the edges of the screen, styled with backdrop blurs and clean dismiss triggers.

bunx shadcn-svelte@latest add https://ui.grgurevic.click/r/sheet.json

Select a slide-in direction and open the sheet.

Render close button

Background

The best practices when using sheet components.

Use the bottom drawer layout on mobile screens to ensure thumb-friendly actions.
Keep the drawer content scrollable if it exceeds the vertical screen height.
Display a clear close action icon or footer cancel Button for quick dismissals.
For actions requiring explicit user confirmation, use a Dialog instead to block background interaction entirely.

Sheet sub-components and customization parameters.

Component / Prop	Type / Role	Default	Description
Sheet.Root	Master controller	-	Coordinates viewport opening states, overlays, focus locks, and blurs.
Sheet.Trigger	Trigger element	-	The clickable button or handler that triggers sheet display.
Sheet.Content	Drawer panel	-	The slide-over container. Takes `side="top" \| "bottom" \| "left" \| "right"`.
showCloseButton	boolean	true	Displays standard top-right close icon trigger.
liquidGlass	boolean	false	Enables physical liquid glass refraction distortion (Chromium only).

Give feedback