Drawer

New

Slide-in panels from any edge of the screen for navigation and actions

Position Variants

Click any button to open a drawer from different sides

Size Variants

Different drawer sizes for different use cases

Installation

Install the required dependencies

npm install @radix-ui/react-dialog

Usage

Basic implementation example

import { Drawer } from '@/components/ui/drawer'
import { Button } from '@/components/ui/button'
import { Check, Menu } from 'lucide-react'

export default function Example() {
  return (
    <Drawer
      position="left"
      title="Navigation"
      description="Browse your workspace"
      trigger={
        <Button variant="outline">
          <Menu className="w-4 h-4" />
          Open Menu
        </Button>
      }
    >
      <div className="space-y-4">
        <p>Drawer content goes here</p>
      </div>
    </Drawer>
  )
}

Props

Drawer component props

Prop	Type	Default	Description
position	'left' \| 'right' \| 'top' \| 'bottom'	'right'	Position of the drawer
size	'sm' \| 'md' \| 'lg' \| 'full'	'md'	Drawer width/height
trigger	ReactNode	-	Trigger element (usually a button)
title	string	-	Drawer title
description	string	-	Drawer description
showClose	boolean	true	Show close button
children	ReactNode	-	Drawer content

Features

Built-in functionality

Four positions - Left, right, top, and bottom
Responsive sizes - Small, medium, large, and full width/height
Smooth animations - Slide in/out with backdrop fade
Accessible - Focus trap, ESC to close, backdrop click
Dark mode - Full dark mode support
Scrollable content - Overflow handling for long content