Drawer

Maximize screen real estate and improve navigation with rothko ui's Drawer component. Create hidden side panels or overlays that slide in and out, perfect for menus, filters, or additional content, providing a seamless user experience.

View Source

Import

import { Drawer } from '@rothko-ui/react';

Usage

Variant

Props

NameTypeDefaultDescription
Name
className
Type
string
Default
 
Description
CSS class name(s).
Name
onClose
Type
() => void
Default
 
Description
Callback function called when the drawer is closed.
Name
open
Type
boolean
Default
false
Description
Determines whether the drawer is open or closed.
Name
style
Type
CSSProperties
Default
 
Description
The inline style for the drawer.
Name
variant
Type
'shaded' | 'none' | 'blur'
Default
'shaded'
Description
Variant of the backdrop.