Drawer
LayoutPresents dialog content in a drawer surface while keeping the current page underneath.
Try it
Add to your project
npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/drawer.jsonThe command includes the component’s shared dependencies. Your project keeps editable source files.
Include the complete example
This example also composes button, typography. Install its parts together:
npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/drawer.json https://luv-jeri.github.io/cojeev-ui/r/button.json https://luv-jeri.github.io/cojeev-ui/r/typography.jsonUsing drawer
Compose DrawerTrigger, DrawerContent, title, description, and close controls for a secondary task.
Use the root open state to coordinate opening and dismissal with the surrounding interface.
Bottom travel is measured from the content and viewport, so taller content and dock gaps keep a continuous entrance and exit.
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.
DrawerProps
Accepts the native or primitive props declared by its exported TypeScript type.
DrawerTriggerProps
Accepts the native or primitive props declared by its exported TypeScript type.
DrawerPortalProps
Accepts the native or primitive props declared by its exported TypeScript type.
DrawerOverlayProps
Accepts the native or primitive props declared by its exported TypeScript type.
DrawerContentProps
| Prop | Type | Required |
|---|---|---|
showCloseButton | boolean | No |
DrawerHeaderProps
Accepts the native or primitive props declared by its exported TypeScript type.
DrawerFooterProps
Accepts the native or primitive props declared by its exported TypeScript type.
DrawerTitleProps
Accepts the native or primitive props declared by its exported TypeScript type.
DrawerDescriptionProps
Accepts the native or primitive props declared by its exported TypeScript type.
DrawerCloseProps
Accepts the native or primitive props declared by its exported TypeScript type.
Accessibility
Provide DrawerTitle and an accessible close action, and retain the dialog primitives for focus management.
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.