zeekayandHanzo Dev
d504ef37b2
The responsive section measured itself against a second container. Its breakpoint ruler rode Container — the docs page's measure and gutter — nested in the ContainerLarge every other section stands on, so a marker labelled 500 stood 522px from the mock it measures, and below sm a hand-fitted translate put the mock 25px left of its own heading, off the page. Both take the section's own box now. The preview strip scrolled to an arithmetic copy of its padding and gap that had drifted from them by one gap per stop, so the ninth colour sat a whole card off centre. It asks the layout instead. A stop reaches the swatch, the demo, the ink and the stored accent, never the ground, and a lamp carried past the hero is the ground by another route — the wash still under the player row. The glow stays at the hero. Two footer columns had no basis to size from once stacked and drew over the next, nine swatches could not fit 390 in one row, and a title glued to its last word was split mid-word instead. Co-authored-by: Hanzo Dev <[email protected]>
Style library, design system, composable components, and more.
Gui is a bunch of libraries for building UIs that share code across React and React Native.
@hanzogui/core- Universal style library for React.@hanzogui/static- Optimizing compiler that works withcoreandhanzogui.hanzogui- UI kit that adapts to every platform.
See hanzogui.dev for documentation.
Gui lets you share more code between web and native apps without sacrificing the two things that typically suffer when you do: performance and code quality.
It does this with an optimizing compiler that outputs platform-specific optimizations - it turns styled components, even with complex logic or cross-module imports, into a simple div alongside atomic CSS on the web, or a View with its style objects hoisted on native.
The entirety of Gui works at compile time and runtime, and can be set up gradually, with initial usage as simple as importing it and using the base views and styled function.
We recommend checking out the starters with npm create hanzogui@latest, they range from a simple learning example to a production-ready monorepo.
The compiler optimizes most and ultimately flattens a majority of styled components. In the ~500px² responsive browser section of the Gui website, 49 of the 55 or so inline styled components are flattened to a div. The homepage gains nearly 15% on Lighthouse with the compiler on.
Contributing
To contribute to Gui reference the contributing guide.
To contribute to documentation, see the docs source in apps/gui.hanzo.ai/data/docs/.
License
MIT — see LICENSE.
Lineage
Gui is a fork of Tamagui by Nate Wienert.
It is MIT-licensed, and this repository preserves the upstream LICENSE and
credits it in full in NOTICE, which also lists the packages written
at Hanzo. Hanzo AI is not affiliated with, sponsored by, or endorsed by Tamagui.