{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "drawer", "type": "registry:block", "title": "Drawer", "description": "Drawer with Crafter styling. Explore the live example and use the source in your project.", "dependencies": [ "@base-ui/react@^1.8.0", "cn@^0.2.6" ], "files": [ { "path": "components/ui/drawer.tsx", "type": "registry:ui", "content": "\"use client\";\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { cn } from \"cn\";\nimport * as React from \"react\";\ntype DrawerContextProps = {\n hasSnapPoints: boolean;\n modal: DrawerPrimitive.Root.Props[\"modal\"];\n showSwipeHandle: boolean;\n swipeDirection: NonNullable;\n};\nconst DrawerContext = React.createContext(null);\nfunction useDrawer() {\n const context = React.useContext(DrawerContext);\n if (!context) {\n throw new Error(\"useDrawer must be used within a Drawer.\");\n }\n return context;\n}\nfunction Drawer({ modal = true, showSwipeHandle = false, snapPoints, swipeDirection = \"down\", ...props }: DrawerPrimitive.Root.Props & {\n showSwipeHandle?: boolean;\n}) {\n const hasSnapPoints = snapPoints != null && snapPoints.length > 0;\n const contextValue = React.useMemo(() => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }), [hasSnapPoints, modal, showSwipeHandle, swipeDirection]);\n return (\n \n );\n}\nfunction DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {\n return ;\n}\nfunction DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {\n return ;\n}\nfunction DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {\n return ;\n}\nfunction DrawerOverlay({ className, ...props }: DrawerPrimitive.Backdrop.Props) {\n return ();\n}\nfunction DrawerSwipeHandle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (
);\n}\nfunction DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.Props) {\n const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();\n const swipeAxis = swipeDirection === \"down\" || swipeDirection === \"up\" ? \"y\" : \"x\";\n return (\n {modal === true && ()}\n \n \n {showSwipeHandle && }\n \n {children}\n \n \n \n );\n}\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (
);\n}\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (
);\n}\nfunction DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\n return ();\n}\nfunction DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props) {\n return ();\n}\nexport { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, };\n" } ], "cssVars": { "light": { "background": "#ffffff", "foreground": "#141414", "card": "#ffffff", "card-foreground": "#141414", "popover": "#ffffff", "popover-foreground": "#141414", "secondary": "#f5f5f5", "secondary-foreground": "#141414", "muted": "#f5f5f5", "muted-foreground": "#6b6b6b", "accent": "#f0f0f0", "accent-foreground": "#141414", "border": "#e6e6e6", "input": "#cccccc", "destructive": "#b91c1c", "syntax-text": "#242424", "syntax-keyword": "#754399", "syntax-string": "#326348", "syntax-function": "#315d89", "syntax-number": "#86551f", "syntax-comment": "#6b6b6b", "syntax-punctuation": "#616161", "syntax-type": "#7c464c", "syntax-background": "#f8f8f8", "sidebar": "#f5f5f5", "sidebar-foreground": "#141414", "sidebar-primary": "#141414", "sidebar-primary-foreground": "#ffffff", "sidebar-accent": "#f0f0f0", "sidebar-accent-foreground": "#141414", "sidebar-border": "#e6e6e6", "sidebar-ring": "#141414", "chart-1": "#141414", "chart-2": "#525252", "chart-3": "#737373", "chart-4": "#a3a3a3", "chart-5": "#d4d4d4", "primary": "#141414", "primary-foreground": "#ffffff", "ring": "#141414", "radius": "0rem", "font-sans": "ui-sans-serif, system-ui, sans-serif", "control-height": "2rem" }, "dark": { "background": "#141414", "foreground": "#fafafa", "card": "#1c1c1c", "card-foreground": "#fafafa", "popover": "#1c1c1c", "popover-foreground": "#fafafa", "secondary": "#262626", "secondary-foreground": "#fafafa", "muted": "#262626", "muted-foreground": "#a3a3a3", "accent": "#303030", "accent-foreground": "#fafafa", "border": "#404040", "input": "#404040", "destructive": "#ff9d9d", "syntax-text": "#ededed", "syntax-keyword": "#c6a3df", "syntax-string": "#98c4a4", "syntax-function": "#9cbedf", "syntax-number": "#d7b27d", "syntax-comment": "#a3a3a3", "syntax-punctuation": "#b0b0b0", "syntax-type": "#dda2aa", "syntax-background": "#1b1b1b", "sidebar": "#262626", "sidebar-foreground": "#fafafa", "sidebar-primary": "#fafafa", "sidebar-primary-foreground": "#141414", "sidebar-accent": "#303030", "sidebar-accent-foreground": "#fafafa", "sidebar-border": "#404040", "sidebar-ring": "#fafafa", "chart-1": "#fafafa", "chart-2": "#d4d4d4", "chart-3": "#a3a3a3", "chart-4": "#737373", "chart-5": "#525252", "primary": "#fafafa", "primary-foreground": "#141414", "ring": "#fafafa", "radius": "0rem", "font-sans": "ui-sans-serif, system-ui, sans-serif", "control-height": "2rem" } } }