Drawer

A nested panel that slides in from the edge.

Default

A panel inset from the right edge for supporting detail. Swipe it toward its edge, press Escape or click outside to close.

import {
  Button,
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPopup,
  DrawerTitle,
  DrawerTrigger,
  List,
  ListItem,
} from "@smallest-inc/ui";

const details = [
  { label: "Agent", value: "Support agent" },
  { label: "Caller", value: "+1 415 555 0132" },
  { label: "Duration", value: "4m 12s" },
  { label: "Outcome", value: "Resolved" },
];

export default function DrawerDefault() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="secondary" />}>View call</DrawerTrigger>
      <DrawerPopup>
        <DrawerHeader>
          <DrawerTitle>Call details</DrawerTitle>
          <DrawerDescription>Inbound call from today at 10:24.</DrawerDescription>
        </DrawerHeader>
        <DrawerBody>
          <List>
            {details.map((detail) => (
              <ListItem key={detail.label}>
                <span className="w-24 shrink-0 text-sm text-fg-secondary">{detail.label}</span>
                <span className="min-w-0 text-sm font-medium text-fg">{detail.value}</span>
              </ListItem>
            ))}
          </List>
        </DrawerBody>
        <DrawerFooter>
          <DrawerClose render={<Button variant="secondary" />}>Close</DrawerClose>
        </DrawerFooter>
      </DrawerPopup>
    </Drawer>
  );
}

Position

Right is the default. Pass position="left" for navigation-style panels; the swipe direction follows the side.

import {
  Button,
  Drawer,
  DrawerClose,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPopup,
  DrawerTitle,
  DrawerTrigger,
} from "@smallest-inc/ui";

export default function DrawerPosition() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Drawer position="left">
        <DrawerTrigger render={<Button variant="secondary" />}>Open left</DrawerTrigger>
        <DrawerPopup>
          <DrawerHeader>
            <DrawerTitle>Workspaces</DrawerTitle>
            <DrawerDescription>Switch between the workspaces you belong to.</DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <DrawerClose render={<Button variant="secondary" />}>Close</DrawerClose>
          </DrawerFooter>
        </DrawerPopup>
      </Drawer>
      <Drawer position="right">
        <DrawerTrigger render={<Button variant="secondary" />}>Open right</DrawerTrigger>
        <DrawerPopup>
          <DrawerHeader>
            <DrawerTitle>Filters</DrawerTitle>
            <DrawerDescription>Narrow the call log by agent, outcome and date.</DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <DrawerClose render={<Button variant="secondary" />}>Close</DrawerClose>
          </DrawerFooter>
        </DrawerPopup>
      </Drawer>
    </div>
  );
}

Close button and separated footer

Pass showCloseButton for a corner close and separated on DrawerFooter for a bordered row of end-aligned actions, the same footer as Dialog.

