Drawer

A drawer is a panel that slides in from the side of the screen. It is used for navigation, dialogs, and other small containers of content.

View on GitHub

'use client'

import {
	Button,
	Drawer,
	DrawerTrigger,
	DrawerContent,
	DrawerHeader,
	DrawerTitle,
	DrawerDescription,
	DrawerFooter,
	DrawerClose,
} from '@nerdfish/ui'

export function DrawerExample() {
	return (
		<Drawer direction="bottom">
			<DrawerTrigger asChild>
				<Button variant="outline">Open</Button>
			</DrawerTrigger>
			<DrawerContent className="w-full">
				<DrawerHeader>
					<DrawerTitle>Are you sure absolutely sure?</DrawerTitle>
					<DrawerDescription>This action cannot be undone.</DrawerDescription>
				</DrawerHeader>
				<DrawerFooter>
					<Button>Submit</Button>
					<DrawerClose>
						<Button variant="outline">Cancel</Button>
					</DrawerClose>
				</DrawerFooter>
			</DrawerContent>
		</Drawer>
	)
}

Usage

import {
	Drawer,
	Button,
	DrawerTrigger,
	DrawerContent,
	DrawerHeader,
	DrawerTitle,
	DrawerDescription,
	DrawerFooter,
} from '@nerdfish/ui'

<Drawer>
	<DrawerTrigger>Open</DrawerTrigger>
	<DrawerContent>
		<DrawerHeader>
			<DrawerTitle>Are you sure absolutely sure?</DrawerTitle>
			<DrawerDescription>This action cannot be undone.</DrawerDescription>
		</DrawerHeader>
		<DrawerFooter>
			<Button>Submit</Button>
			<DrawerClose>
				<Button variant="outline">Cancel</Button>
			</DrawerClose>
		</DrawerFooter>
	</DrawerContent>
</Drawer>

Direction

'use client'

import {
	Button,
	Drawer,
	DrawerContent,
	DrawerHeader,
	DrawerTitle,
	DrawerTrigger,
	DrawerFooter,
	DrawerClose,
	DrawerDescription,
} from '@nerdfish/ui'

export function DrawerDirectionExample() {
	return (
		<div className="flex flex-col space-y-4">
			<Drawer direction="left">
				<DrawerTrigger asChild>
					<Button variant="outline">Left</Button>
				</DrawerTrigger>
				<DrawerContent className="!w-full max-w-[500px]">
					<DrawerHeader>
						<DrawerTitle>Are you sure absolutely sure?</DrawerTitle>
						<DrawerDescription>This action cannot be undone.</DrawerDescription>
					</DrawerHeader>
					<DrawerFooter>
						<Button>Submit</Button>
						<DrawerClose>
							<Button variant="outline">Cancel</Button>
						</DrawerClose>
					</DrawerFooter>
				</DrawerContent>
			</Drawer>
			<Drawer direction="right">
				<DrawerTrigger asChild>
					<Button variant="outline">Right</Button>
				</DrawerTrigger>
				<DrawerContent className="!w-full max-w-[500px]">
					<DrawerHeader>
						<DrawerTitle>Are you sure absolutely sure?</DrawerTitle>
						<DrawerDescription>This action cannot be undone.</DrawerDescription>
					</DrawerHeader>
					<DrawerFooter>
						<Button>Submit</Button>
						<DrawerClose>
							<Button variant="outline">Cancel</Button>
						</DrawerClose>
					</DrawerFooter>
				</DrawerContent>
			</Drawer>
			<Drawer direction="bottom">
				<DrawerTrigger asChild>
					<Button variant="outline">Bottom</Button>
				</DrawerTrigger>
				<DrawerContent className="w-full">
					<DrawerHeader>
						<DrawerTitle>Are you sure absolutely sure?</DrawerTitle>
						<DrawerDescription>This action cannot be undone.</DrawerDescription>
					</DrawerHeader>
					<DrawerFooter>
						<Button>Submit</Button>
						<DrawerClose>
							<Button variant="outline">Cancel</Button>
						</DrawerClose>
					</DrawerFooter>
				</DrawerContent>
			</Drawer>
			<Drawer direction="top">
				<DrawerTrigger asChild>
					<Button variant="outline">Top</Button>
				</DrawerTrigger>
				<DrawerContent className="w-full">
					<DrawerHeader>
						<DrawerTitle>Are you sure absolutely sure?</DrawerTitle>
						<DrawerDescription>This action cannot be undone.</DrawerDescription>
					</DrawerHeader>
					<DrawerFooter>
						<Button>Submit</Button>
						<DrawerClose>
							<Button variant="outline">Cancel</Button>
						</DrawerClose>
					</DrawerFooter>
				</DrawerContent>
			</Drawer>
		</div>
	)
}

