Introduction

Welcome to Noarka UI, an open-source React component library built on Base UI headless primitives and styled with Tailwind CSS v4.

What is Noarka UI?

Noarka UI is the design system used to build Noarka applications. We have decided to open-source it so that other teams can use the same components and design tokens in their own products.

It is built on top of Base UI headless primitives, which means that all the accessibility and keyboard handling is already taken care of. Noarka UI adds a layer of styling and theming on top of these primitives, so that you can use them in your own applications without having to worry about the underlying implementation.

How it works

Install the package, import the design tokens once in your global stylesheet, and render primitives directly. There are no providers to configure and no build plugins required.

When you need a different underlying element, every interactive primitive accepts a render prop instead of Radix-style asChild. Theming is plain CSS variables, so each app can override the palette without forking components.

Design principles

  • Accessible by default. All components are built on top of Base UI headless primitives, which means that all the accessibility and keyboard handling is already taken care of.
  • Ready to use. The exact components are used in Noarka applications and is ready for production use.
  • Composition over configuration. Small primitives combine into app-specific patterns instead of growing mega-props.

Contributing

Noarka UI is open-source and we welcome contributions. If you have an idea for a new component or a bug fix, please open an issue or a pull request on the Noarka repository.

Next steps

  • Follow the installation guide to add the packages and import the design tokens.
  • Re-skin the whole library from the Theming page.
  • Browse every primitive in the components reference.