Drawer

A panel that slides in from a screen edge, with swipe-to-dismiss and snap points.

Usage

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerBody,
  DrawerFooter,
  DrawerClose,
} from '@appica/ui-react/drawer'
import { Button } from '@appica/ui-react/button'

<Drawer side="right">
  <DrawerTrigger render={<Button variant="outline">Open drawer</Button>} />
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Notifications</DrawerTitle>
      <DrawerDescription>Choose what you want to be notified about.</DrawerDescription>
    </DrawerHeader>
    <DrawerBody>{/* content */}</DrawerBody>
    <DrawerFooter>
      <DrawerClose render={<Button>Save</Button>} />
      <DrawerClose render={<Button variant="outline">Cancel</Button>} />
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Drawer is a compound component built on Base UI's Drawer. It's a Dialog that slides in from an edge and can be swiped to dismiss — at home as a mobile bottom sheet or a desktop side panel. Pick the edge with side; the swipe direction follows it automatically. By default it's modal and dismissible, with a drag handle and a corner close button:

DrawerTrigger — the button that opens the drawer. Use render to project it onto your own Button (or any element).
DrawerContent — the portalled panel. It draws the card, backdrop, handle, focus trap, and corner close button, and accepts the shared modal props below.
DrawerHeader — groups the title and description with consistent spacing.
DrawerTitle — an <h2> that labels the panel (aria-labelledby).
DrawerDescription — a <p> that describes it (aria-describedby).
DrawerBody — the main content region; it owns the scroll and coordinates with the swipe gesture so scrolling doesn't dismiss the drawer.
DrawerFooter — the actions, stacked at the bottom of the panel.
DrawerClose — a button that dismisses the drawer; project it onto your own Button with render.

Reach for a Drawer when the surface should feel anchored to an edge or be swipeable on touch — navigation, filters, a detail panel, a mobile sheet. For a centered modal, use a Dialog; for a high-stakes confirmation, use an Alert Dialog.

Examples

Sides

Set side to top, right, bottom, or left to choose the edge the drawer slides in from; the swipe-to-dismiss direction follows. Left and right read as side panels; top and bottom as sheets — cap the sheet's width (here mx-auto max-w-2xl) so it doesn't stretch edge-to-edge on a wide screen.

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerBody,
  DrawerFooter,
  DrawerClose,
} from '@appica/ui-react/drawer'
import { Button } from '@appica/ui-react/button'

const SIDES = [
  { side: 'top', label: 'Top' },
  { side: 'right', label: 'Right' },
  { side: 'bottom', label: 'Bottom' },
  { side: 'left', label: 'Left' },
] as const

export default function DrawerSides() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      {SIDES.map(({ side, label }) => {
        const wide = side === 'top' || side === 'bottom'
        return (
          <Drawer key={side} side={side}>
            <DrawerTrigger render={<Button variant="outline">{label}</Button>} />
            <DrawerContent className={wide ? 'mx-auto max-w-2xl' : undefined}>
              <DrawerHeader>
                <DrawerTitle>{label} drawer</DrawerTitle>
                <DrawerDescription>This panel slides in from the {side} edge.</DrawerDescription>
              </DrawerHeader>
              <DrawerBody>
                <p>Drag the handle or swipe toward the {side} edge to dismiss it.</p>
              </DrawerBody>
              <DrawerFooter>
                <DrawerClose render={<Button variant="outline">Close</Button>} />
              </DrawerFooter>
            </DrawerContent>
          </Drawer>
        )
      })}
    </div>
  )
}

Snap points

Pass snapPoints to let a top or bottom drawer rest at intermediate heights. Each value is a fraction of the viewport (0–1), a pixel number (> 1), or a CSS length string ('24rem'). The drawer opens at the first point and the user can drag — or flick — between them; it dismisses past the smallest. Great for a bottom sheet that peeks, then expands to full height.

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
} from '@appica/ui-react/drawer'
import { Button } from '@appica/ui-react/button'
import { ScrollArea } from '@appica/ui-react/scroll-area'
import { Thumbnail } from '@appica/ui-react/thumbnail'
import { Music } from '@appica/icons-react'

const TRACKS = [
  { title: 'Nightcall', artist: 'Neon Drift' },
  { title: 'Midnight City', artist: 'Violet Skies' },
  { title: 'Resonance', artist: 'Echo Theory' },
  { title: 'A Real Hero', artist: 'Pixel Horizon' },
  { title: 'Sunset Avenue', artist: 'The Lateliners' },
  { title: 'Turbo Killer', artist: 'Chrome Wolf' },
  { title: 'Afterglow', artist: 'Static Bloom' },
  { title: 'Le Castle', artist: 'Power Circuit' },
  { title: 'Tech Noir', artist: 'Ghost Signal' },
  { title: 'Crystals', artist: 'Cassette 84' },
]

