Drawer
Slide-out panel overlay from screen edge.
Examples
From right
Drawer panel that slides in from the right edge.
From left
Drawer panel that slides in from the left edge.
With form content
Drawer containing labelled form inputs with sticky footer actions.
With navigation list
Drawer used as a mobile navigation sidebar with active state tracking.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Drawer } from "@rokle/components";import { Drawer } from "@rokle/components";
export function Example() {
return <Drawer />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | Whether the drawer is visible. |
| onClose | () => void | - | Called when drawer should close. |
| side | "left" | "right" | "right" | Which edge to slide from. |