export default function ThemeDemo() {
	return (
		<div className="space-y-10 text-foreground">
			<div className="w-full flex flex-wrap items-center justify-center gap-4 text-sm">
				<div className="p-2 bg-background text-foreground rounded-lg">Body</div>
				<div className="p-2 bg-card text-card-foreground rounded-lg">Card</div>
				<div className="p-2 bg-popover text-popover-foreground rounded-lg">Popover</div>
				<div className="p-2 border border-border rounded-lg">Border</div>
				<div className="p-2 border border-input rounded-lg">Input Border</div>
				<div className="p-2 bg-muted text-muted-foreground rounded-lg">Muted</div>
				<div className="p-2 bg-accent text-accent-foreground rounded-lg">Accent</div>
				<div className="p-2 bg-secondary hover:bg-secondary-darker text-secondary-foreground rounded-lg">Secondary</div>
			</div>
			<div className="w-full flex flex-wrap items-center justify-center gap-4 text-sm">
				<div className="p-2 bg-primary hover:bg-primary-darker text-primary-foreground rounded-lg">Secondary</div>
				<div className="p-2 bg-success hover:bg-success-darker text-success-foreground rounded-lg">Secondary</div>
				<div className="p-2 bg-warning hover:bg-warning-darker text-warning-foreground rounded-lg">Secondary</div>
				<div className="p-2 bg-info hover:bg-info-darker text-info-foreground rounded-lg">Secondary</div>
				<div className="p-2 bg-destructive hover:bg-destructive-darker text-destructive-foreground rounded-lg">Secondary</div>
				<div className="p-2 bg-mono hover:bg-mono-darker text-mono-foreground rounded-lg">Secondary</div>
			</div>
		</div>
	);
}
Theme

Examples

Default
