Drawer

Import

import { Drawer } from 'tuimorphic';

Basic Usage

<Drawer
  trigger={<Button>Open Menu</Button>}
  title="NAVIGATION"
  side="left"
>
  <nav>Navigation links here</nav>
</Drawer>

Props

Prop	Type	Default	Description
open	`boolean`	-	Whether the drawer is open (controlled)
defaultOpen	`boolean`	-	Default open state (uncontrolled)
onOpenChange	`(open: boolean) => void`	-	Callback when open state changes
side	`'left' \| 'right' \| 'top' \| 'bottom'`	`'left'`	Side the drawer slides in from
title	`React.ReactNode`	-	Drawer title displayed in the header
description	`React.ReactNode`	-	Drawer description (optional subtitle)
children	`React.ReactNode`	-	Drawer content
trigger	`React.ReactElement`	-	Trigger element for uncontrolled usage
className	`string`	-	Additional CSS class names for the drawer panel

Variants

Right Side

<Drawer trigger={<Button>Right</Button>} side="right" title="RIGHT">
  <p>Content slides from right</p>
</Drawer>

Bottom Side

<Drawer trigger={<Button>Bottom</Button>} side="bottom" title="BOTTOM">
  <p>Content slides from bottom</p>
</Drawer>

With Content

<Drawer
  trigger={<Button>Open</Button>}
  title="ACCOUNT"
  description="Manage your account settings"
  side="right"
>
  <p>Account content</p>
</Drawer>

Side Variants

<Drawer trigger={<Button>Left</Button>} side="left" title="LEFT">
  <p>Content slides from left</p>
</Drawer>
 
<Drawer trigger={<Button>Right</Button>} side="right" title="RIGHT">
  <p>Content slides from right</p>
</Drawer>
 
<Drawer trigger={<Button>Top</Button>} side="top" title="TOP">
  <p>Content slides from top</p>
</Drawer>
 
<Drawer trigger={<Button>Bottom</Button>} side="bottom" title="BOTTOM">
  <p>Content slides from bottom</p>
</Drawer>

Controlled

const [isOpen, setIsOpen] = useState(false);
 
<Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
 
<Drawer
  open={isOpen}
  onOpenChange={setIsOpen}
  title="SETTINGS"
  side="right"
>
  <p>Settings content here</p>
</Drawer>

Compound Components

For advanced usage:

import {
  DrawerRoot,
  DrawerTrigger,
  DrawerPortal,
  DrawerBackdrop,
  DrawerPanel,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerClose,
  DrawerContent,
} from 'tuimorphic';

On this page