caliper uidocs
DemoSign inGet Pro

Drawer

Free

A panel that slides in from the left or right for editing alongside the page.

Installs components/ui/drawer.tsxDepends on @radix-ui/react-dialog, @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/drawer.json

When to use #

Use it for

  • Editing a record while keeping the list visible behind it.
  • Navigation on small screens.

Skip it when

  • A one-line confirmation; use a dialog.
  • Phones where a bottom sheet is more natural.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/drawer.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerTitle, DrawerDescription, DrawerHeader and DrawerFooter.

example.tsx
import { Button } from "@/components/ui/button"
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"

export function EditDrawer() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="secondary">Edit project</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Edit project</DrawerTitle>
          <DrawerDescription>Rename it or change who can see it.</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <DrawerClose asChild><Button>Done</Button></DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}

API reference #

Drawer

component

No props of its own; it accepts the native props of its root element.

DrawerTrigger

component

No props of its own; it accepts the native props of its root element.

DrawerClose

component

No props of its own; it accepts the native props of its root element.

DrawerContent

component

Also accepts the native props of its root element and a ref.

PropTypeDefault
showCloseButtonboolean—
side"left" | "right""right"

DrawerTitle

component

No props of its own; it accepts the native props of its root element.

DrawerDescription

component

No props of its own; it accepts the native props of its root element.

DrawerHeader

component

No props of its own; it accepts the native props of its root element.

DrawerFooter

component

No props of its own; it accepts the native props of its root element.

Accessibility #

It is built on native elements, so roles and focus come from the browser.

Keyboard and focus handling comes from Radix dialog: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.