Qeetrix
@qeetrix/ui v2.1.2, Built for the Qeet ecosystem

The design system for every Qeet interface.

Accessible React components, tokens, foundations and patterns for building consistent products across the Qeet ecosystem.

Get startedBrowse components
bun add @qeetrix/ui @qeetrix/icons

Qeetrix in action

Explore components in a live environment.

Try, tweak and copy production-ready components built for the Qeet ecosystem.

Button

Input

Select

Switch

Alert

Success
Your changes have been saved.
Information
This is a neutral alert message.

Badge

DefaultPrimarySuccessWarningDestructive

Tabs

Card

Q
Product update
New components and improvements are now available.

Tooltip

Hover or focus

Progress

Upload progress
x

Explore Qeetrix

Everything you need to build with confidence.

From ready-to-use components to in-depth guides, explore everything the Qeetrix design system has to offer.

Foundations, connected

A token architecture that scales.

From primitive values to component-level tokens, Qeetrix keeps design and code in sync.

  1. 1

    Primitive tokens

    Core, brand-agnostic values.

    color.qeet.600oklch(0.585 0.1835 40)
  2. 2

    Semantic tokens

    Meaningful values for design decisions.

    color.action.primaryvar(--qx-color-action-primary)→ color.qeet.600
  3. 3

    Component tokens

    Applied to components across the system.

    • component.button.primary.background→ var(--qx-color-action-primary)
    • component.button.primary.foreground→ var(--qx-color-text-on-brand)
    • component.button.primary.background-hover→ var(--qx-color-action-primary-hover)

From install to production

Get up and running in minutes.

Integrate Qeetrix into your stack and follow best practices for a production-ready setup.

Built for real-world teams

Enterprise by construction.

A design system that meets the needs of modern product teams at scale.

  • Accessibility

    WCAG 2.2 AA target, keyboard support, semantic markup and screen-reader-friendly components.

  • Themes

    Light and dark themes with design tokens and brand customization.

  • Direction

    Built-in RTL support with logical properties and mirrored layouts.

  • Rendering

    SSR and React Server Components ready, optimized for modern frameworks.

  • Motion

    Thoughtful motion with accessible defaults and reduced motion support.

  • Density

    Flexible density options for different use cases and screen sizes.

  • Design tokens

    Primitive, semantic and component tokens for consistent, scalable design and theming.

  • Component manifest

    Machine-readable metadata for tooling, automation and discovery.

The Qeet ecosystem

Built for the Qeet ecosystem.

A connected set of products and services for modern teams.

Latest and ongoing

Latest from Qeetrix.

Stay up to date with releases, guides and project updates.

Start building with Qeetrix.

One package. Every surface. Built for the Qeet ecosystem.

Get startedBrowse components