UT UI Library

Most component libraries hand you components and leave the system to you. This is the other way round: a token layer with light, dark and high-contrast themes, a motion language with reduced-motion built in, and primitives that make an inaccessible interface hard to build by accident.

• 690+ design tokens

  Colour in OKLCH, type, space, radius, motion, z-index and containers. Nothing hardcoded.

• Three themes

  Light, dark and high-contrast, plus reduced-motion. Dark is a re-mapping, not an inversion.

• WCAG 2.2 AA

  Focus handled globally, icons require a decorative-or-labelled decision, forms wire their own ARIA.

• Composited motion only

  Transform and opacity, sub-150ms on the interaction path. No layout animation.

Three layers, one direction

A raw palette feeds a semantic layer, which feeds the utility bindings components consume. A component may only reference the semantic layer, which is what makes a rebrand a one-file change and a theme swap a data attribute.

palette (--neutral-9)  →  semantic (--ut-surface)  →  utility (bg-surface)
never in a component       what components use      generated

Node.js

≥ 22.12LTS or current

Package manager

pnpm ≥ 10npm and yarn also work

Operating system

macOS, Linux, Windows (WSL2)

1. 1

   Unpack the download

   The archive contains the full source. There is no installer and no post-install script.

   bash

   unzip ut-ui-library.zip
   cd ut-ui-library

2. 2

   Install dependencies

   bash

   pnpm install

3. 3

   Configure the environment

   Copy the example file and fill in the variables listed under Environment variables.

   bash

   cp .env.example .env

1. 1

   Start the development server

   bash

   pnpm dev

2. 2

   Verify the install

   Runs formatting, lint, type-check, tests and a production build.

   bash

   pnpm check

• Rebranding

  Rotate the brand hue in the palette. Because colour is authored in OKLCH, the whole scale stays perceptually even and contrast holds.

  src/styles/tokens/palette.css

• Adding a theme

  A new file in themes/ and a data-theme value. No component changes.

  src/styles/themes/

1. 1.3.0

   2 Aug 2026

   High-contrast theme and the motion token collapse.

   • addedHigh-contrast theme as a modifier on light or dark.
   • addedReduced-motion collapses durations to 1ms so transitionend still fires.
   • fixedFocus ring was clipped inside overflow containers.

2. 1.2.0

   11 Jun 2026

   Tailwind v4 migration.

   • changedConfiguration moves from JavaScript to CSS.Breaking
   • removedtailwind.config.js is no longer used.Breaking

• requiresReact≥ 18

1. In progressQ4 2026

   Data table

   Sorting, selection and bulk actions with the accessibility contract intact.

2. PlannedQ1 2027

   Chart primitives

   Series distinguished by shape as well as colour.

• Read the documentation

• Content-addressed storage for release artifacts

• Documentation
• Report a problem
• Licensing questions