Patterns
Metric card
Pastel summary tiles with a prominent value and compact label.
128
Total members
24
Review pending
102
Approved
2
Rejected
Interactive local example · fictional data
The Code tab contains this preview’s complete source, including sample data and interaction state. Load the package stylesheet and Switzer font as described in the installation guide. Additional layout utilities require Tailwind CSS in your application.
API reference
| Prop | Type | Default |
|---|---|---|
| value | ReactNode | required |
| label | string | required |
| tone | "indigo" | "orange" | "green" | "red" | "indigo" |
Primitives also accept their underlying HTML or Radix props. Full types are included with the package.
Behavior & accessibility
- Labels remain visible alongside semantic colors.
- Examples use fictional counts, not production statistics.
Reference
Admin dashboard overview