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
Qeetrix is published and in production across Qeet ID, but the packages are still pre-1.0
(@qeetrix/ui is at 0.1.0). 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 of versioned, npm-publishable @qeetrix/* packages built on Tailwind CSS v4 and
shadcn/ui with the Base UI registry. 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.
The pipeline
Qeetrix is a small set of packages that feed each other:
@qeetrix/tokens
A single W3C-format token source, built to CSS + JSON via Style Dictionary. The root of the system.
@qeetrix/ui
The React component library — shadcn + Base UI primitives, themed by the tokens.
@qeetrix/brand
Theme-adaptive Qeet logos and a set of custom product icons.
Shared configs
@qeetrix/tsconfig and @qeetrix/eslint-config keep every package and app consistent.
Tokens build first; @qeetrix/ui and @qeetrix/brand consume them. Consumers import one
stylesheet (@qeetrix/ui/styles.css) 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.