Enterprise UI Kit

Drawer

Opens from left, right, top, or bottom via the side prop.

How to use

Drawer side types: left, right, top, bottom. Copy the examples below.

1. Import

tsx

import { Drawer, Button } from "@/app/components/ui";
import type { DrawerSide } from "@/app/components/ui";

2. Basic usage

tsx

<Drawer
  open={open}
  onClose={() => setOpen(false)}
  title="Drawer title"
  side="right"
>
  <p>Drawer content.</p>
</Drawer>

3. All side types

Drawer side variantstsx

// Right (default)
<Drawer open={open} onClose={() => setOpen(false)} title="Drawer" side="right">
  <p>Content.</p>
</Drawer>

// Left
<Drawer open={open} onClose={() => setOpen(false)} title="Drawer" side="left">
  <p>Content.</p>
</Drawer>

// Top
<Drawer open={open} onClose={() => setOpen(false)} title="Drawer" side="top">
  <p>Content.</p>
</Drawer>

// Bottom
<Drawer open={open} onClose={() => setOpen(false)} title="Drawer" side="bottom">
  <p>Content.</p>
</Drawer>