Introduction

ABBA UI is the component library of the ABBA Design System: 27 accessible React components, distributed as @abbainitiative/ui, built for Next.js App Router applications and plain React alike.

What it gives you

• One stylesheet, no build coupling. Styles are compiled into a single CSS file built on custom properties. There is no Tailwind requirement, no PostCSS plugin to register, and no content-scanning configuration to keep in sync with your source layout.
• Correct Server Component behaviour. The "use client" directive is placed per component, never at the package root. Layout and typography components render on the server; interactive ones bring their own boundary with them.
• Theming through CSS variables. Every visual decision is a token. Override the tokens in your own stylesheet and the system follows — no provider, no runtime, and it works inside Server Components because it is only CSS.
• Accessibility as part of the component. Focus management, ARIA relationships and keyboard behaviour ship with each component and are asserted in tests, including automated axe checks.

What it deliberately is not

It is not a design-token-only package, and it is not a headless library. Behaviour that is genuinely hard to implement correctly — focus trapping, roving tabindex, collision-aware positioning — is delegated to Radix primitives, which are treated as an invisible behaviour layer. Nothing of Radix's API surfaces in ABBA's own props, so the dependency can be revisited without a breaking change for you.

It is also not a kitchen sink. There is no data grid, no date picker, no rich text editor. Those components have deep requirements that a general-purpose library tends to serve badly, and every one of them added is a permanent maintenance cost paid by every consumer.

Importing

The package exposes a root entry and a subpath per component. Both are valid; pick whichever reads better in your codebase.

// Both work. The subpath import is narrower, which helps
// bundlers that do not handle side-effect analysis well.
import { Button } from "@abbainitiative/ui";
import { Button } from "@abbainitiative/ui/button";

Browser support

The stylesheet uses CSS custom properties, logical properties, color-mix() and container-friendly layout primitives. That targets evergreen Chrome, Edge, Firefox and Safari. Internet Explorer is not supported and will not be.

Where to next

• Installation — add the package and wire up the stylesheet.
• Next.js — App Router specifics, including where client boundaries land.
• Design tokens — the full token reference.
• Components — every component with live examples.