Drawer

Buttons 95

About

A flexible and beautifully styled Drawer component built using Vaul (Radix-based) primitives. It supports all drawer directions (top, bottom, left, right) with smooth animations, backdrop blur, and slots like header, body, and footer—making it ideal for responsive menus, sidebars, or modal-like panels in modern React apps.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Drawer to your project and fits it to your theme.

Code

How Drawer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import * as React from 'react';
import { Button } from '@/components/ui/button';
import {
	Drawer,
	DrawerBody,
	DrawerClose,
	DrawerContent,
	DrawerDescription,
	DrawerFooter,
	DrawerHeader,
	DrawerTitle,
	DrawerTrigger,
} from '@/components/ui/drawer';
import { 
	Minus, 
	Plus, 
} from 'lucide-react';

export default function Default() {
	const [goal, setGoal] = React.useState(350);

	function onClick(adjustment: number) {
		setGoal(Math.max(200, Math.min(400, goal + adjustment)));
	}

	return (
		<Drawer>
			<DrawerTrigger asChild>
				<Button variant="outline">Open Drawer</Button>
			</DrawerTrigger>
			<DrawerContent>
				<DrawerHeader>
					<DrawerTitle>Move Goal</DrawerTitle>
					<DrawerDescription>Set your daily activity goal.</DrawerDescription>
				</DrawerHeader>
				<DrawerBody>
					<div className="flex items-center justify-center space-x-2">
						<Button
							variant="outline"
							size="icon"
							className="h-12 w-12 shrink-0 rounded-full"
							onClick={() => onClick(-10)}
							disabled={goal <= 200}
						>
							<Minus />
							<span className="sr-only">Decrease</span>
						</Button>
						<div className="flex-1 text-center">
							<div className="text-7xl font-bold tracking-tighter">{goal}</div>
							<div className="text-muted-foreground text-[0.70rem] uppercase">
								Calories/day
							</div>
						</div>
						<Button
							variant="outline"
							size="icon"
							className="h-12 w-12 shrink-0 rounded-full"
							onClick={() => onClick(10)}
							disabled={goal >= 400}
						>
							<Plus />
							<span className="sr-only">Increase</span>
						</Button>
					</div>
				</DrawerBody>
				<DrawerFooter className="grid-cols-2">
					<DrawerClose asChild>
						<Button className="w-full" variant="outline">
							Cancel
						</Button>
					</DrawerClose>
					<Button className="w-full">Submit</Button>
				</DrawerFooter>
			</DrawerContent>
		</Drawer>
	);
}