export default function DrawerSnapPoints() {
  return (
    <Drawer snapPoints={[0.4, 1]}>
      <DrawerTrigger render={<Button variant="outline">Open player</Button>} />
      <DrawerContent className="mx-auto max-w-2xl">
        <DrawerHeader>
          <DrawerTitle>Up next</DrawerTitle>
          <DrawerDescription>Drag the sheet to a snap point — peek at 40% or pull it to full height.</DrawerDescription>
        </DrawerHeader>
        <ScrollArea className="min-h-0 flex-1" scrollShadow>
          <div className="flex flex-col gap-5 px-6">
            {TRACKS.map((track) => (
              <div key={track.title} className="flex items-center gap-3">
                <Thumbnail variant="icon-soft" size="sm">
                  <Music />
                </Thumbnail>
                <span className="flex min-w-0 flex-col">
                  <span className="text-foreground-intense truncate text-sm font-medium">{track.title}</span>
                  <span className="text-foreground-muted truncate text-xs">{track.artist}</span>
                </span>
              </div>
            ))}
          </div>
        </ScrollArea>
      </DrawerContent>
    </Drawer>
  )
}

Scrollable content

For content taller than the panel, let a ScrollArea own the overflow between a pinned header and footer. A left/right drawer is the natural fit: its swipe-to-dismiss is horizontal, so it never fights the vertical scroll.

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
} from '@appica/ui-react/drawer'
import { Button } from '@appica/ui-react/button'
import { ScrollArea } from '@appica/ui-react/scroll-area'

const EVENTS = [
  { who: 'Sarah Jenkins', what: 'merged pull request #482', when: '2m ago' },
  { who: 'Maya Torres', what: 'commented on “Release checklist”', when: '18m ago' },
  { who: 'Leo Martin', what: 'approved pull request #480', when: '40m ago' },
  { who: 'Daniel Reyes', what: 'closed issue #311', when: '1h ago' },
  { who: 'Priya Shah', what: 'added a label to issue #309', when: '2h ago' },
  { who: 'Emma Clarke', what: 'deployed to production', when: '3h ago' },
  { who: 'Sarah Jenkins', what: 'opened pull request #485', when: '5h ago' },
  { who: 'Tom Becker', what: 'pushed 12 commits to main', when: '6h ago' },
  { who: 'Maya Torres', what: 'requested changes on #478', when: '8h ago' },
  { who: 'Leo Martin', what: 'linked issue #312 to #485', when: '11h ago' },
  { who: 'Maya Torres', what: 'invited 2 members', when: 'Yesterday' },
  { who: 'Nina Foster', what: 'updated the roadmap', when: 'Yesterday' },
  { who: 'Priya Shah', what: 'merged pull request #476', when: 'Yesterday' },
  { who: 'Daniel Reyes', what: 'renamed the project', when: '2d ago' },
  { who: 'Emma Clarke', what: 'archived 4 tasks', when: '2d ago' },
  { who: 'Tom Becker', what: 'reverted commit 9f3c1a', when: '3d ago' },
  { who: 'Sarah Jenkins', what: 'created milestone “v2.0”', when: '3d ago' },
  { who: 'Leo Martin', what: 'closed issue #298', when: '4d ago' },
  { who: 'Nina Foster', what: 'edited the README', when: '5d ago' },
  { who: 'Priya Shah', what: 'opened pull request #470', when: '5d ago' },
  { who: 'Daniel Reyes', what: 'added 3 members', when: '6d ago' },
  { who: 'Emma Clarke', what: 'set up continuous integration', when: '1w ago' },
  { who: 'Tom Becker', what: 'imported the codebase', when: '1w ago' },
  { who: 'Sarah Jenkins', what: 'created the project', when: '2w ago' },
]

