Installation

Two steps: add the package, then import the stylesheet once at the root of your application.

Requirements

• React 18.2 or 19. Both are declared as peer dependencies, so your application decides the version.
• Node 20.11 or newer for the build tooling. The published package itself has no Node requirement at runtime.
• A bundler that understands the exports field — Next.js, Vite, Rspack, Parcel and webpack 5 all do.

1. Install the package

pnpm add @abbainitiative/ui

react and react-dom are peer dependencies and are not installed for you. Radix primitives are regular dependencies and come along automatically.

2. Import the stylesheet

Import it once, as high in the tree as you can. Importing it in a component file works but risks ordering surprises when several components load in different orders.

Next.js App Router

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Vite, Create React App, or any plain React setup

// src/main.tsx
import "@abbainitiative/ui/styles.css";
import "./index.css";

3. Use a component

import { Button, Card, CardBody, Heading, Stack } from "@abbainitiative/ui";

export function Welcome() {
  return (
    <Card variant="elevated">
      <CardBody>
        <Stack gap={4}>
          <Heading level={2}>Everything is wired up</Heading>
          <Button>Continue</Button>
        </Stack>
      </CardBody>
    </Card>
  );
}

Verifying the install

If a button renders as unstyled browser chrome, the stylesheet did not load. The usual causes are:

• The import lives in a file that is never reached — check it is in the root layout, not a nested one that only some routes use.
• A CSS pipeline that strips imports from node_modules. Some hand-rolled webpack configs exclude node_modules from their CSS rule.
• A test environment with no CSS handling. That is expected — jsdom does not apply stylesheets, and your component tests do not need it to.

TypeScript

Declarations are published alongside the JavaScript, and each subpath resolves its own types. No @types package is needed, and no paths mapping is required — but your tsconfig.json must use "moduleResolution": "bundler" (or "node16"/"nodenext") for the exports field to be honoured. The legacy "node" resolution ignores exports entirely and will fail to find the subpaths.

Next: the Next.js guide for App Router specifics, or the React guide for everything else.