{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "drawer",
"title": "Drawer",
"description": "Slide-out panel that emerges from screen edges for supplementary content or navigation.",
"dependencies": [
"@base-ui/react"
],
"files": [
{
"path": "packages/ui/src/drawer.tsx",
"content": "\"use client\";\n\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport type * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\n// =============================================================================\n// Drawer (Root)\n// =============================================================================\nfunction Drawer({ ...props }: DrawerPrimitive.Root.Props) {\n return ;\n}\n\n// =============================================================================\n// DrawerTrigger\n// =============================================================================\nexport interface DrawerTriggerProps extends DrawerPrimitive.Trigger.Props {}\n\nfunction DrawerTrigger({ ...props }: DrawerTriggerProps) {\n return ;\n}\n\n// =============================================================================\n// DrawerPortal\n// =============================================================================\nexport interface DrawerPortalProps extends DrawerPrimitive.Portal.Props {}\n\nfunction DrawerPortal({ ...props }: DrawerPortalProps) {\n return ;\n}\n\n// =============================================================================\n// DrawerClose\n// =============================================================================\nexport interface DrawerCloseProps extends DrawerPrimitive.Close.Props {}\n\nfunction DrawerClose({ ...props }: DrawerCloseProps) {\n return ;\n}\n\n// =============================================================================\n// DrawerOverlay\n// =============================================================================\nexport interface DrawerOverlayProps extends DrawerPrimitive.Backdrop.Props {}\n\nfunction DrawerOverlay({ className, ...props }: DrawerOverlayProps) {\n return (\n \n );\n}\n\n// =============================================================================\n// DrawerContent\n// =============================================================================\nexport type DrawerVariant = \"flush\" | \"floating\";\n\nexport interface DrawerContentProps extends DrawerPrimitive.Popup.Props {\n /**\n * Visual style for side drawers (`left` / `right`) on `md+` viewports.\n *\n * - `flush` (default): edges to the viewport, only the inner corners rounded.\n * Use for navigation drawers and any drawer that should feel attached to\n * the viewport edge.\n * - `floating`: inset gap on the outer side + top + bottom, all four corners\n * rounded, soft shadow, slightly wider default. Use for inspector / detail\n * panels where the user benefits from seeing the underlying list/page\n * through the visible backdrop.\n *\n * Has no effect for `top` / `bottom` directions or below the `md` breakpoint —\n * those always render flush.\n */\n variant?: DrawerVariant;\n}\n\nfunction DrawerContent({\n className,\n children,\n variant = \"flush\",\n ...props\n}: DrawerContentProps) {\n return (\n \n \n \n \n {/* Drag handle for bottom drawer */}\n \n \n {children}\n \n \n \n \n );\n}\n\n// =============================================================================\n// DrawerHeader\n// =============================================================================\nexport interface DrawerHeaderProps extends React.ComponentProps<\"div\"> {}\n\nfunction DrawerHeader({ className, ...props }: DrawerHeaderProps) {\n return (\n \n );\n}\n\n// =============================================================================\n// DrawerFooter\n// =============================================================================\nexport interface DrawerFooterProps extends React.ComponentProps<\"div\"> {}\n\nfunction DrawerFooter({ className, ...props }: DrawerFooterProps) {\n return (\n \n );\n}\n\n// =============================================================================\n// DrawerTitle\n// =============================================================================\nexport interface DrawerTitleProps extends DrawerPrimitive.Title.Props {}\n\nfunction DrawerTitle({ className, ...props }: DrawerTitleProps) {\n return (\n \n );\n}\n\n// =============================================================================\n// DrawerDescription\n// =============================================================================\nexport interface DrawerDescriptionProps\n extends DrawerPrimitive.Description.Props {}\n\nfunction DrawerDescription({ className, ...props }: DrawerDescriptionProps) {\n return (\n \n );\n}\n\n// =============================================================================\n// Exports\n// =============================================================================\nexport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerOverlay,\n DrawerPortal,\n DrawerTitle,\n DrawerTrigger,\n};\n",
"type": "registry:ui"
}
],
"type": "registry:ui"
}