Drawer

A slide-in panel that overlays content from any screen edge. Includes a title, optional description, and smooth enter/exit transitions.

Installation

npm install @bloomkit/react

Usage

import { Drawer, Button } from "@bloomkit/react";
 
const [open, setOpen] = useState(false);
 
<Button onClick={() => setOpen(true)}>Open</Button>
<Drawer open={open} onOpenChange={setOpen} title="Panel Title">
  <p>Content inside the drawer.</p>
</Drawer>

Sides

<Drawer open={open} onOpenChange={setOpen} side="left" title="Left Drawer">
  <p>Slides in from the left.</p>
</Drawer>
 
<Drawer open={open} onOpenChange={setOpen} side="bottom" title="Bottom Sheet">
  <p>Slides up from the bottom.</p>
</Drawer>

With description

<Drawer
  open={open}
  onOpenChange={setOpen}
  title="Settings"
  description="Manage your account preferences."
>
  <p>Drawer content here.</p>
</Drawer>

Props

Prop	Type	Default	Description
open	boolean	—	Controls drawer visibility
onOpenChange	(open: boolean) => void	—	Called when open state changes
title	string	—	Drawer heading
description	string	—	Optional subheading below the title
children	ReactNode	—	Drawer body content
side	"right" \| "left" \| "top" \| "bottom"	"right"	Edge the drawer slides in from
className	string	""	Additional Tailwind classes

PreviousDate PickerComponents

NextDropdownComponents