Components
Card
Glass panels for grouping content, and stats for single figures.
Emergency fund
64%
$6,400 of $10,000
Import
import { Card, Stat, StatRow } from '@rinzai/zen';Examples
Income$8,450+4% on last month
Spent$5,120
Net this month$3,330
API reference
<Card>
Glass panel whose border catches the pointer light.
| Prop | Type | Default |
|---|---|---|
actionShown at the end of the header, e.g. a button or menu. | ReactNode | — |
title | ReactNode | — |
<Stat>
A single figure with a label, e.g. "Revenue $12,400".
| Prop | Type | Default |
|---|---|---|
labelRequired | string | — |
valueRequired | ReactNode | — |
className | string | — |
hint | ReactNode | — |
tone | "default" | "positive" | "negative" | default |
<StatRow>
Row of stats: two columns on phones (an odd last one spans both), three from `sm` up.
| Prop | Type | Default |
|---|---|---|
className | string | — |