Revenue is a link, active users is a button (opened 0 times), conversion counts for 900 ms. Turn on "reduce motion" in the OS and the numbers stop counting.
The same demo that stands on the GrStatistic page — nothing was written twice for the sake of a homepage.
Composable
136 export paths. Import a component, a composable or a single directive — the graph stops there.
Consistent
Every colour, space and radius is a role, not a value. Both themes are first-class.
Customizable
Rebrand by changing token values. Component source stays untouched.
Developer-first
Types, auto-import, IDE metadata and an accessibility contract that is tested, not claimed.
The same cost, four ways
One number would have been easier to print.
Every figure here comes from a build, gzipped, with the framework excluded — it is yours, not ours. Which of these four matters depends on what constrains you, so all four are on the page.
What adoption costs
8 250B, then almost nothing
base + GrButton8 250 B
+ GrCard+ 223 B
+ GrDialog+ 318 B
+ GrDataTable+ 705 B
+ GrSelect+ 2 335 B
The first component carries tokens, both themes and the base layer. The next four together add less than a third of that.
Whether every component is cheap
13.6×spread across the set
GrBadge1 455 B
GrCard1 870 B
GrAlert2 762 B
GrButton3 391 B
GrTabs4 819 B
GrDialog9 789 B
GrDataTable16 243 B
GrSelect19 819 B
No. GrSelect weighs almost fourteen GrBadges. A library that claims every component is light is not measuring.
What you take on
0runtime dependencies
136 export paths
Nothing sits under the node. Your lockfile, your audit surface and your upgrade path stay yours — and 136 export paths mean the graph stops where you stop.
What a second theme costs
746B, at any size
1 · 7 504 B
2 · 8 250 B
The figure barely moves between one component and all 77. Dropping dark mode is not where weight is saved.
Four layers, each built from the one below it. The name is the architecture.
01
Tokens
Colour, space, radius, motion and layering as named roles.
02
Components
77 in the core, and companions around it. Each one importable alone.
03
Patterns
Compositions that solve a task: forms, search, settings, overlays.
04
Interfaces
Whole screens. Components are useful; systems are valuable.
Live, not pictures
Eight components you will meet first.
Each one is mounted on this page and reacts to the keyboard the way it will in your application. Click through — every card leads to the component page.
The same matrix that lived in `playground-5`: for each `tone` you can see live buttons and force-rendered `hover`, `focus`, and `active` states across all `variant`s.
Номер закреплён слева, статус справа — при горизонтальной прокрутке они остаются на месте. Ширина тянется за правый край заголовка; с клавиатуры — стрелками на ручке, Enter возвращает колонку к авторазметке.
Colour, space, radius, motion and layering are named roles read from the package. Change the values and the components follow — 197 of them, in both themes.