Drawer
Slide-out panel anchored to the screen edge. Install Drawer from the VLLNT UI registry with the shadcn CLI.
Slide-out panel anchored to the screen edge. Part of the overlay family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
Add Drawer to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/drawer.jsonSource
"use client";
import { Drawer as DrawerPrimitive } from "vaul";
import { cn } from "../../lib/utils";
const Drawer = ({
shouldScaleBackground = true,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
<DrawerPrimitive.Root
shouldScaleBackground={shouldScaleBackground}
{...props}
/>
);
Drawer.displayName = "Drawer";
const DrawerTrigger = DrawerPrimitive.Trigger;
const DrawerPortal = DrawerPrimitive.Portal;
const DrawerClose = DrawerPrimitive.Close;
const DrawerOverlay = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
ref?: React.Ref<React.ComponentRef<typeof DrawerPrimitive.Overlay>>;
}) => (
<DrawerPrimitive.Overlay
className={cn("fixed inset-0 z-50 bg-black/80", className)}
ref={ref}
{...props}
/>
);
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
const DrawerContent = ({
children,
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
ref?: React.Ref<React.ComponentRef<typeof DrawerPrimitive.Content>>;
}) => (
<DrawerPortal>
<DrawerOverlay />
<DrawerPrimitive.Content
className={cn(
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
className,
)}
ref={ref}
{...props}
>
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
);
DrawerContent.displayName = "DrawerContent";
const DrawerHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
{...props}
/>
);
DrawerHeader.displayName = "DrawerHeader";
const DrawerFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props}
/>
);
DrawerFooter.displayName = "DrawerFooter";
const DrawerTitle = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {
ref?: React.Ref<React.ComponentRef<typeof DrawerPrimitive.Title>>;
}) => (
<DrawerPrimitive.Title
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className,
)}
ref={ref}
{...props}
/>
);
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
const DrawerDescription = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {
ref?: React.Ref<React.ComponentRef<typeof DrawerPrimitive.Description>>;
}) => (
<DrawerPrimitive.Description
className={cn("text-sm text-muted-foreground", className)}
ref={ref}
{...props}
/>
);
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
export {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerPortal,
DrawerTitle,
DrawerTrigger,
};
Stories
Explore every variant and state in the interactive Storybook:
Preview
Switch between light and dark to inspect the embedded Storybook preview.