Stalk UI

Component

Drawer

A touch-first gesture sheet (Vaul) with drag-to-dismiss physics, openable from any edge via `direction`. Use over Sheet when the surface should answer to swipe gestures — typically mobile.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/drawer

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Drawer.Root>
  <Drawer.Trigger asChild>
    <Button variant="outline">Open filters</Button>
  </Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title>Filters</Drawer.Title>
      <Drawer.Description>Narrow the results.</Drawer.Description>
    </Drawer.Header>
    <Drawer.Footer>
      <Drawer.Close asChild>
        <Button>Apply</Button>
      </Drawer.Close>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`showHandle``boolean`No-Hide the drag handle (kept by default: it signals drag-to-dismiss).

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

No recipe variants are documented for this component.

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/drawer.json`
  • Recipe: `drawer`
  • Files: `src/components/ui/drawer.tsx`