Introduction
Tokens, components and templates for every Zynactra product.
Zynactra UI is the shared design layer for everything Zynactra builds: zynactra.cloud, internal tools, product dashboards and client starters. One set of tokens, one set of components, one way of doing things.
Primary action
Progress
Focus
Active place
What's in the box
@zynactra/tokens
Six themes of colors, type, radius, shadows and motion as CSS variables, a locked Tailwind v4 theme and JSON.
@zynactra/ui
Every shadcn/ui component on Base UI, in the Zynactra style, plus Zynactra additions like the brand button and the ripple.
How it's built
- shadcn/ui underneath. Components come from shadcn/ui's Base UI set, pinned to an exact upstream commit and never edited by hand.
- Themes on top. The look lives in themes, the same mechanism shadcn uses for its own styles. Six ship today; a rebrand is a token change and a version bump.
- Locked to tokens. Tailwind's default palette is removed, so
bg-blue-500doesn't exist in a Zynactra product, and every radius resolves to 0.
Start with Installation, then read the Principles before building anything. Building with Claude Code? Turn on the plugin so it follows them too.