Interaction

Drawer

A side sheet for mobile menus, settings panels and command surfaces.

Component

35

Import

import { Drawer, DrawerContent, DrawerTrigger } from "@swirski/ui";

Composition

Drawer
|-- DrawerTrigger
`-- DrawerContent
    |-- DrawerHeader
    |   |-- DrawerTitle
    |   `-- DrawerDescription
    `-- DrawerClose

Playground

3 controls

Controls

title

side

defaultOpen

Usage

<Drawer>
  <DrawerTrigger>Open drawer</DrawerTrigger>
  <DrawerContent side="right">
    <DrawerHeader>
      <DrawerTitle>Settings</DrawerTitle>
      <DrawerDescription>Panel content lives here.</DrawerDescription>
    </DrawerHeader>
    <DrawerClose>Close</DrawerClose>
  </DrawerContent>
</Drawer>

Props

31 generated

Prop	Type	Default	Notes
`DrawerClose.asChild`	`boolean`	`false`	Generated from DrawerCloseProps.
`DrawerClose.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DrawerCloseProps.
`DrawerClose.tone`	`'default'`	`"default"`	Generated from DrawerCloseProps.
`DrawerClose.variant`	`'default' \| 'compact'`	`"default"`	Generated from DrawerCloseProps.
`DrawerContent.side`	`'left' \| 'right' \| 'top' \| 'bottom'`	`"right"`	Where the drawer enters from.
`DrawerContent.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DrawerContentProps.
`DrawerContent.tone`	`'default'`	`"default"`	Generated from DrawerContentProps.
`DrawerContent.variant`	`'default' \| 'compact'`	`"default"`	Generated from DrawerContentProps.
`Drawer.children`Required	`ReactNode`	`-`	Generated from DrawerProps.
`Drawer.defaultOpen`	`boolean`	`false`	Initial uncontrolled open state.
`Drawer.onOpenChange`	`((open: boolean) => void)`	`-`	Called when the drawer opens or closes.
`Drawer.open`	`boolean`	`-`	Controlled open state.
`Drawer.size`	`'sm' \| 'md' \| 'lg'`	`-`	Generated from DrawerProps.
`Drawer.tone`	`'default'`	`-`	Generated from DrawerProps.
`Drawer.variant`	`'default' \| 'compact'`	`-`	Generated from DrawerProps.
`DrawerHeader.asChild`	`boolean`	`false`	Generated from DrawerHeaderProps.
`DrawerHeader.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DrawerHeaderProps.
`DrawerHeader.tone`	`'default'`	`"default"`	Generated from DrawerHeaderProps.
`DrawerHeader.variant`	`'default' \| 'compact'`	`"default"`	Generated from DrawerHeaderProps.
`DrawerTitle.asChild`	`boolean`	`false`	Generated from DrawerTitleProps.
`DrawerTitle.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DrawerTitleProps.
`DrawerTitle.tone`	`'default'`	`"default"`	Generated from DrawerTitleProps.
`DrawerTitle.variant`	`'default' \| 'compact'`	`"default"`	Generated from DrawerTitleProps.
`DrawerDescription.asChild`	`boolean`	`false`	Generated from DrawerDescriptionProps.
`DrawerDescription.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DrawerDescriptionProps.
`DrawerDescription.tone`	`'default'`	`"default"`	Generated from DrawerDescriptionProps.
`DrawerDescription.variant`	`'default' \| 'compact'`	`"default"`	Generated from DrawerDescriptionProps.
`DrawerTrigger.asChild`	`boolean`	`false`	Generated from DrawerTriggerProps.
`DrawerTrigger.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DrawerTriggerProps.
`DrawerTrigger.tone`	`'default'`	`"default"`	Generated from DrawerTriggerProps.
`DrawerTrigger.variant`	`'default' \| 'compact'`	`"default"`	Generated from DrawerTriggerProps.

Previous: Separator Next: DotGrid