Scrollable

'use client'

import {
	Button,
	Drawer,
	DrawerContent,
	DrawerHeader,
	DrawerTitle,
	DrawerTrigger,
	DrawerFooter,
	DrawerClose,
	DrawerDescription,
} from '@nerdfish/ui'

export function DrawerScrollableExample() {
	return (
		<div className="flex flex-col space-y-4">
			<Drawer>
				<DrawerTrigger asChild>
					<Button variant="outline">Open</Button>
				</DrawerTrigger>
				<DrawerContent className="w-full">
					<DrawerHeader>
						<DrawerTitle>Lots of content</DrawerTitle>
						<DrawerDescription>
							Scroll down to see more content.
						</DrawerDescription>
					</DrawerHeader>
					<div className="px-md space-y-md">
						<p>
							Cats are fascinating creatures that have been domesticated for
							thousands of years. These graceful felines have evolved from wild
							hunters to beloved household companions, while maintaining their
							independent nature and hunting instincts. Their ability to form
							strong bonds with humans while retaining their distinctive
							personalities makes them uniquely captivating pets.
						</p>
						<p>
							The remarkable agility and physical capabilities of cats never
							cease to amaze. Their flexible spine, powerful muscles, and
							incredible balance allow them to perform astounding acrobatic
							feats. From their ability to always land on their feet to their
							capacity to squeeze through tiny spaces, cats possess an array of
							impressive physical attributes that have fascinated humans
							throughout history.
						</p>
						<p>
							Perhaps most endearing is the way cats communicate and express
							themselves. From their gentle purrs of contentment to their
							expressive tail movements, cats have developed sophisticated ways
							to interact with their human companions. Their mysterious
							behaviors, such as kneading with their paws or bringing
							&quot;gifts&quot; to their owners, continue to intrigue and
							delight cat lovers around the world.
						</p>
						<p>
							Cats are fascinating creatures that have been domesticated for
							thousands of years. These graceful felines have evolved from wild
							hunters to beloved household companions, while maintaining their
							independent nature and hunting instincts. Their ability to form
							strong bonds with humans while retaining their distinctive
							personalities makes them uniquely captivating pets.
						</p>
						<p>
							The remarkable agility and physical capabilities of cats never
							cease to amaze. Their flexible spine, powerful muscles, and
							incredible balance allow them to perform astounding acrobatic
							feats. From their ability to always land on their feet to their
							capacity to squeeze through tiny spaces, cats possess an array of
							impressive physical attributes that have fascinated humans
							throughout history.
						</p>
						<p>
							Perhaps most endearing is the way cats communicate and express
							themselves. From their gentle purrs of contentment to their
							expressive tail movements, cats have developed sophisticated ways
							to interact with their human companions. Their mysterious
							behaviors, such as kneading with their paws or bringing
							&quot;gifts&quot; to their owners, continue to intrigue and
							delight cat lovers around the world.
						</p>
						<p>
							Cats are fascinating creatures that have been domesticated for
							thousands of years. These graceful felines have evolved from wild
							hunters to beloved household companions, while maintaining their
							independent nature and hunting instincts. Their ability to form
							strong bonds with humans while retaining their distinctive
							personalities makes them uniquely captivating pets.
						</p>
						<p>
							The remarkable agility and physical capabilities of cats never
							cease to amaze. Their flexible spine, powerful muscles, and
							incredible balance allow them to perform astounding acrobatic
							feats. From their ability to always land on their feet to their
							capacity to squeeze through tiny spaces, cats possess an array of
							impressive physical attributes that have fascinated humans
							throughout history.
						</p>
						<p>
							Perhaps most endearing is the way cats communicate and express
							themselves. From their gentle purrs of contentment to their
							expressive tail movements, cats have developed sophisticated ways
							to interact with their human companions. Their mysterious
							behaviors, such as kneading with their paws or bringing
							&quot;gifts&quot; to their owners, continue to intrigue and
							delight cat lovers around the world.
						</p>
						<p>
							Cats are fascinating creatures that have been domesticated for
							thousands of years. These graceful felines have evolved from wild
							hunters to beloved household companions, while maintaining their
							independent nature and hunting instincts. Their ability to form
							strong bonds with humans while retaining their distinctive
							personalities makes them uniquely captivating pets.
						</p>
						<p>
							The remarkable agility and physical capabilities of cats never
							cease to amaze. Their flexible spine, powerful muscles, and
							incredible balance allow them to perform astounding acrobatic
							feats. From their ability to always land on their feet to their
							capacity to squeeze through tiny spaces, cats possess an array of
							impressive physical attributes that have fascinated humans
							throughout history.
						</p>
						<p>
							Perhaps most endearing is the way cats communicate and express
							themselves. From their gentle purrs of contentment to their
							expressive tail movements, cats have developed sophisticated ways
							to interact with their human companions. Their mysterious
							behaviors, such as kneading with their paws or bringing
							&quot;gifts&quot; to their owners, continue to intrigue and
							delight cat lovers around the world.
						</p>
					</div>
					<DrawerFooter>
						<Button>Submit</Button>
						<DrawerClose>
							<Button variant="outline">Cancel</Button>
						</DrawerClose>
					</DrawerFooter>
				</DrawerContent>
			</Drawer>
		</div>
	)
}

