ABBA UIv0.1.0

ABBA Design Systemv0.1.0

A component libraryyou can make look like yours.

27 accessible React components for Next.js and plain React. Install the package, import one stylesheet, and change any colour, size or radius by overriding a CSS variable.

Get startedBrowse components
pnpm add @abbainitiative/ui
New

Your coding agent can now read the system.

The ABBA UI MCP server serves the same catalogue these docs are built from, so Claude Code, Codex and Cursor stop inventing prop names.

Connect an agent

Theming

Change two things. Watch everything follow.

Pick an accent and a corner style. The components below are real, and so is the CSS — it is the same override you would put in your own stylesheet.

Accent
Corners

Invite a teammate

They'll get access to this workspace.

They can change this later.

AdminActiveRead only

Seats remaining

You can invite four more people on your current plan.

Paste this into your stylesheet to keep it.

/* Cedar and Soft are what the package ships.
   Pick another accent or corner style to see the CSS. */

No provider. No rebuild.

Every colour, size and radius is a CSS custom property. Override the ones you want, after the ABBA stylesheet. It works inside Server Components because there is nothing to mount.

/* your own stylesheet, loaded after */
:root {
  --abba-primary: #4338ca;
  --abba-primary-hover: #3730a3;
  --abba-radius-md: 3px;
}

The set

Buttons, forms, cards, feedback.

Everything here is the published package rendering live. Switch the theme in the header to see the dark set.

Buttons
Form fields

We only use this to sign you in.

Validation
Messages

Saved

Your changes are live.
Status
ActivePendingStatus:Overdue
subtlesolidoutline
Cards

Monthly report

Generated 5 August

Contributions rose 12% against the last period.

Counted, not claimed

Small on purpose.

Every figure below is read out of the repository — components on disk, dependencies in the manifest, tokens in the stylesheet, tests that passed.

27
Components

Every one keyboard operable.

5
Runtime dependencies

Radix primitives, nothing else.

192
Design tokens

Light and dark, both complete.

256
Passing tests

Including an axe pass per component.

How it works

Two imports, then you're building.

No transpilePackages, no PostCSS plugin, no theme provider. The package ships compiled, with "use client" already in the right places.

01

Import the stylesheet once

// app/layout.tsx
import "@abbainitiative/ui/styles.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
02

Use the components anywhere

// app/page.tsx — a Server Component
import { Button, Card, CardBody } from "@abbainitiative/ui";

export default function Page() {
  return (
    <Card variant="elevated">
      <CardBody>
        <Button>Get started</Button>
      </CardBody>
    </Card>
  );
}
03

Rebrand with plain CSS

/* your own stylesheet, loaded after */
:root {
  --abba-primary: #4338ca;
  --abba-primary-hover: #3730a3;
  --abba-radius-md: 3px;
}

Reference

All 27 components.

Each page has live examples, the full prop reference, and the keyboard and screen-reader behaviour that component guarantees.

Add it to your project.

pnpm add @abbainitiative/ui
InstallationThemingAccessibility