import {
  Button,
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPopup,
  DrawerTitle,
  DrawerTrigger,
  Field,
  FieldLabel,
  Fieldset,
  FieldsetLegend,
  Input,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@smallest-inc/ui";

const environments = [
  { label: "Production", value: "production" },
  { label: "Staging", value: "staging" },
];

export default function DrawerForm() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="secondary" />}>Create view</DrawerTrigger>
      <DrawerPopup showCloseButton>
        <DrawerBody className="flex flex-col gap-6">
          <DrawerHeader className="gap-2 p-0 pr-8">
            <DrawerTitle className="text-lg leading-7">Create view</DrawerTitle>
            <DrawerDescription>Group calls from your agents into a view you can monitor.</DrawerDescription>
          </DrawerHeader>
          <Fieldset>
            <FieldsetLegend className="sr-only">View details</FieldsetLegend>
            <Field>
              <FieldLabel>View name</FieldLabel>
              <Input placeholder="Escalated support calls" />
            </Field>
            <Field>
              <FieldLabel>Environment</FieldLabel>
              <Select items={environments}>
                <SelectTrigger>
                  <SelectValue placeholder="Choose environment" />
                </SelectTrigger>
                <SelectContent>
                  {environments.map((environment) => (
                    <SelectItem key={environment.value} value={environment.value}>
                      {environment.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </Field>
          </Fieldset>
        </DrawerBody>
        <DrawerFooter separated>
          <DrawerClose render={<Button variant="transparent" />}>Cancel</DrawerClose>
          <DrawerClose render={<Button />}>Create view</DrawerClose>
        </DrawerFooter>
      </DrawerPopup>
    </Drawer>
  );
}

Width

The default width is 24rem. Pass contentWidth={DRAWER_CONTENT_WIDTH_WIDE} (42rem) for transcripts, tables and other long-form content.

import {
  Button,
  DRAWER_CONTENT_WIDTH_WIDE,
  Drawer,
  DrawerBody,
  DrawerDescription,
  DrawerHeader,
  DrawerPopup,
  DrawerTitle,
  DrawerTrigger,
} from "@smallest-inc/ui";

export default function DrawerWidth() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="secondary" />}>View transcript</DrawerTrigger>
      <DrawerPopup showCloseButton contentWidth={DRAWER_CONTENT_WIDTH_WIDE}>
        <DrawerBody className="flex flex-col gap-6">
          <DrawerHeader className="gap-2 p-0 pr-8">
            <DrawerTitle className="text-lg leading-7">Transcript</DrawerTitle>
            <DrawerDescription>Support agent with +1 415 555 0132, 4m 12s.</DrawerDescription>
          </DrawerHeader>
          <div className="flex flex-col gap-4 text-sm">
            <p>
              <span className="font-medium text-fg">Agent</span>{" "}
              <span className="text-fg-secondary">Hi, thanks for calling. How can I help today?</span>
            </p>
            <p>
              <span className="font-medium text-fg">Caller</span>{" "}
              <span className="text-fg-secondary">I was charged twice for my last order.</span>
            </p>
            <p>
              <span className="font-medium text-fg">Agent</span>{" "}
              <span className="text-fg-secondary">
                I can see both charges. I have refunded the duplicate; it will reach your card in three to five days.
              </span>
            </p>
          </div>
        </DrawerBody>
      </DrawerPopup>
    </Drawer>
  );
}

Nested

Open a drawer from inside another. The parent stays mounted, dims and stacks behind the new one.

import {
  Button,
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPopup,
  DrawerTitle,
  DrawerTrigger,
  Field,
  FieldLabel,
  Input,
} from "@smallest-inc/ui";

export default function DrawerNested() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="secondary" />}>Edit agent</DrawerTrigger>
      <DrawerPopup showCloseButton>
        <DrawerBody className="flex flex-col gap-6">
          <DrawerHeader className="gap-2 p-0 pr-8">
            <DrawerTitle className="text-lg leading-7">Edit agent</DrawerTitle>
            <DrawerDescription>Change how Support agent introduces itself.</DrawerDescription>
          </DrawerHeader>
          <Field>
            <FieldLabel>Agent name</FieldLabel>
            <Input defaultValue="Support agent" />
          </Field>
        </DrawerBody>
        <DrawerFooter separated className="justify-between">
          <Drawer>
            <DrawerTrigger render={<Button variant="secondary" />}>Change voice</DrawerTrigger>
            <DrawerPopup showCloseButton>
              <DrawerBody className="flex flex-col gap-6">
                <DrawerHeader className="gap-2 p-0 pr-8">
                  <DrawerTitle className="text-lg leading-7">Change voice</DrawerTitle>
                  <DrawerDescription>The agent drawer stays open behind this one.</DrawerDescription>
                </DrawerHeader>
                <Field>
                  <FieldLabel>Voice ID</FieldLabel>
                  <Input defaultValue="emily-warm-en" />
                </Field>
              </DrawerBody>
              <DrawerFooter separated>
                <DrawerClose render={<Button variant="transparent" />}>Back</DrawerClose>
                <DrawerClose render={<Button />}>Use voice</DrawerClose>
              </DrawerFooter>
            </DrawerPopup>
          </Drawer>
          <div className="flex gap-2">
            <DrawerClose render={<Button variant="transparent" />}>Cancel</DrawerClose>
            <DrawerClose render={<Button />}>Save</DrawerClose>
          </div>
        </DrawerFooter>
      </DrawerPopup>
    </Drawer>
  );
}

Nested with a wide parent

When the nested drawer is narrower, the wide parent collapses to its width and peeks behind.

import {
  Button,
  DRAWER_CONTENT_WIDTH_WIDE,
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPopup,
  DrawerTitle,
  DrawerTrigger,
  List,
  ListItem,
} from "@smallest-inc/ui";

