Sheet

A panel that slides in from the edge of the screen.

$ pnpm dlx shadcn@latest add https://dashral.com/r/sheet.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/sheet.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/sheet

Usage

example.tsx

1import { Button } from "@/components/dashral/button"
2import { Select } from "@/components/dashral/select"
3import { Sheet, SheetClose } from "@/components/dashral/sheet"
4
5<Sheet
6  trigger={<Button variant="outline">Filters</Button>}
7  title="Filters"
8  footer={
9    <SheetClose asChild>
10      <Button>Show results</Button>
11    </SheetClose>
12  }
13>
14  <Select label="Status" options={["Active", "Paused", "Archived"]} />
15</Sheet>

Examples

Sides

Filters

A draft until “Show N products”, whose count follows every change; applied filters become removable chips.

24 products

Film camera 1Cameras · In stock$20
Pour-over set 1Coffee · Low stock$73
Keyboard 1Keyboards · Out of stock$126
Desk mat 1Desk setup · In stock$179
Lens 1Cameras · Low stock$232
and 19 more

Order details

A row opens its order in a side sheet, with that order's actions at the bottom.

API reference

Sheet

Also takes every prop of Radix Dialog(opens in a new tab).

Prop	Type	Default
`trigger`	`ReactElement` What opens it. Leave it out to open it with open / onOpenChange.	—
`title`	`ReactNode` Required: it names the panel.	—
`description`	`ReactNode`	—
`children`	`ReactNode` The body; it scrolls when it's taller than the screen.	—
`footer`	`ReactNode` Pinned to the bottom.	—
`form`	`ComponentProps<"form">` Makes the body and footer one form.	—
`side`	`"top" \| "bottom" \| "start" \| "end" \| "left" \| "right"` Which edge it slides from. start and end follow the reading direction (end is the right, or the left in Arabic).	`"end"`
`padding`	`"default" \| "none"` none hides the header visually and drops the body's padding, for a layout of your own.	`"default"`
`showCloseButton`	`boolean`	`true`
`autoFocus`	`boolean` Opening it focuses the first control inside. false focuses the panel instead, e.g. a menu whose first control is a text field, so a phone doesn't open its keyboard.	`true`
`classNames`	`{ header, title, description, body, footer }` Classes for each part.	—
`className`	`string` The panel's classes, e.g. a width.	—

SheetClose

Closes the sheet: wrap a button.

Also takes every prop of Radix Dialog(opens in a new tab).

Prop	Type	Default
`asChild`	`boolean` Render the child element instead (e.g. a Next.js Link), passing these styles and props to it.	`false`

Keyboard

Keys	Action
`Tab`or`Shift+Tab`	Move between controls; focus stays inside while it's open
`Escape`	Close and return focus to what opened it

Accessibility

A modal dialog: it's named by its title, traps focus and gives it back when closed.

Motion

Slides in from its side and out again; the backdrop fades.