Loading…

Sheet

A panel that enters from an edge of the viewport for secondary content.

Overlays
1 file
2 npm packages
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add sheet

npm packages installed: class-variance-authority, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Sheet } from "@/components/ui/sheet";

Examples

Every example the tests run, live and operable, side by side.

Default
Sides
Navigation
Spring

API

Generated from the component's own types, so a prop cannot appear here without existing.

<SheetOverlay>

Every prop of Radix UI’s Dialog.Overlay, plus className.

<SheetContent>

Prop	Type	Default
`animation` How the content arrives. `default` slides in as one piece. `spring` slides the panel the same way, then brings its sections — header, body, footer — in one after another. The panel itself never overshoots: a sheet that bounced past its edge would lift off the side it is attached to. Stops under reduced motion.	`"default" \| "spring"`	`"default"`
`showCloseButton`	`boolean`	`true`
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"right"`

Every prop of Radix UI’s Dialog.Content, plus className.

<SheetHeader>

Plus every attribute of <div>.

<SheetFooter>

Plus every attribute of <div>.

<SheetTitle>

Every prop of Radix UI’s Dialog.Title, plus className.

<SheetDescription>

Every prop of Radix UI’s Dialog.Description, plus className.

Accessibility

Modal, with the same focus trapping and restoration as Dialog. Always render a SheetTitle. For a side navigation sheet, put a nav landmark inside rather than relying on placement to convey the role. The optional section stagger stops under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

animation

How the content arrives. default slides in as one piece. spring slides the panel the same way, then brings its sections — header, body, footer — in one after another. The panel itself never overshoots: a sheet that bounced past its edge would lift off the side it is attached to. Stops under reduced motion.

"default" | "spring"

"default"

showCloseButton

boolean

true

side

"top" | "bottom" | "left" | "right"

"right"