Sheet
ExperimentalOpen a focused task at an edge of the viewport.
Example
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from 'panel-ui-kit/sheet';import { Button } from 'panel-ui-kit/button'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <Sheet> <SheetTrigger asChild><Button>Open filters</Button></SheetTrigger> <SheetContent side="right" closeLabel="Close filters"> <SheetHeader><SheetTitle>Filters</SheetTitle><SheetDescription>Refine this view.</SheetDescription></SheetHeader> <SheetFooter><SheetClose asChild><Button>Done</Button></SheetClose></SheetFooter> </SheetContent> </Sheet> </PanelUiTheme> );}When to use
Use title, description and localized closeLabel. Reuses the Dialog focus contract. Avoid deep navigation or business workflows inside the primitive.
Keyboard
Focus stays inside. Escape closes and returns focus to the trigger.
Properties
| Property | Values | Default |
|---|---|---|
side | left · right · top · bottom | right |
closeLabel | Nonempty localized name | Required |
open / defaultOpen | boolean | Caller owned |
motion | full · reduced · off · object | Inherited |