Introduction

ZUI (ZitDevs UI) is the design system every ZitDevs product builds from. It is two private packages on GitHub Packages:

Package	What it holds	Who uses it
@zitdevs/tokens	The brand palette, the semantic layer components are written in, type, spacing, radius and motion; fonts and brand assets; JS values.	Every product, whatever its framework.
@zitdevs/ui	React 19 components styled with Tailwind 4 utilities that read those tokens.	Next.js, Vite + React and Astro + React apps.

ZUI

One kit for every product.

Native HTML, rendered on the server, themed through one set of roles.

Install itTheme it

What it promises

• Native HTML first. Every component renders semantic, working HTML on the server: a real <a> or <button>, an accordion that is <details>. It works before, or without, any JavaScript. Anything that needs a script is an enhancement that switches on when the page hydrates.
• Server Components by default. A component with no state or effects is a plain function and works as a React Server Component. A module that needs the browser starts with "use client", and the build keeps that directive on that module alone.
• Themeable. Components are written in semantic roles — primary, ink, surface, border-control — never in brand colours. The ZitDevs mapping is the default; a product overrides the roles to take the kit in its own colours. See Theming.
• Accessible as shipped. The focus ring, contrast, target sizes, roles and names are part of each component and tested with axe-core. Your part is the copy and the page outline.
• Shaped like shadcn. Utility classes, variants, a cn() helper, className and every other attribute passed through to the root element, and ref as a plain prop.

What is in it today

Tokens, fonts and brand assets, and the first components: Icon, Button, Marker, Eyebrow, Logo, SectionHead, Accordion, Alert, Breadcrumbs and Tabs. The rest of the website’s kit follows, on the patterns of the Guides: interactive components, router links and languages.

Where to go next

1. Install the packages and set up Tailwind.
2. Read Theming before giving a product its own colours.
3. Look up a value in Tokens, or a component in the sidebar: each page has live examples, its props, and what it guarantees for accessibility and without JavaScript.