Skip to content
DOL Studio

Drawer

Design: Stable Code: Coded overlayside-panel 1 Figma set 3 standalone Filter drawer right/layout

Live preview

Inline preview (drawer open by default, scoped to container)
Simulate (interactive — full-screen slide-in)

Import & files

Import
import { Drawer } from "@dol/ui/drawer";
Source file
packages/@dol/ui/src/drawer/Drawer.tsx

Figma source

Figma source 1 set
Page
Drawer
Sets
1 + 3 standalone
Primary set
Filter drawer right/layout · 3 variants Open in Figma →
Showing: Filter drawer right/layout

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Drawer
Slug: `drawer`
Domain: general · Category: overlay
Design: stable · Code: coded


## Description
Side-mounted panel for filters, secondary navigation, and contextual actions. Right-side mount most common.


## Import
```ts
import { Drawer } from "@dol/ui/drawer";
```
Source: `packages/@dol/ui/src/drawer/Drawer.tsx`


## Figma source
Page: Drawer
Sets: 1
Primary: Filter drawer right/layout
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=15794-235536

Related

  • M
    overlay

    Modal

    Coded
  • T
    overlay

    Tooltip & Dialog box

    Coded
  • Tooltip body

    Popover

    Coded
  • M
    overlay

    KidModal

    KIDCoded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).