Clinia UI

Drawer

A panel that slides up from the bottom of the screen, for touch devices.

shadcn docs →

When to use

  • A short task on a touch screen, opened from the bottom: share a record, pick one action.
  • A panel users expect to dismiss with a swipe.

When not to use

  • A panel next to the page on desktop: use Sheet.
  • A focused task on desktop: use Dialog.
  • Confirming a destructive action: use Alert Dialog.

Install

npx shadcn@latest add @clinia/drawer

Anatomy

Share this record

Anyone in the workspace with the link can open it.

  1. 1Drawerdata-slot="drawer-popup"bg-popover · rounded-lg · m-2
  2. 2Swipe handle (optional)data-slot="drawer-swipe-handle"bg-input · aria-hidden
  3. 3Titledata-slot="drawer-title"text-base · font-medium
  4. 4Descriptiondata-slot="drawer-description"text-sm · text-muted-foreground
  5. 5Footerdata-slot="drawer-footer"full-width buttons · main on top

Clinia rules

  • It slides up from the bottom by default and closes with a swipe down (swipeDirection). If you don't need the gesture, use Dialog or Sheet.
  • showSwipeHandle adds the swipe handle in the input token.
  • The footer stacks full-width buttons: the main action on top, Cancel below.
  • Header text centres on a bottom drawer and aligns left from md up.

Do and don't

Share this record

Anyone in the workspace with the link can open it.

Do put Cancel under the main action: not everyone can swipe.

Share this record

Anyone in the workspace with the link can open it.

Don't leave the swipe as the only way to close it.

Accessibility

Built in

  • Built on Base UI Drawer, which extends Dialog: focus moves into the drawer and stays inside, Escape closes it, and focus returns to the trigger.
  • The swipe handle uses the input token so it stays visible. It is aria-hidden: a pointer affordance only.

Your responsibility

  • Always render a DrawerTitle. Add DrawerDescription when the title alone doesn't explain the task.
  • Put a DrawerClose button labelled Cancel in the footer: not everyone can swipe, and a touch screen has no Escape key.

How to test

  1. Open it with the keyboard: focus lands inside the drawer.
  2. Press Escape: it closes, and focus returns to the button that opened it.
  3. On a phone, swipe down: it closes. Cancel does the same.
  4. With a screen reader, opening it announces a dialog and its title.

API

PropValuesDefaultDescription
showSwipeHandle
boolean
false

Shows the drag handle at the top. Keep a Cancel button too: not every user can swipe.

All other props come from Base UI Drawer.

Related