Responsive

You can combine the Dialog and Drawer components to create a responsive dialog. This renders a Dialog component on desktop and a Drawer on mobile.

'use client'

import {
	Button,
	Dialog,
	Drawer,
	Field,
	Input,
	Label,
	DialogTrigger,
	DialogContent,
	DialogHeader,
	DialogTitle,
	DialogDescription,
	DrawerTrigger,
	DrawerContent,
	DrawerHeader,
	DrawerTitle,
	DrawerDescription,
	DrawerFooter,
	DrawerClose,
	useMediaQuery,
} from '@nerdfish/ui'
import { cx } from '@nerdfish/utils'
import * as React from 'react'

export function DrawerResponsiveExample() {
	const [open, setOpen] = React.useState(false)
	const isDesktop = useMediaQuery('(min-width: 768px)')

	if (isDesktop) {
		return (
			<Dialog open={open} onOpenChange={setOpen}>
				<DialogTrigger asChild>
					<Button variant="outline">Edit Profile</Button>
				</DialogTrigger>
				<DialogContent className="sm:max-w-[425px]">
					<DialogHeader>
						<DialogTitle>Edit profile</DialogTitle>
						<DialogDescription>
							Make changes to your profile here. Click save when you&apos;re
							done.
						</DialogDescription>
					</DialogHeader>
					<ProfileForm />
				</DialogContent>
			</Dialog>
		)
	}

	return (
		<Drawer open={open} onOpenChange={setOpen}>
			<DrawerTrigger asChild>
				<Button variant="outline">Edit Profile</Button>
			</DrawerTrigger>
			<DrawerContent>
				<DrawerHeader className="text-left">
					<DrawerTitle>Edit profile</DrawerTitle>
					<DrawerDescription>
						Make changes to your profile here. Click save when you&apos;re done.
					</DrawerDescription>
				</DrawerHeader>
				<ProfileForm className="px-md" />
				<DrawerFooter className="pt-sm">
					<DrawerClose asChild>
						<Button variant="outline">Cancel</Button>
					</DrawerClose>
				</DrawerFooter>
			</DrawerContent>
		</Drawer>
	)
}

function ProfileForm({ className }: React.ComponentProps<'form'>) {
	return (
		<form className={cx('gap-md grid items-start', className)}>
			<div className="gap-sm grid">
				<Field>
					<Label htmlFor="email">Email</Label>
					<Input
						name="email"
						type="email"
						id="email"
						defaultValue="nerdfish@example.com"
					/>
				</Field>
			</div>
			<div className="gap-sm grid">
				<Field>
					<Label htmlFor="username">Username</Label>
					<Input name="username" id="username" defaultValue="@nerdfish" />
				</Field>
			</div>
			<Button type="submit">Save changes</Button>
		</form>
	)
}