active-ui

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.

@workspace/active-ui 8.0.0Developmentunreleased, in development in Foundationbaseline ce081dc3

@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 part and gives it the package's styling: a button, an input, the parts of a dialog. They follow the shadcn/ui 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#

Reference#

Beside the components, the package exports hooks, the theming provider and theme derivation, a few utilities such as cn and the code highlighter, and 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 walks through the setup.