Installation

Install the Qeetrix packages, wire up Tailwind CSS v4, and render your first component.

Qeetrix is published to the @qeetrix npm scope. React 19 and Tailwind CSS v4 are peer dependencies — you bring them, Qeetrix builds on top.

Published packages

One package now

As of @qeetrix/ui@0.4.0, the design system ships as a single package — the former @qeetrix/tokens and @qeetrix/brand packages are folded into @qeetrix/ui and exposed as subpaths. Qeetrix is still pre-1.0; check npm for the latest before pinning.

Package	Version	What it is
`@qeetrix/ui`	`0.4.0`	The whole design system — components, tokens, brand
`@qeetrix/eslint-config`	`0.0.1`	Shared ESLint flat config
`@qeetrix/tsconfig`	`0.0.1`	Shared TypeScript configs

Everything is reachable from @qeetrix/ui via subpaths: /styles.css (themed CSS), /tokens.css + /tokens.json (raw --qx-* tokens), /qeetrix.css (semantic tokens), /brand (logos + icons), /blocks (composed patterns), and deep /components/*, /hooks/*, /lib/*, /fonts/*.

Install

pnpm add @qeetrix/ui
pnpm add react react-dom   # peers (>=19)

That single install brings the components, design tokens, and brand assets. Tailwind CSS v4 is also a peer of the consumer build — install it if your app doesn't already have it.

Wire up Tailwind v4

In your global stylesheet, import the Qeetrix styles and let Tailwind scan the compiled component classes:

globals.css

CSS

@import "tailwindcss";
@import "@qeetrix/ui/styles.css";

/* Generate the classes used by Qeetrix components: */
@source "../node_modules/@qeetrix/ui/dist/**/*.js";

@qeetrix/ui/styles.css bundles the design tokens, the Cal Sans @font-face declarations, and the component theme. You don't need to import the token CSS separately for the components to be styled.

Render a component

Wrap your app in ThemeProvider (it manages the .dark class) and start using components:

app.tsx

TSX

import { ThemeProvider, Button } from "@qeetrix/ui";
import { QeetLogo } from "@qeetrix/ui/brand";

export function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <QeetLogo size={28} />
      <Button>Authenticate with Qeet</Button>
    </ThemeProvider>
  );
}

Shared configs (optional)

If you're building inside the Qeet ecosystem, the shared configs keep your tooling aligned:

eslint.config.js

JavaScript

import qeetrix from "@qeetrix/eslint-config";

export default [...qeetrix];

tsconfig.json

JSON

{
  "extends": "@qeetrix/tsconfig/next.json"
}

@qeetrix/tsconfig ships base.json, react-vite.json, next.json, and node.json — pick the one that matches your app.

Components

See everything @qeetrix/ui exports.