Drawer

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Prop reference

Auto-generated from the component source

Drawer

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof DrawerPrimitive.Root>

DrawerClose

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof DrawerPrimitive.Close>

DrawerContent

className
children

React.ComponentProps<typeof DrawerPrimitive.Content>

DrawerDescription

className

React.ComponentProps<typeof DrawerPrimitive.Description>

DrawerFooter

className

React.ComponentProps<"div">

DrawerHeader

className

React.ComponentProps<"div">

DrawerOverlay

className

React.ComponentProps<typeof DrawerPrimitive.Overlay>

DrawerPortal

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof DrawerPrimitive.Portal>

DrawerTitle

className

React.ComponentProps<typeof DrawerPrimitive.Title>

DrawerTrigger

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof DrawerPrimitive.Trigger>

Code

// owner: Sona
"use client";

import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function DrawerExample() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button>Schedule sync</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Schedule sync</DrawerTitle>
          <DrawerDescription>
            Send a calendar invite to your team.
          </DrawerDescription>
        </DrawerHeader>
        <div className="px-4 pb-6">
          <div className="space-y-3">
            <div className="space-y-1">
              <Label htmlFor="topic">Topic</Label>
              <Input id="topic" placeholder="Quarterly review" />
            </div>
            <div className="space-y-1">
              <Label htmlFor="time">Time</Label>
              <Input id="time" type="datetime-local" />
            </div>
          </div>
        </div>
        <DrawerFooter>
          <Button>Send invite</Button>
          <Button variant="outline">Cancel</Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}

Drawer

Component preview

On this page

Command Palette