Dialog

A window overlaid on either the primary window or another dialog window.

Installation

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

Lineage

Spoke

Anatomy

import {
	Dialog,
	DialogTrigger,
	DialogContent,
	DialogHeader,
	DialogTitle,
	DialogDescription,
} from "@/components/ui/dialog"

export default () => (
	<Dialog>
		<DialogTrigger />
		<DialogContent>
			<DialogHeader>
				<DialogTitle />
				<DialogDescription />
			</DialogHeader>
		</DialogContent>
	</Dialog>
)

Spoke utility classes

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