Components
Data display
The small pieces that carry information: figures that count up, people, tags, rows, separators and shortcuts.
Stat figures
The dashboard's KPI. Change the period: figures count from the old value to the new one, and the badge colour follows whether the change is good.
Total income
€ +9.4%
vs last periodTotal expense
€ +5.4%
vs last periodNet period
€ +13.4%
vs last periodAvatars
Initials on a gradient chosen from the name — the same person always gets the same colours.
ACRSMD RSTMNRAC +2
Tags
Active filters you can remove one by one.
Loulé Active Over €40k This year
List rows
Title, subtitle and whatever belongs on the right. Rows with href or onclick light up on hover.
Dividers & shortcuts
or continue with
Press ⌘K to search, ⌘ . to check the laws, Esc to close anything.
Props
| Prop | Values | Default | What it does |
|---|---|---|---|
Stat value / currency / decimals | number · string · number | · '€' · 2 | The figure; currency sign sits small on the baseline |
Stat change / goodWhen | number % · 'up' | 'down' | · 'up' | Badge text and whether rising is good |
Avatar name / src / size / people | string · url · 'sm'|'md'|'lg' · array | · · 'md' | One person, or an overlapping group |
Tag onremove | () => void | — | Shows the × button |
ListRow title / subtitle / href / leading / trailing | string · snippet | — | One row of a list |