Nordstar

Installation

Nordstar ships as a single npm package with two CSS entry points — one for Tailwind CSS v4 consumers, one for everyone else. Pick the path that matches your setup.

Prerequisites

  • Node — 24.x (see the repository's .nvmrc).
  • React — 19 or later. Nordstar uses Server Components and the React 19 compiler-friendly APIs.

Install the package

pnpm add @nordcom/nordstar

Wire up the styles

Tailwind v4 users

Add Nordstar's import after Tailwind, then register its compiled components as a source so Tailwind emits their utility classes:

@import "tailwindcss";
@import "@nordcom/nordstar";

/* Tailwind v4 skips node_modules during automatic class detection, so opt
   Nordstar's compiled components in explicitly. The path is relative to this
   stylesheet — adjust the leading `../` to match where it lives. */
@source "../node_modules/@nordcom/nordstar/dist";

Nordstar's tokens become Tailwind utilities (bg-primary, font-heading, etc.), and the @source line ensures the component classes are generated. Without it Tailwind never scans Nordstar (it lives in node_modules, which Tailwind ignores by default) and the components render unstyled.

Non-Tailwind users

Import the precompiled stylesheet directly:

@import "@nordcom/nordstar/styles.css";

This bundle includes everything Nordstar's components need at runtime, no Tailwind required. The trade-off is bundle size (~50% larger than the Tailwind path) — fine for prototypes and small apps, less ideal for production.

Provider setup

Wrap your app in <NordstarProvider>. Most apps do this once at the root layout:

// app/layout.tsx
import { NordstarProvider } from '@nordcom/nordstar';
import '@/styles/globals.css';

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

The provider injects token defaults at runtime and exposes them to descendants. Custom theme overrides (colors, fonts) go on the provider's theme prop — see the Theme guide for the shape.

Per-component packages

Verify

A minimal sanity check — render a <Button> inside a route:

import { Button } from '@nordcom/nordstar';

export default function Home() {
    return <Button color="primary">It works</Button>;
}

If the button renders styled (rounded corners, primary color, uppercase Heading-styled label), the install is good. If you see an unstyled button, the most common cause on the Tailwind path is a missing @source line (see above) — without it Tailwind never generates Nordstar's classes. Otherwise, re-check that the CSS import isn't applied after a rule that resets it.

Next