A panel that slides in from an edge over a scrim, and a bottom Drawer with a drag handle.
Sheet is a dialog flush to one edge (side: right, left, top or bottom) for secondary tasks that keep the page in view: a record's details, filters, settings. It traps focus, locks page scroll, closes on Esc, the scrim and the close button, and returns focus to whatever opened it.
Drawer is the bottom sheet, centred to a readable width on wide screens, with a grab handle. With dragToClose (on by default) a downward drag on the handle past about a third of its height dismisses it.
The header keeps one left edge: title and description stacked flush left, the close button at the right. The body scrolls on its own with the themed scrollbar; footer buttons sit along the bottom edge, primary last. Size is size (any CSS length) or --sheet-size.
inline renders the open panel in the page flow: no portal, scrim, focus trap, scroll lock or outside-click listener. It exists for docs, previews and static mock-ups; never ship it as the live overlay.
Installation
npx shadcn@latest add KezLahd/rime/sheetAlso installs: alert-dialog, base, icon, icon-button, scroll-area.
Usage
import { Button, Drawer, Sheet } from "@/components/ui";
<Sheet
open={open}
onClose={() => setOpen(false)}
title="Edit team member"
footer={<Button onClick={save}>Save changes</Button>}
>
…fields…
</Sheet>Examples
Open
Edit team member
Changes apply as soon as you save.
From each edge
Drawer, open
Order ORD-2041
3 items, ready to ship.
Ships to Jane Cooper. Paid by card on 14 August.
Drawer with drag to close
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Sheet
| Prop | Type | Default | Description |
|---|---|---|---|
| openRequired | boolean | ||
| onCloseRequired | () => void | Esc, the scrim and the close button. | |
| titleRequired | ReactNode | ||
| description | ReactNode | ||
| children | ReactNode | ||
| footer | ReactNode | Buttons along the bottom edge, primary last. | |
| side | SheetSide | "right" | The edge it slides in from. |
| size | string | Width (left, right) or height (top, bottom), any CSS length. Defaults to --sheet-size, 420px. | |
| closeLabel | string | "Close" | |
| inline | boolean | Render the open panel in the page flow: no portal, scrim, focus trap or scroll lock (docs, previews). | |
| className | string |
Drawer
| Prop | Type | Default | Description |
|---|---|---|---|
| footer | ReactNode | Buttons along the bottom edge, primary last. | |
| titleRequired | ReactNode | ||
| className | string | ||
| children | ReactNode | ||
| openRequired | boolean | ||
| onCloseRequired | () => void | Esc, the scrim and the close button. | |
| description | ReactNode | ||
| closeLabel | string | ||
| inline | boolean | Render the open panel in the page flow: no portal, scrim, focus trap or scroll lock (docs, previews). | |
| dragToClose | boolean | true | Let a downward drag on the handle dismiss it. On by default. |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --drawer-width | 640px | … |
| --sheet-radius | var(--r-xl) | … |
| --sheet-size | 420px / 85dvh / 380px | … |
| --sheet-title-size | 18px | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --border-w | tokens.css | … |
| --density | tokens.css | … |
| --dur | tokens.css | … |
| --ease | tokens.css | … |
| --ease-out | tokens.css | … |
| --font-display | tokens.css | … |
| --ink-body | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --line-glass | tokens.css | … |
| --modal-blur | tokens.css | … |
| --modal-scrim | tokens.css | … |
| --modal-scrim-blur | tokens.css | … |
| --modal-shadow | tokens.css | … |
| --modal-surface | tokens.css | … |
| --r-full | tokens.css | … |
| --r-xl | tokens.css | … |
| --rgb-brand-deep | tokens.css | … |
| --text-small | tokens.css | … |
| --tracking-display | tokens.css | … |
| --z-modal | tokens.css | … |
Accessibility
- role="dialog" with aria-modal, labelled by the title and described by the description.
- Focus moves in on open, Tab is trapped, Esc closes, and focus returns to the opener. The drag handle is pointer-only; Esc and the close button are always there.
- Reduced motion: it fades in place instead of sliding.
Do and don't
Do
- Use a right sheet for detail and edit panels, a bottom drawer on phones.
- Keep one primary action in the footer.
Don't
- Don't stack a sheet on a modal.
- Don't hide navigation in a sheet on desktop; that is the sidebar.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open sheet.mdRelated: modal, alert-dialog