Qeetrix
The shared design system behind every Qeet product — design tokens, a React component library, and brand assets, built on Tailwind CSS v4.
Pre-1.0 · single package
Qeetrix is published and in production across Qeet ID, but it's still pre-1.0
(@qeetrix/ui is at 0.4.0). As of 0.4.0 it ships as one package —
design tokens and brand assets are folded into @qeetrix/ui. APIs are stable
enough to build on, but minor versions may contain breaking changes until 1.0.
What is Qeetrix?
Qeetrix is the shared design system for Qeet Group products. It's a pnpm + Turborepo
monorepo built on Tailwind CSS v4 and shadcn/ui with the Base UI registry, shipping as
the single @qeetrix/ui package. It's already a live dependency of Qeet ID — both the
admin console and the web app render Qeetrix components.
It gives every Qeet app one source of truth for color, typography, spacing, components, and logos — so the products look and behave like one platform without each team rebuilding the basics.
What's in the package
@qeetrix/ui is everything, exposed through subpaths:
Components
The React component library — ~114 shadcn + Base UI primitives, plus composed blocks at @qeetrix/ui/blocks.
Design tokens
A W3C-format token source built via Style Dictionary, baked into the styles and exposed at /tokens.css, /tokens.json, and /qeetrix.css.
Brand
Theme-adaptive Qeet logos and custom product icons at @qeetrix/ui/brand.
Shared configs
@qeetrix/tsconfig and @qeetrix/eslint-config keep every package and app consistent.
Consumers import one stylesheet (@qeetrix/ui/styles.css) — which bundles the tokens and Cal
Sans fonts — and drive light/dark through the .dark class managed by
ThemeProvider.
Why it exists
- Consistency — Qeet ID, People, Logs, Notify, and Pay all share the same primitives, so the platform feels coherent end to end.
- Velocity — new surfaces start from a complete, accessible component set instead of from scratch.
- Accessibility — token pairs are contrast-checked (WCAG AA) at build time, and components are built on Base UI primitives.