React Drawer Component

Installation

pnpm add krz-ui

Usage

import { Drawer } from "krz-ui";

<Drawer
  open={open}
  onClose={() => setOpen(false)}
  side="right"
  title="Filters"
  footer={<Button onClick={apply}>Apply</Button>}
>
  ...
</Drawer>

API Reference

Prop	Type	Description
`open / onClose`	`boolean / () => void`	Visibility and close handler.
`side`	`"left" \| "right" \| "top" \| "bottom"`	Edge the panel slides from. Defaults to right.
`size`	`number \| string`	Width (left/right) or height (top/bottom).
`title / description / footer`	`ReactNode`	Header text and bottom actions.
`closeOnOverlayClick / closeOnEsc`	`boolean`	Both default to true.
`className / style / ref`	`—`	All go to the dialog panel. Style the backdrop with classNames.overlay. See Customization.
`classNames`	`{ root?, overlay?, header?, title?, description?, close?, body?, footer? }`	Extra classes for inner parts.