Components

Drawer

Side panel: it glides in from its edge over a blurred overlay and can be dragged back out — release past 30% of its size (or with a flick) and it dismisses.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add drawer

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Drawer } from "@lumora/ui/components/drawer";
// or from the barrel:
import { Drawer } from "@lumora/ui";

Props worth knowing

Controlled: pass open and onOpenChange. side: "left" | "right" | "bottom" picks the edge (default right); title heads the panel and labels it for assistive tech. Drag the panel past 30% of its size (or flick) to dismiss; Escape and overlay clicks close it, with focus trapped inside and restored on close. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.