One import surface, one substrate, one root. This page — its header, its footer and every block on it — is laid out with the grid it documents.
pnpm add @hanzo/ui
1
2
3
4
5
6
drag the bottom-right corner
One substrate
Every component renders through @hanzo/gui on the @hanzo/tokens scale, so one import runs on web, native and desktop. No Radix, no Tailwind, no cva.
One root
<Hanzo> carries the config, the generated stylesheet and the theme. That is the entire setup — no CSS import, no generator script, no bundler alias.
One list
The gallery is the specification of what this package styles. The CSS generator, the unit test and the consumer test all render THAT list.
Tracks, not breakpoints
Grid takes one prop for the columns. The responsive form measures the column it is in, so a block laid out this way is correct inside a sidebar it has never seen.
Components
Rendered here, not pictured. Every one of them, in every variant, is on the gallery.
ButtonsNine variants, six sizes.
FieldsBehaviour comes from the matching gui primitive.
Ship it hardened
BadgesFour tones, one shape.
defaultsecondarydestructiveoutline
Every component renders through @hanzo/gui, so one import runs on web, native and desktop.
Grid is web-only and ships at @hanzo/ui/grid, off the barrel that promises to run everywhere.