Sheet
LayoutOpens a side surface for focused secondary content while the current page remains in place.
Try it
Add to your project
npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/sheet.jsonThe command includes the component’s shared dependencies. Your project keeps editable source files.
Include the complete example
This example also composes switch, button, typography. Install its parts together:
npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/sheet.json https://luv-jeri.github.io/cojeev-ui/r/switch.json https://luv-jeri.github.io/cojeev-ui/r/button.json https://luv-jeri.github.io/cojeev-ui/r/typography.jsonUsing sheet
Compose SheetTrigger, SheetContent, title, description, and close parts for a secondary workflow.
Use open and onOpenChange to coordinate the sheet with application state.
SheetContent side="start" or side="end" (default) follows reading direction. Explicit dir overrides a surrounding Radix DirectionProvider. The panel travels its full measured distance to the viewport edge.
API
Compose the exported parts below. The prop types are read from the React source during the registry build.
Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.
SheetProps
Accepts the native or primitive props declared by its exported TypeScript type.
SheetTriggerProps
Accepts the native or primitive props declared by its exported TypeScript type.
SheetPortalProps
Accepts the native or primitive props declared by its exported TypeScript type.
SheetOverlayProps
Accepts the native or primitive props declared by its exported TypeScript type.
SheetContentProps
| Prop | Type | Required |
|---|---|---|
showCloseButton | boolean | No |
side | "start" | "end" | No |
SheetHeaderProps
Accepts the native or primitive props declared by its exported TypeScript type.
SheetFooterProps
Accepts the native or primitive props declared by its exported TypeScript type.
SheetTitleProps
Accepts the native or primitive props declared by its exported TypeScript type.
SheetDescriptionProps
Accepts the native or primitive props declared by its exported TypeScript type.
SheetCloseProps
Accepts the native or primitive props declared by its exported TypeScript type.
Accessibility
Include SheetTitle and a clear close action and retain the dialog primitives for focus management and dismissal.
States and appearance
For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.
Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.