Sheet
Freev1.0.0A panel from an edge: resizable side sheet, bottom sheet with snap points, non-modal swap.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/notchset/sheet";
export function RunDetail() {
return (
<Sheet>
<SheetTrigger>Open run</SheetTrigger>
<SheetContent resizable={{ defaultSize: 480 }}>
<SheetHeader><SheetTitle>RUN_8F3A1</SheetTitle></SheetHeader>
<SheetBody>…</SheetBody>
</SheetContent>
</Sheet>
);
}Props
side (SheetContent)–'right' | 'left' | 'bottom' | 'top'The edge it comes from. Default right.
modal (Sheet)–booleanScrim, focus trap and scroll lock (default). false keeps the page usable and ignores outside clicks.
resizable (SheetContent)–{ defaultSize?, min?, max?, label? }Left or right: a separator on the inner edge, by pointer or ←/→ (360–720px by default).
snapPoints (SheetContent)–number[]Bottom: heights as fractions, with a drag handle. Default [0.62, 0.92]; drag down 120px to dismiss.
contained (SheetContent)–booleanPlace it inside its portal container (position: relative) instead of the viewport.
Anatomy
- Same parts as shadcn's Sheet, plus Body and the resizable and snapPoints options.
- The demo swaps runs in place in non-modal mode by keeping one Sheet open and changing its content.
- On a phone the same detail opens as a bottom sheet; the menu is a left sheet that closes when you pick a page.
Sheetdata-slot="sheet"Root; open state and modal.
SheetTrigger / SheetClosedata-slot="sheet-trigger"Open and close controls.
SheetContentdata-slot="sheet-content"The panel, scrim, handles and close button.
SheetHeader / SheetBody / SheetFooterdata-slot="sheet-header"64px title row, scrolling body, actions row.
SheetTitle / SheetDescriptiondata-slot="sheet-title"Labels.
Source
components/ui/notchset/sheet.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://notchset.dev/r/sheet.jsonRadix
pnpm dlx shadcn@latest add https://notchset.dev/r/radix-nova/sheet.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.
Install by hand
- 1. Add the packages
pnpm add @base-ui/react@^1 - 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/sheet.tsx
- lib/beautiful-ui/notchset/sheet.tsx
- lib/beautiful-ui/notchset/dialog.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Detail for a row without leaving the list
- A phone's bottom sheet or menu drawer
Use something else when
- A decision that can't be undone: use Alert Dialog
- A small panel on a control: use Popover
Mistakes to avoid
- Give every sheet a SheetTitle
- Non-modal sheets need their own way to close (the close button is kept)
Agents find it by
- sheet, drawer, side panel, bottom sheet, detail panel, navigation drawer, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/sheet.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- Esc
- Close
- ← / →
- Resize (on the separator)
- Enter / Space
- Step between snap points (on the handle)
Accessibility
- A dialog labelled by its title; focus moves in on open and back to the opener on close
- Modal sheets trap focus and lock the page's scroll
- The resize separator has aria-valuenow, min and max; the drag handle is a button that steps between snap points
Motion
- Open
- Slides in on the unroll (420ms); the scrim fades in (360ms)
- Close
- Slides out on the trace (260ms)
- Snap
- Height eases between snap points (380ms)
Responsive
- Side sheets leave 40px of the page showing; a bottom sheet never covers the last 24px.
Performance
- Mounted only while open; drag and resize write one style per pointer move.
Changelog
v1.0.0 · 2026-10-04
First release
