Steph Huynh● Primitives / Sheet
Sheet.
Sheet is the system's slide-over panel built on the dialog primitive. It hosts mobile navigation in the header and documentation layout without leaving the current page.
How the primitive behaves
Sheet pairs an overlay with animated content from the chosen edge. Focus stays trapped while open; the default close button sits in the top-right of the panel.
Documentation uses a left sheet for the sidebar on small screens. The site header uses a right sheet for the main menu, with Separator dividing link groups inside the panel.
Source of truth
Compound primitive from shadcn-svelte. Import as Sheet from $lib/system (namespace export). Compose with Button for triggers and close actions.
Primitive roles
Overlay panel
Slides content above the page with a scrim, keeping context underneath visible.
Small-viewport navigation
Primary use on this site: mobile header menu and documentation sidebar on narrow screens.
Composable shell
Root, Trigger, Content, Header, Title, and Close pieces assemble the full dialog pattern.
Anatomy
Try the live example below, or open Storybook for left-side and custom close variants.
Trigger
Opens the sheet. Often wraps Button via the child snippet for correct semantics.
Content
Panel surface with side prop: top, right, bottom, or left. Defaults to right on this site.
Header and title
Introduces the panel. Description can be visually hidden for screen readers when redundant.
Close control
Optional built-in icon button (showCloseButton). Custom close actions use Sheet.Close.
Guidelines
- Use Sheet for secondary surfaces that should not navigate away: menus, filters, or compact nav on small breakpoints.
- Prefer side="right" for navigation drawers to match the header and documentation mobile nav.
- Bind open on Sheet.Root when the parent needs to close the sheet after a link click.
- Compose Separator and text links inside content; keep the title short (Menu, System navigation).
- Do not nest sheets. One overlay at a time keeps focus management predictable.
- Test keyboard escape and focus trap in Storybook or on device; do not restyle overlay timing ad hoc.
In practice
Mobile nav replacement?
Sheet with right side and trigger in the header row.
Need a full page?
Use a route, not a sheet.
Closing after navigation?
Set open = false in link onclick handlers.
Hide the X button?
Set showCloseButton={false} and provide Sheet.Close.
Related primitives
Other primitives in the system, in the same order as the documentation sidebar.