Introduction

Hel UI is a React component library built on Base UI and Tailwind CSS v4. The components handle behavior and accessibility, and the design tokens handle how everything looks.

That split is the whole idea. A component never contains a hard-coded color or a magic number. It asks the tokens for them. Change a token and every component that uses it follows, in every state and in both light and dark.

Tokens#

The tokens come in layers, and each layer only points at the one below it.

• Primitives hold the raw values: the color ramps, the spacing scale and the type sizes. This is the only place a literal value is allowed.
• Semantic tokens give those values a job, like the page background, the text color of a warning or the border of a focused field.
• Themes decide which semantic color to show. Light and dark are two small CSS files, and adding your own is a copy and a rename.

So a rebrand is a handful of edits to one file instead of a hunt through every component.

What you get#

• Accessible by default. Base UI does the heavy lifting for focus, keyboard support and ARIA, so you don't have to rebuild it.
• A wide set of components. Everything from buttons, fields and selects to date pickers, tables and a command palette.
• Light and dark themes. The theme follows the system unless you pick one, and your choice is remembered.
• Right to left support. Components use logical CSS properties, so a page flips direction without extra code. The Arabic font is included too.
• Typed. The whole library is written in TypeScript.

Next steps#

Head to Installation to add Hel UI to a project. After that, the Components section covers each component one by one.