const agents = ["Support agent", "Renewals agent", "Appointment reminders"];

export default function DrawerNestedWideParent() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="secondary" />}>View agents</DrawerTrigger>
      <DrawerPopup showCloseButton contentWidth={DRAWER_CONTENT_WIDTH_WIDE}>
        <DrawerBody className="flex flex-col gap-6">
          <DrawerHeader className="gap-2 p-0 pr-8">
            <DrawerTitle className="text-lg leading-7">Agents</DrawerTitle>
            <DrawerDescription>Opening an agent collapses this drawer to the default width behind it.</DrawerDescription>
          </DrawerHeader>
          <List>
            {agents.map((agent) => (
              <ListItem key={agent}>
                <span className="min-w-0 flex-1 text-sm font-medium text-fg">{agent}</span>
                <Drawer>
                  <DrawerTrigger render={<Button variant="secondary" size="sm" />}>Open</DrawerTrigger>
                  <DrawerPopup showCloseButton>
                    <DrawerBody>
                      <DrawerHeader className="gap-2 p-0 pr-8">
                        <DrawerTitle className="text-lg leading-7">{agent}</DrawerTitle>
                        <DrawerDescription>Default width. The agents drawer peeks behind.</DrawerDescription>
                      </DrawerHeader>
                    </DrawerBody>
                    <DrawerFooter separated>
                      <DrawerClose render={<Button variant="secondary" />}>Back</DrawerClose>
                    </DrawerFooter>
                  </DrawerPopup>
                </Drawer>
              </ListItem>
            ))}
          </List>
        </DrawerBody>
      </DrawerPopup>
    </Drawer>
  );
}

Nested with a wide child

When the nested drawer is wider, the parent grows to match, then peeks behind.

import {
  Button,
  DRAWER_CONTENT_WIDTH_WIDE,
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPopup,
  DrawerTitle,
  DrawerTrigger,
} from "@smallest-inc/ui";

export default function DrawerNestedWideChild() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="secondary" />}>View call</DrawerTrigger>
      <DrawerPopup showCloseButton>
        <DrawerBody>
          <DrawerHeader className="gap-2 p-0 pr-8">
            <DrawerTitle className="text-lg leading-7">Call details</DrawerTitle>
            <DrawerDescription>Opening the transcript widens this drawer to match, then it peeks behind.</DrawerDescription>
          </DrawerHeader>
        </DrawerBody>
        <DrawerFooter separated>
          <Drawer>
            <DrawerTrigger render={<Button />}>View transcript</DrawerTrigger>
            <DrawerPopup showCloseButton contentWidth={DRAWER_CONTENT_WIDTH_WIDE}>
              <DrawerBody>
                <DrawerHeader className="gap-2 p-0 pr-8">
                  <DrawerTitle className="text-lg leading-7">Transcript</DrawerTitle>
                  <DrawerDescription>A 42rem drawer for long-form content.</DrawerDescription>
                </DrawerHeader>
              </DrawerBody>
              <DrawerFooter separated>
                <DrawerClose render={<Button variant="secondary" />}>Back</DrawerClose>
              </DrawerFooter>
            </DrawerPopup>
          </Drawer>
        </DrawerFooter>
      </DrawerPopup>
    </Drawer>
  );
}

Best practices

When to use

Use for supporting detail, inspection or editing that benefits from keeping the page in view: call details, filters, agent settings.
Use Dialog for a blocking decision; never use a Drawer to confirm a destructive action. There is no Sheet: use Drawer for every edge panel.

Behavior

Right is the default; use position="left" only for navigation-style panels, and keep one edge per kind of content.
Default width is 24rem; pass contentWidth={DRAWER_CONTENT_WIDTH_WIDE} (42rem) for transcripts or tables.
Always give an explicit close: showCloseButton, or a DrawerClose in DrawerFooter. Use DrawerFooter separated for a bordered row of end-aligned actions.
Nest by rendering a Drawer inside DrawerPopup. The parent dims and peeks behind, matches the frontmost width, and Escape closes one layer at a time.

Content

DrawerTitle names the object (“Call details”, “Edit agent”); DrawerDescription gives one line of context.

Accessibility

Include DrawerTitle in every popup. Focus is trapped while modal and returns to the trigger on close.

PreviousDialog NextDropdown