V
Velora UI Docs

Drawer

A drawer component for React, built on top of Vaul. Perfect for mobile-friendly interfaces and contextual actions.

Mobile First
Accessible
Customizable

Basic Usage

A simple drawer that slides up from the bottom of the screen.

Example

Click the button to open a basic drawer

Form in Drawer

Drawers are perfect for forms, especially on mobile devices.

Contact Form Example

A form inside a drawer for better mobile UX

Menu Drawer

Use drawers to create mobile-friendly navigation menus.

Navigation Menu

A drawer used as a mobile navigation menu

Filter Drawer

Perfect for complex filtering interfaces on mobile devices.

Search Filters

A drawer containing search and filter options

Installation

Install Dependencies

npm install vaul

Import Components

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

API Reference

Drawer

The root component that manages the drawer state.

Prop
Type
Default
shouldScaleBackground
boolean
true
open
boolean
-
onOpenChange
(open: boolean) => void
-

DrawerContent

The main content area of the drawer.

Prop
Type
Default
className
string
-
children
React.ReactNode
-

Drawer Examples

Explore different drawer patterns and use cases for your applications.

Settings Panel

A comprehensive settings drawer with various controls

User Profile

User profile with avatar and information

Product Details

E-commerce product details with actions

Quick Actions

Mobile-style quick actions panel

Comments

Comments section with scrollable content

Full Screen

Full screen drawer for immersive experiences