Drawer
A slide-in panel that provides additional navigation or content without disrupting the main interface, ideal for side menus and overlays.
Basic
A slide-in overlay for additional content or actions, anchored to the screen edge for quick access. Originally built by Devon Govett — check out his tweet for more insights. Want to enhance it, like making the drawer height adapt to its content? Contributions are welcome — send a PR!
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Composed Components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
The Drawer comes packed with several components to enhance functionality and provide a seamless experience.
Manual Installation
Make sure you also install the composed components and the required packages for the component to function properly.
Anatomy
Side
Use the side prop to change where the drawer appears. The default is left, but you can also use right, top, or bottom.
Float
To make the drawer float with spacing around it, set the isFloat prop to true. The default value is false.
Controlled
Manage the drawer’s open and close state programmatically.
Without Notch
Remove the default notch styling by setting the notch prop to false.
Sticky
The drawer handles long content gracefully. Try scrolling within it.
Nested
Drawers can be nested inside each other for advanced layouts.