Drawer

A drawer component for React.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/drawer

Lineage

Spoke

Anatomy

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

export default () => (
	<Drawer>
		<DrawerTrigger />
		<DrawerContent>
			<DrawerHeader>
				<DrawerTitle />
				<DrawerDescription />
			</DrawerHeader>
		</DrawerContent>
	</Drawer>
)

Spoke utility classes

Class	Fallback chain	Description
`--drawer-overlay`	`oklch(0 0 0 / 0.5)`	Colour for overlay drawer variant
`--drawer-content`	`var(--background)`	Colour for content drawer variant
`--drawer-border`	`var(--border)`	Border colour for drawer
`--drawer-radius`	`var(--radius-lg)`	Border radius for drawer
`--shadow-drawer`	`var(--shadow-lg)`	Box shadow for drawer