export default function DrawerScrollable() {
  return (
    <Drawer side="right">
      <DrawerTrigger render={<Button variant="outline">View activity</Button>} />
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Activity</DrawerTitle>
          <DrawerDescription>Everything that happened in this project.</DrawerDescription>
        </DrawerHeader>
        <ScrollArea className="min-h-0 flex-1">
          <ol className="flex flex-col gap-4 px-6 pb-2">
            {EVENTS.map((event, i) => (
              <li key={i} className="flex flex-col gap-0.5">
                <p className="text-sm">
                  <span className="text-foreground-intense font-medium">{event.who}</span> {event.what}
                </p>
                <p className="text-foreground-muted text-xs">{event.when}</p>
              </li>
            ))}
          </ol>
        </ScrollArea>
        <DrawerFooter>
          <DrawerClose render={<Button variant="outline">Close</Button>} />
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Nested drawers

A drawer can open another drawer. Base UI keeps the parent mounted and tucks it back as the child slides in, so the stack reads as depth. The child's backdrop is suppressed automatically — just nest the markup, each drawer manages its own state.

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerBody,
  DrawerFooter,
  DrawerClose,
} from '@appica/ui-react/drawer'
import { Button } from '@appica/ui-react/button'
import { Field, FieldLabel } from '@appica/ui-react/field'
import { Input } from '@appica/ui-react/input'
import { Pencil } from '@appica/icons-react'

export default function DrawerNested() {
  return (
    <Drawer side="right">
      <DrawerTrigger render={<Button variant="outline">Workspace</Button>} />
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Workspace</DrawerTitle>
          <DrawerDescription>Manage the workspace and its members.</DrawerDescription>
        </DrawerHeader>
        <DrawerBody className="flex flex-col items-start gap-3">
          <p>Open a sub-panel to rename the workspace — the parent tucks back to show the stack.</p>
          <Drawer side="right">
            <DrawerTrigger
              render={
                <Button>
                  <Pencil data-icon="start" />
                  Rename workspace
                </Button>
              }
            />
            <DrawerContent closeButton={false}>
              <DrawerHeader>
                <DrawerTitle>Rename workspace</DrawerTitle>
                <DrawerDescription>This name is visible to everyone on the team.</DrawerDescription>
              </DrawerHeader>
              <DrawerBody>
                <Field>
                  <FieldLabel>Workspace name</FieldLabel>
                  <Input defaultValue="Appica" />
                </Field>
              </DrawerBody>
              <DrawerFooter>
                <DrawerClose render={<Button>Save</Button>} />
                <DrawerClose render={<Button variant="outline">Cancel</Button>} />
              </DrawerFooter>
            </DrawerContent>
          </Drawer>
        </DrawerBody>
      </DrawerContent>
    </Drawer>
  )
}

RTL

Every Appica UI component supports right-to-left layouts out of the box. Set the dir attribute on a container (commonly your <html> element) so CSS logical properties resolve correctly, and wrap your tree in DirectionProvider so direction-aware behavior follows the same direction.

import { DirectionProvider } from '@appica/ui-react/providers/direction-provider'

export default function RootLayout({ children }) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <DirectionProvider dir="rtl">{children}</DirectionProvider>
      </body>
    </html>
  )
}

The header, body, and footer flip to read right-to-left, and the handle and corner close button move to mirror. The panel portals to <body>, so it follows the document direction — when you scope RTL to a subtree of an LTR page, set dir="rtl" on DrawerContent so the panel mirrors too. For setup details and caveats, see the RTL guide.

API reference

Drawer wraps Base UI's Drawer. Each part forwards every remaining prop to the matching Base UI primitive, so anything it accepts works here — the tables below list the Appica additions and the most common props. See the Base UI docs for the complete API.

Drawer

The root. Holds the open state and the chosen edge; renders no DOM of its own. The swipe direction is derived from side, so you don't set swipeDirection yourself.

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	The edge the drawer slides in from.
`open`	`boolean`	—	Controlled open state. Pair with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Uncontrolled initial open state.
`onOpenChange`	`(open, eventDetails) => void`	—	Fires when the drawer opens or closes.
`modal`	`boolean \| 'trap-focus'`	`true`	Trap focus and block scroll/interaction with the page behind.
`disablePointerDismissal`	`boolean`	`false`	Keep the drawer open when the backdrop is clicked.
`snapPoints`	`(number \| string)[]`	—	Resting heights for a top/bottom drawer (fraction, px, or length).
`defaultSnapPoint`	`number \| string \| null`	—	Uncontrolled initial snap point (defaults to the first).
`snapPoint`	`number \| string \| null`	—	Controlled active snap point. Pair with `onSnapPointChange`.
`onSnapPointChange`	`(point) => void`	—	Fires when the active snap point changes.
`onOpenChangeComplete`	`(open) => void`	—	Fires after the open/close transition finishes.
`actionsRef`	`RefObject`	—	Imperative handle to `close()` / `unmount()` the panel.

DrawerTrigger

