Drawer

Overview

Built on Radix UI's Dialog primitive. Slides in from the right, left, top, or bottom with an animated overlay. Includes header, footer, title, and description sub-components.

Usage

import { Drawer } from "@leanicon/web-builder-library";

<Drawer>
  <Drawer.Trigger asChild>
    <button>Open</button>
  </Drawer.Trigger>
  <Drawer.Content side="right">
    <Drawer.Header>
      <Drawer.Title>Title</Drawer.Title>
      <Drawer.Description>Description</Drawer.Description>
    </Drawer.Header>
    <p>Body content</p>
    <Drawer.Footer>
      <button>Save</button>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer>;

Variants

Right (default)

Left

Top

Bottom

Without close button

Notes

• side accepts "right" (default), "left", "top", or "bottom".
• Side "right" and "left" are 75% wide, capped at sm:max-w-sm.
• showCloseButton={false} hides the X button — the overlay click still dismisses.
• The overlay uses bg-overlay/50 — ensure --color-overlay is defined in your theme.
• Dark mode is handled via semantic tokens.