---
id: "packages/active-ui"
title: "active-ui"
description: "The React component library of the Active packages, built on Base UI and Tailwind CSS 4, with the forms, dialogs and page patterns applications share."
url: "/packages/active-ui"
locale: "en"
revision: "fe95e366cff2728f"
---

# active-ui

`@workspace/active-ui` gives a React application its interface: buttons, fields, dialogs, menus and
tables, and larger patterns such as number and date input, confirmation dialogs, page headers and
search pickers. This site is built with it.

The components render the same in light and dark and follow one focus and one scrollbar style.
They build on the keyboard and ARIA behaviour of Base UI. The package's tests compute its text
colours against WCAG AA, and the outline of an empty checkbox or radio against the 3:1 for
non-text contrast; not every other non-text contrast is certified that way. That is support, not a
guarantee: the result is accessible only together with what your application does. It gives every
control a label or accessible name, shows error text next to an invalid field, keeps a sensible
heading and landmark structure, and checks the states and compositions it builds. A page here
names the limits it knows of. The components do not translate and do not fetch data: every visible
text, accessible name and value comes from your application.

## Two layers

**Primitives** are the building blocks. Each one wraps one element or one
[Base UI](https://base-ui.com) part and gives it the package's styling: a button, an input, the
parts of a dialog. They follow the [shadcn/ui](https://ui.shadcn.com) components of the same name,
adapted to this package.

**Composed components** combine primitives into a complete pattern with behaviour of its own: a
number field that reads and writes the reader's notation, a confirmation dialog with a busy state.
They exist where every application would otherwise build the same thing again, and slightly
differently.

Start with a primitive when you need a single element and decide the behaviour yourself. Use a
composed component when it does exactly the job you have; its page says what it adds and what your
application still provides.

## Components

> (The index of the components of active-ui is generated on the page; it is not yet available in Markdown.)

## Reference

Beside the components, the package exports [hooks](/packages/active-ui/hooks), the
[theming](/packages/active-ui/theming) provider and theme derivation, a few
[utilities](/packages/active-ui/utilities) such as `cn` and the code highlighter, and
[brand icons](/packages/active-ui/brand-icons) for sign-in buttons.

## What your application provides

- **Text.** Every visible text and accessible name is a prop, often a required one. The package
  never falls back to English.
- **Presentation.** Components that show numbers or dates receive a language or presentation;
  they never read the browser's locale.
- **Styling setup.** The stylesheets are Tailwind CSS 4 source that your build compiles, and the
  theme (fixed, or switchable with a provider) is yours to choose.
- **Data and state.** Lists of options, values and open states come from your application.

[Getting started](/packages/active-ui/getting-started) walks through the setup.