Sheet
Sheets present a focused modal panel from an explicit side while leaving product workflows to the consumer.
Overview and decision boundary
Use Sheet for a focused modal panel that needs more room than a popover without becoming a product shell.
Do not use Sheet as a persistent sidebar, resizable panel, AppShell, or routing container.
Preview
import { Button, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@nerio-ui/ui/client';<Sheet> <SheetTrigger render={<Button variant="secondary">Open settings</Button>} /> <SheetContent side="right" size="md" showClose={false}> <SheetHeader> <SheetTitle>Workspace settings</SheetTitle> <SheetDescription>Configure shared defaults for this workspace.</SheetDescription> </SheetHeader> <SheetBody>...</SheetBody> <SheetFooter> <SheetClose render={<Button variant="secondary">Cancel</Button>} /> <Button>Save changes</Button> </SheetFooter> </SheetContent></Sheet>Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm dlx nerio add sheetimport { Button, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@nerio-ui/ui/client';Usage
import { Button, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@nerio-ui/ui/client';<Sheet> <SheetTrigger render={<Button variant="secondary">Open settings</Button>} /> <SheetContent side="right" size="md" showClose={false}> <SheetHeader> <SheetTitle>Workspace settings</SheetTitle> <SheetDescription>Configure shared defaults for this workspace.</SheetDescription> </SheetHeader> <SheetBody>...</SheetBody> <SheetFooter> <SheetClose render={<Button variant="secondary">Cancel</Button>} /> <Button>Save changes</Button> </SheetFooter> </SheetContent></Sheet>Variants
| Variant | Purpose |
|---|---|
side: left | right | top | bottom | Side: left | right | top | bottom is part of the public component contract. |
size: sm | md | lg | Size: sm | md | lg is part of the public component contract. |
Anatomy
| Slot | Purpose |
|---|---|
sheet-trigger | Sheet Trigger slot exposed through data-slot="sheet-trigger". |
sheet-backdrop | Sheet Backdrop slot exposed through data-slot="sheet-backdrop". |
sheet-content | Sheet Content slot exposed through data-slot="sheet-content". |
sheet-header | Sheet Header slot exposed through data-slot="sheet-header". |
sheet-title | Sheet Title slot exposed through data-slot="sheet-title". |
sheet-description | Sheet Description slot exposed through data-slot="sheet-description". |
sheet-body | Sheet Body slot exposed through data-slot="sheet-body". |
sheet-footer | Sheet Footer slot exposed through data-slot="sheet-footer". |
sheet-close | Sheet Close slot exposed through data-slot="sheet-close". |
States
| State | Purpose |
|---|---|
Open | Focus is contained in the modal panel and the page scroll is locked. |
Closed | The panel is removed and focus returns to its trigger. |
Long content | The body scrolls while header and footer remain available. |
Motion
- Entry and exit direction follow side and use the shared overlay timing and easing contracts.
- Reduced motion disables both enter and exit animation without changing the final state.
Accessibility
- Uses the Base UI Dialog primitive for modal focus management, Escape and backdrop dismissal, focus restoration, and scroll locking.
- Provide SheetTitle or an explicit accessible name on SheetContent.
- Includes a localized aria-label="Close sheet" secondary icon Button by default; when showClose is false, consumers must provide another clear close path.
- SheetBody scrolls internally for long content; with viewport-fit=cover, safe-area insets protect panel padding and the default close; physical left and right sides remain explicit in RTL.
- Supports controlled open, uncontrolled defaultOpen, onOpenChange, and forwarded refs on meaningful slots.
API
| Prop | Purpose |
|---|---|
Sheet | Controlled or uncontrolled Base UI Dialog root: open, defaultOpen, and onOpenChange. |
SheetContent | Accepts side, size, showClose, closeLabel, className, refs, and native dialog popup props. |
SheetTrigger | Uses Base UI render composition so consumers supply their own trigger element. |
SheetHeader / SheetTitle / SheetDescription | Named accessible context slots. |
SheetBody / SheetFooter / SheetClose | Scrollable content, action, and dismissal boundaries. SheetClose is neutral in normal flow and supports Button render composition. |
Implementation contract
| Contract | Value |
|---|---|
Registry item | sheet installs 6 source files into the configured components directory. |
Base UI | dialog |
Registry dependencies | button |
Package dependencies | @base-ui/react, @nerio-ui/adapters, clsx, react, tailwind-merge, tailwindcss |
Styling contract
| Contract | Value |
|---|---|
Authoring | Complete, statically detectable Tailwind CSS v4 recipes own component visuals. |
Values | Semantic and component --n-* variables remain the canonical customization layer. |
Overrides | Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically. |
Residual CSS | Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer. |
Design notes
- Use Sheet for a focused modal panel that needs more room than a popover without becoming a product shell.
Do / do not
Do
Use for a small settings surface, mobile navigation, or contextual details owned by the consumer.
Keep one clear task and give the panel a concise accessible name.
Do not
Do not use Sheet as a persistent sidebar, resizable panel, AppShell, or routing container.
Do not hide the only close path when showClose is false.
Related components
Tokens
These are the primary customization points. Override semantic or component tokens instead of changing component source.
| Token | Purpose |
|---|---|
--n-sheet-width-sm | Public customization point for this component contract. |
--n-sheet-width-md | Public customization point for this component contract. |
--n-sheet-width-lg | Public customization point for this component contract. |
--n-sheet-height-sm | Public customization point for this component contract. |
--n-sheet-height-md | Public customization point for this component contract. |
--n-sheet-height-lg | Public customization point for this component contract. |
--n-sheet-padding | Public customization point for this component contract. |
--n-sheet-gap | Public customization point for this component contract. |
--n-sheet-radius | Public customization point for this component contract. |
--n-sheet-backdrop | Public customization point for this component contract. |
--n-sheet-transition-distance | Public customization point for this component contract. |
--n-sheet-viewport-inset | Public customization point for this component contract. |
--n-sheet-available-inline | Public customization point for this component contract. |
--n-sheet-available-block | Public customization point for this component contract. |
--n-motion-overlay-enter-duration | Public customization point for this component contract. |
--n-motion-overlay-enter-easing | Public customization point for this component contract. |
--n-motion-overlay-exit-duration | Public customization point for this component contract. |
--n-motion-overlay-exit-easing | Public customization point for this component contract. |
--n-overlay-z-index | Public customization point for this component contract. |
--n-overlay-background | Public customization point for this component contract. |
--n-overlay-border-width | Public customization point for this component contract. |
--n-overlay-border | Public customization point for this component contract. |
--n-overlay-backdrop-filter | Public customization point for this component contract. |
--n-overlay-shadow | Public customization point for this component contract. |
--n-overlay-foreground | Public customization point for this component contract. |
--n-overlay-foreground-muted | Public customization point for this component contract. |
--n-overlay-control-background | Public customization point for this component contract. |
--n-overlay-control-background-hover | Public customization point for this component contract. |
--n-overlay-surface-filter | Public customization point for this component contract. |
--n-input-background-on-overlay | Public customization point for this component contract. |
--n-input-background-on-overlay-hover | Public customization point for this component contract. |
--n-input-foreground-on-overlay | Public customization point for this component contract. |
--n-input-placeholder-on-overlay | Public customization point for this component contract. |
--n-focus-ring | Public customization point for this component contract. |