Komponents
Components

Components

Drawer

Side panel overlay for filters and dense tools.

newfree
pnpm add @komponents/uiCanonical TypeScript source · tree-shakeable subpaths

Drawer docks to the left or right edge. Escape, overlay click, and the header close button all dismiss it.

Usage

Snippet
import { Button, Drawer, DrawerTrigger } from "@komponents/ui";

<DrawerTrigger>
  <Button>Filters</Button>
  <Drawer title="Filters" side="right">Content</Drawer>
</DrawerTrigger>

Accessibility

  • Dialog semantics with titled heading
  • Close button with accessible name
  • Escape and outside click dismiss when enabled

Dialog

Modal surface for confirmations and focused tasks.

Popover

Anchored content panel for short explanations without a modal layer.

On this page

UsageAccessibility