The button that opens the drawer. Forwards Base UI's Drawer.Trigger; use render to project it onto your own element.

Prop	Type	Default	Description
`render`	`ReactElement \| (props, state) => ReactElement`	—	Render the trigger as your own element (a `Button`).
`nativeButton`	`boolean`	`true`	Whether the rendered element is a native `<button>`.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

DrawerContent

The portalled panel. Draws the card, backdrop, drag handle, focus trap, and corner close button, and maps the underlying Base UI Portal / Backdrop / Viewport so you don't have to reach into them. Shared with Dialog and Alert Dialog through the modal props.

Prop	Type	Default	Description
`closeButton`	`boolean`	`true`	Render the × button in the corner.
`closeLabel`	`string`	`'Close'`	Accessible label for the close button.
`backdrop`	`boolean`	—	Render the dimmed backdrop. Defaults to `true` at the top level, off when nested.
`container`	`HTMLElement \| ref \| null`	—	Portal target — render the panel into a different node.
`keepMounted`	`boolean`	`false`	Keep the panel mounted in the DOM while closed.
`backdropProps`	`object`	—	Escape hatch for the backdrop element (`className`, `style`, `forceRender`, …).
`viewportProps`	`object`	—	Escape hatch for the viewport element that positions the panel.
`portalProps`	`object`	—	Escape hatch for the portal element.
`className`	`string`	—	Extra classes on the panel (e.g. a `max-w-` cap or a custom `w-`).

DrawerHeader

A layout wrapper that groups the title and description with consistent padding and spacing.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Typically the title and description.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

DrawerTitle

An <h2> that labels the panel. Rendering one sets the panel's aria-labelledby.

Prop	Type	Default	Description
`children`	`ReactNode`	—	The title text.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

DrawerDescription

A <p> that describes the panel. Rendering one sets the panel's aria-describedby.

Prop	Type	Default	Description
`children`	`ReactNode`	—	The description text.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

DrawerBody

The main content region. Owns the scroll for overflowing content and coordinates with the swipe gesture so scrolling away from the edge doesn't dismiss the drawer.

Prop	Type	Default	Description
`children`	`ReactNode`	—	The body content.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

DrawerFooter

A layout wrapper for the actions, stacked at the bottom of the panel.

Prop	Type	Default	Description
`children`	`ReactNode`	—	The action buttons.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

DrawerClose

A button that closes the drawer. Forwards Base UI's Drawer.Close; project it onto your own element with render.

Prop	Type	Default	Description
`render`	`ReactElement \| (props, state) => ReactElement`	—	Render the close control as your own element.
`nativeButton`	`boolean`	`true`	Whether the rendered element is a native `<button>`.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

Indenting the page

Three optional parts — all from @appica/ui-react/drawer — produce the effect where the page scales back as a drawer opens. Wrap your app once at the root; most drawers never touch them.

Part	Description
`DrawerProvider`	Wraps your app. Tracks every `Drawer` mounted inside it and activates the indent parts while one is open.
`DrawerIndent`	Wraps the page content that scales back. Place it at the top of the tree, next to `DrawerIndentBackground`.
`DrawerIndentBackground`	The surface revealed behind the scaled page. Defaults to the body background (`bg-background`); give it a darker color for a contrasting scaled-canvas.

<DrawerProvider>
  <DrawerIndentBackground />
  <DrawerIndent>{/* your app — including any Drawer */}</DrawerIndent>
</DrawerProvider>

Accessibility

The panel has role="dialog" with aria-modal, and aria-labelledby / aria-describedby wired automatically from DrawerTitle and DrawerDescription — always render a title.
Opening traps focus inside the panel; Escape, an outside click, or a swipe toward the edge close it (set disablePointerDismissal to keep it open on a backdrop click), and focus returns to the trigger.
With modal (the default), scroll and interaction with the rest of the page are blocked while the drawer is open. Set modal={false} to leave the page interactive.
The corner close button carries an accessible label (closeLabel, default "Close"); set it when your drawer needs more specific wording.
Swipe-to-dismiss, snap transitions, and enter/exit animations are skipped when the user prefers reduced motion.

Actions & Inputs

Data Display

Decoration & Effects

Layout

Menus

Navigation

Overlays

Status & Feedback

Drawer

Usage

Examples

Sides

Snap points

Scrollable content

Nested drawers

RTL

API reference

Drawer

DrawerTrigger

DrawerContent

DrawerHeader

DrawerTitle

DrawerDescription

DrawerBody

DrawerFooter

DrawerClose

Indenting the page

Accessibility