Component reference
Drawer
A side panel for editing details without leaving context.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import {
Drawer,
DrawerTrigger,
Button,
DrawerContent,
DrawerHeader,
DrawerTitle,
DrawerDescription,
Label,
Input,
DrawerFooter,
DrawerClose
} from "@pimolu/react";
function RightDrawer() {
return (
<Drawer>
<DrawerTrigger>
<Button appearance="outline">Open project settings</Button>
</DrawerTrigger>
<DrawerContent side="right" size="md">
<DrawerHeader>
<DrawerTitle>Project settings</DrawerTitle>
<DrawerDescription>
The panel is modal: focus stays inside, the page stops scrolling
and Escape returns focus to the trigger.
</DrawerDescription>
</DrawerHeader>
<div className="grid gap-5 min-w-0">
<div className="grid gap-5 min-w-0">
<Label htmlFor="drawer-name">Name</Label>
<Input id="drawer-name" defaultValue="Project Atlas" />
</div>
<div className="grid gap-5 min-w-0">
<Label htmlFor="drawer-slug">Slug</Label>
<Input id="drawer-slug" defaultValue="project-atlas" />
</div>
</div>
<DrawerFooter>
<DrawerClose>
<Button appearance="ghost">Cancel</Button>
</DrawerClose>
<DrawerClose>
<Button>Save changes</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
);
}
export function DemoExample() {
return (<RightDrawer />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Left navigation drawer
A compact drawer from the left, with real links and an explicit close action.
Bottom sheet
A short height for a task that benefits from the full width.
Controlled
Side left, size sm, with the open state owned by the page.
Usage
Keep essential fields and actions reachable when the viewport is short or narrow.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluDrawerProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Trigger, content, header, footer and close controls. |
open | boolean | undefined | — | Controlled open state. Omit to let the component own it. |
defaultOpen | boolean | undefined | false | Initial open state when uncontrolled. Defaults to false. |
onOpenChange | ((open: boolean) => void) | undefined | — | Called whenever the component asks to open or close. |
childrenRequiredReactNodeNo default extracted.
Trigger, content, header, footer and close controls.
openboolean | undefinedNo default extracted.
Controlled open state. Omit to let the component own it.
defaultOpenboolean | undefinedDefault: false
Initial open state when uncontrolled. Defaults to false.
onOpenChange((open: boolean) => void) | undefinedNo default extracted.
Called whenever the component asks to open or close.
PimoluDrawerTriggerProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactElement<unknown, string | JSXElementConstructor<any>> | — | The element that opens the drawer: any element, or a component that passes down the props it receives. It gets the ARIA state, the click handler and the ref, and the handlers it already had keep working. |
childrenRequiredReactElement<unknown, string | JSXElementConstructor<any>>No default extracted.
The element that opens the drawer: any element, or a component that passes down the props it receives. It gets the ARIA state, the click handler and the ref, and the handlers it already had keep working.
PimoluDrawerContentProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Header, body and footer of the drawer. |
side | PimoluDrawerSide | undefined | "right" | Edge of the viewport the panel slides from. Defaults to "right". |
size | PimoluDrawerSize | undefined | "md": a width for left and right drawers, a height for top and bottom drawers | Panel size along the side axis. Defaults to "md": a width for left and right drawers, a height for top and bottom drawers. |
closeOnOverlayClick | boolean | undefined | true | Close when the overlay is pressed. Defaults to true. |
closeOnEscape | boolean | undefined | true | Close on Escape. Defaults to true. |
showCloseButton | boolean | undefined | true | Render the close button in the panel corner. Defaults to true. |
closeLabel | string | undefined | "Close" | Accessible name of the corner close button. Defaults to "Close". |
aria-label | string | undefined | — | Accessible name of the panel. Use it only when there is no `DrawerTitle`; a title automatically names the panel. |
aria-labelledby | string | undefined | — | Overrides the id registered by `DrawerTitle`. |
aria-describedby | string | undefined | — | Overrides the id registered by `DrawerDescription`. |
className | string | undefined | — | Class applied to the panel. |
childrenReactNodeNo default extracted.
Header, body and footer of the drawer.
sidePimoluDrawerSide | undefinedDefault: "right"
Edge of the viewport the panel slides from. Defaults to "right".
sizePimoluDrawerSize | undefinedDefault: "md": a width for left and right drawers, a height for top and bottom drawers
Panel size along the side axis. Defaults to "md": a width for left and right drawers, a height for top and bottom drawers.
closeOnOverlayClickboolean | undefinedDefault: true
Close when the overlay is pressed. Defaults to true.
closeOnEscapeboolean | undefinedDefault: true
Close on Escape. Defaults to true.
showCloseButtonboolean | undefinedDefault: true
Render the close button in the panel corner. Defaults to true.
closeLabelstring | undefinedDefault: "Close"
Accessible name of the corner close button. Defaults to "Close".
aria-labelstring | undefinedNo default extracted.
Accessible name of the panel. Use it only when there is no `DrawerTitle`; a title automatically names the panel.
aria-labelledbystring | undefinedNo default extracted.
Overrides the id registered by `DrawerTitle`.
aria-describedbystring | undefinedNo default extracted.
Overrides the id registered by `DrawerDescription`.
classNamestring | undefinedNo default extracted.
Class applied to the panel.
PimoluDrawerHeaderProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluDrawerTitleProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
id | string | undefined | — | Explicit id, instead of the generated one. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
idstring | undefinedNo default extracted.
Explicit id, instead of the generated one.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluDrawerDescriptionProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
id | string | undefined | — | Explicit id, instead of the generated one. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
idstring | undefinedNo default extracted.
Explicit id, instead of the generated one.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluDrawerFooterProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluDrawerCloseProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactElement<unknown, string | JSXElementConstructor<any>> | — | The element that closes the drawer: any element, or a component that passes down the props it receives. Its own click handler still runs. |
childrenRequiredReactElement<unknown, string | JSXElementConstructor<any>>No default extracted.
The element that closes the drawer: any element, or a component that passes down the props it receives. Its own click handler still runs.
Accessibility
- Provide a title, a close path and verify focus containment and restoration.