Drawer Component

A bottom sheet component for mobile and tablet interfaces, built on top of the Vaul library.

Mobile-friendly bottom sheet that can be swiped to dismiss
Customizable with different sizes and heights
Includes nested components for header, footer, and content structuring
Smooth animation effects with background scaling

Installation

The Drawer component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the drawer in your project.

React TSX
1import {
2  Drawer,
3  DrawerContent,
4  DrawerDescription,
5  DrawerHeader,
6  DrawerTitle,
7  DrawerTrigger,
8} from "@/components/modern-ui/drawer"

React TSX
1<Drawer>
2  <DrawerTrigger>Open Drawer</DrawerTrigger>
3  <DrawerContent>
4    <DrawerHeader>
5      <DrawerTitle>Drawer Title</DrawerTitle>
6      <DrawerDescription>
7        This is a description for the drawer.
8      </DrawerDescription>
9    </DrawerHeader>
10    <div className="p-4">Drawer content goes here</div>
11  </DrawerContent>
12</Drawer>

Examples

Basic Drawer

Different Sizes

Nested Drawers

API Reference

Drawer

The main container component for the drawer.

Prop	Type	Default	Description
`shouldScaleBackground`	`boolean`	`true`	Whether the background should scale when the drawer opens
`open`	`boolean`	-	Controlled open state of the drawer
`onOpenChange`	`(open: boolean) => void`	-	Callback fired when the open state changes
`modal`	`boolean`	`true`	Whether the drawer should block interactions with the rest of the page when open
`direction`	`"bottom"`	`"bottom"`	The direction the drawer opens from (only bottom is supported in this implementation)
`snapPoints`	`number[]`	-	Points where the drawer can snap to when dragging
`activeSnapPoint`	`number`	-	The active snap point
`setActiveSnapPoint`	`(snapPoint: number) => void`	-	Callback fired when the active snap point changes
`children`	`React.ReactNode`	-	The drawer trigger and content

DrawerTrigger

The button that triggers the drawer.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child
`children`	`React.ReactNode`	-	The element that will trigger the drawer

DrawerContent

The content of the drawer.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply
`children`	`React.ReactNode`	-	The content of the drawer

DrawerHeader

A container for the drawer header content.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply
`children`	`React.ReactNode`	-	The header content

DrawerFooter

A container for the drawer footer content.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply
`children`	`React.ReactNode`	-	The footer content

DrawerTitle

The title of the drawer.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply
`children`	`React.ReactNode`	-	The title content

DrawerDescription

The description of the drawer.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply
`children`	`React.ReactNode`	-	The description content

DrawerClose

The button that closes the drawer.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child
`children`	`React.ReactNode`	-	The element that will close the drawer