Installation

Install the packagesCopy Anchor Link

bun add @qeetrix/ui @qeetrix/icons

@qeetrix/ui needs React and React DOM 19 or later and Tailwind CSS 4 or later. Install them too if your app doesn't have them yet.

Import the stylesheetCopy Anchor Link

In your global stylesheet, import Qeetrix in place of Tailwind:

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

This brings in Tailwind itself, the Qeetrix tokens and theme mapping, and the Qeet fonts. It also tells Tailwind to scan the Qeetrix package, so component classes are generated without an extra @source line.

Use a componentCopy Anchor Link

import { Button } from "@qeetrix/ui";

export function Continue() {
  return <Button variant="outline">Continue</Button>;
}

Dark modeCopy Anchor Link

The light and dark themes switch on a .dark class. Wrap your app in ThemeProvider to manage it:

import { ThemeProvider } from "@qeetrix/ui";

export function App({ children }: { children: React.ReactNode }) {
  return <ThemeProvider defaultTheme="system">{children}</ThemeProvider>;
}

Its keyboard shortcut is off by default. Pass enableKeyboardShortcut to toggle the theme with Ctrl/⌘ + Shift + D.

If your app already toggles a .dark class — for example with next-themes — leave ThemeProvider out. The tokens follow the class either way, and two theme managers would fight over it.

For the full setup in your framework, including a script that avoids a flash of the wrong theme on load, see Next.js or TanStack Start.

Raw tokensCopy Anchor Link

For values outside components, such as charts or emails:

• @qeetrix/ui/tokens.css — every token as a --qx-* CSS variable, including the primitive ramps
• @qeetrix/ui/tokens.json — the same tokens, resolved for each theme