On this page

Empty

Empty state component for displaying messages when no content is available.

Installation

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

Lineage

Spoke

Anatomy

import {
	Empty,
	EmptyHeader,
	EmptyTitle,
	EmptyDescription,
	EmptyMedia,
	EmptyContent,
} from "@/components/ui/empty"

export default () => (
	<Empty>
		<EmptyHeader>
			<EmptyMedia />
			<EmptyTitle />
			<EmptyDescription />
		</EmptyHeader>
		<EmptyContent />
	</Empty>
)

Spoke utility classes

This component uses base design tokens for styling and has no whitelabel CSS variables.