Components

Badge

Status and metadata labels that stay quiet in dense product surfaces.

ActiveDraftv0.1Queued

import { Badge } from "@/components/ui/badge";

<Badge>Active</Badge>
<Badge variant="outline">v0.1</Badge>
<Badge variant="muted">Queued</Badge>

Button

Compact actions with clear hierarchy and precise pressed states.

Card

A complete, softly raised surface for grouped content and actions.