Components

Card

Glass panels for grouping content, and stats for single figures.

Emergency fund

64%

$6,400 of $10,000

Import

import { Card, CardHeader, CardTitle, CardDescription, Stat, StatRow } from '@rinzai/zen';

Examples

Stats

Income$8,450+4% on last month

Spent$5,120

Net this month$3,330

Morph

API reference

<Card>

Glass panel whose border catches the pointer light. For a title with an action beside it, start it with a CardHeader holding a CardTitle and the action.

No props of its own; it accepts the props of the element it renders.

<CardHeader>

The top row of a Card: its title, and an action (a button, a menu) at the end.

No props of its own; it accepts the props of the element it renders.

<CardTitle>

The card's title: an h4 by default; with asChild, your own heading (an h2, say) gets its look.

Prop	Type	Default
`asChild` Put the title's look on your own heading element instead of an h4.	`boolean`	`—`

<CardDescription>

A line under the CardTitle: what the card is about, or a figure's context ("₹12L at 8.5% · 20 years").

No props of its own; it accepts the props of the element it renders.

<Stat>

A single figure with a label, e.g. "Revenue $12,400".

Prop	Type	Default
`label`Required	`string`	`—`
`value`Required	`ReactNode`	`—`
`children` Under the figure: how it got there, like a Sparkline.	`ReactNode`	`—`
`className`	`string`	`—`
`hint`	`ReactNode`	`—`
`tone`	`"default" \| "negative" \| "positive"`	`default`

<StatRow>

Row of stats: two columns on phones (an odd last one spans both), three from sm up.

Prop	Type	Default
`className`	`string`	`—`