Introduction

Forte UI is a React component library built on Base UI primitives, styled with a design system that rebuilds its entire palette from one color variable — in pure CSS, with no build step and no runtime theming layer. Every accessibility claim on this site is one that was measured, and two of them started as bugs found in this library's own code.

What makes it different

Three decisions shape everything else in the library.

Nothing is hardcoded. Color, spacing, radius, duration and easing all come from tokens. A seed color derives twelve accent steps, brand-tinted neutrals and a readable text color, and the density and radius presets rewrite the rest — so a theme is a handful of declarations, not a fork.

Accessibility is measured, not asserted. The color ramp is verified against 119,108 in-gamut seeds before a release, and text on a solid fill never drops below 4.5:1 whichever brand color you pick. Keyboard behavior, focus management and ARIA come from Base UI, and every focusable part carries a brand-colored focus ring drawn over its own gap, so it stays visible on any background.

Your CSS always wins. Everything the library ships sits inside a cascade layer, which loses to unlayered author CSS by definition. Plain stylesheets and utility classes override any component without a single !important.

Change one line. Change everything.

There is no palette to generate, no build step, and no JavaScript. Relative color syntax derives the whole ramp from your seed, and a fitted lightness threshold picks black or white text so the contrast holds up whatever you choose.

:root {
  --forte-accent-seed: #6d43d4;
}

The strips above are live: pick a palette on the home page or in the Theme Studio and they recolor with the rest of the site.

Install

npm install @forte-ui/react

React 18 or 19 and the matching react-dom are the only peer dependencies; Base UI comes with the package. Import the stylesheet once, at the root, and the components render themed:

import "@forte-ui/react/theme.css";
import { Button, Dialog } from "@forte-ui/react";

export function Example() {
  return <Button tone="danger">Delete</Button>;
}

Every component ships with "use client" already in place, so there is no provider, no registry and no configuration file.

Where to go next

• The Next.js and Vite guides walk a brand-new project from scaffold to a themed component, with and without Tailwind.
• Theming explains the seed, the ramp and the scopes; the Theme Studio lets you design one and export it.
• Design tokens lists every --forte-* variable, and Styling components covers the data-* attributes and per-component knobs.
• Working with a coding agent? AI agents shows how to point it at the component catalog the package ships.