Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Installation

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

Lineage

Spoke

Anatomy

import {
	Sheet,
	SheetTrigger,
	SheetContent,
	SheetHeader,
	SheetTitle,
	SheetDescription,
} from "@/components/ui/sheet"

export default () => (
	<Sheet>
		<SheetTrigger />
		<SheetContent>
			<SheetHeader>
				<SheetTitle />
				<SheetDescription />
			</SheetHeader>
		</SheetContent>
	</Sheet>
)

Spoke utility classes

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