Small foundation.
Big ideas.

React components with intent. A carefully built foundation for interfaces that feel right, with code you own.

Explore components View on GitHub

npx zunoui@latest init

FIG. 001 / A SYSTEM OF POSSIBILITIES

Your code. Your design. Your product.78 components · 180 examples

GOOD COMPANY. SOLID FOUNDATIONS.

ReactBase UITailwind CSSTypeScript

01 / FROM SOURCE TO SCREEN

From the first action.
To the last detail.

Add a component with one command. It lands in your project as plain code, ready to use and change.

Browse all 78 components

Accessible by default with Base UI
Light and dark themes from shared tokens
Editable source, right in your project

bashTerminal

npx zunoui@latest init
npx zunoui@latest add button switch

02 / THE BUILDING BLOCKS

A few pieces. Endless possibilities.

View the collection ↗

Button

Clear actions with accessible variants, sizes and states.

5 examples →

Field

Label, control, description and errors wired together in a single field.

3 examples →

Tabs

Sections with distinct selection and focus states.

8 examples →

Dialog

A modal window with focus trapping, Escape to close and a backdrop; renders in a portal.

4 examples →

Select

Single-option selection with a portaled popup, keyboard support and accessible states.

2 examples →

Toast

A brief, non-blocking notice that appears and dismisses itself; renders in a portal.

1 example →

+-------------------+
|  your idea        |
|  + your code      |
|  = your product _ |
+-------------------+

01 / YOUR CODE

Make it yours.

Components live in your project. Adapt their design and behavior to what you are building.

02 / A SHARED FOUNDATION

Everything fits.

Shared tokens, light and dark themes, and Base UI primitives keep the interface consistent.

03 / AT YOUR PACE

Start small.

Pick a component, explore its examples and add the pieces your product needs.

03 / A LITTLE CLARITY

Before you build.

A few things you might be wondering.

Is ZUNO a component package?

The CLI copies component source into your project. You can read it, change it and keep it alongside the rest of your code. Components use Base UI and shared Tailwind CSS tokens.

Can I use my own design system?

Yes. Adapt the shared tokens or edit individual components to match your product. The getting started guide also covers adding ZUNO to an existing theme.

What does alpha mean?

ZUNO is still evolving. APIs and available components may change before 1.0.0. Review the source and alpha notes before using it in your project.

0 } . 1 [ : Z ] * X < # + > { / 0 } . 1 [ : Z ] * X < # + > { / 0 } . 1 [ : Z ] * X < # + > { / 0 } . 1 [ : Z ] * X < # + > { /
: X > } : X > } : X > } : X > } : X > } : X > } : X > } : X > } : X > } : X > } : X > } : X > } : X > } : X > } : X > } : X > }
< } * / Z > [ # . X 0 ] { : + 1 < } * / Z > [ # . X 0 ] { : + 1 < } * / Z > [ # . X 0 ] { : + 1 < } * / Z > [ # . X 0 ] { : + 1
/ X 1 > ] } # : / X 1 > ] } # : / X 1 > ] } # : / X 1 > ] } # : / X 1 > ] } # : / X 1 > ] } # : / X 1 > ] } # : / X 1 > ] } # :
[ } { # * : . / + X Z 1 0 > < ] [ } { # * : . / + X Z 1 0 > < ] [ } { # * : . / + X Z 1 0 > < ] [ } { # * : . / + X Z 1 0 > < ]
X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
{ } [ ] < > 0 1 Z X + / . : * # { } [ ] < > 0 1 Z X + / . : * # { } [ ] < > 0 1 Z X + / . : * # { } [ ] < > 0 1 Z X + / . : * #
1 X / : # } ] > 1 X / : # } ] > 1 X / : # } ] > 1 X / : # } ] > 1 X / : # } ] > 1 X / : # } ] > 1 X / : # } ] > 1 X / : # } ] >
* } < 1 + : { ] 0 X . # [ > Z / * } < 1 + : { ] 0 X . # [ > Z / * } < 1 + : { ] 0 X . # [ > Z / * } < 1 + : { ] 0 X . # [ > Z /
> X : } > X : } > X : } > X : } > X : } > X : } > X : } > X : } > X : } > X : } > X : } > X : } > X : } > X : } > X : } > X : }
. } 0 / { > + # < X * ] Z : [ 1 . } 0 / { > + # < X * ] Z : [ 1 . } 0 / { > + # < X * ] Z : [ 1 . } 0 / { > + # < X * ] Z : [ 1
] X # > / } 1 : ] X # > / } 1 : ] X # > / } 1 : ] X # > / } 1 : ] X # > / } 1 : ] X # > / } 1 : ] X # > / } 1 : ] X # > / } 1 :
+ } Z # 0 : < / [ X { 1 * > . ] + } Z # 0 : < / [ X { 1 * > . ] + } Z # 0 : < / [ X { 1 * > . ] + } Z # 0 : < / [ X { 1 * > . ]
} X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X } X
Z } + ] . > * 1 { X [ / < : 0 # Z } + ] . > * 1 { X [ / < : 0 # Z } + ] . > * 1 { X [ / < : 0 # Z } + ] . > * 1 { X [ / < : 0 #

Your idea. Your next step.

A small foundation for whatever comes next. Make it yours.

Get started with ZUNO Explore components

Small foundation.Big ideas.

From the first action.To the last detail.