Getting Started

Add the design system to a Next.js (or any React) app in a few minutes.

1. Install

npm install @aspyn-io/kit @aspyn-io/tokens

Components update centrally via npm. Best for most product teams.

2. Wire up the theme (Tailwind v4)

Both Next.js and Vite are first-class. Import Tailwind, then the Aspyn theme:

/* app/globals.css */
@import "tailwindcss";
@import "@aspyn-io/tokens/theme";

/* If installing @aspyn-io/kit as a package, let Tailwind scan it: */
@source "../node_modules/@aspyn-io/kit/dist";

Components ship with "use client" directives, so they drop into Server Component trees without wrappers. Put TooltipProvider in your root layout.

Not using Tailwind? Import @aspyn-io/tokens/css instead — the raw --as-* variables work with any styling approach.

3. Dark mode (auto by default)

Tokens switch on the .dark class. The recommended default is auto: follow the OS unless the user explicitly chooses. Inline this before paint to avoid a flash:

const stored = localStorage.getItem("theme"); // "light" | "dark" | null = auto
const dark = stored === "dark" ||
  ((!stored || stored === "system") && matchMedia("(prefers-color-scheme: dark)").matches);
document.documentElement.classList.toggle("dark", dark);

4. Use components

import { Button, Card, CardContent } from "@aspyn-io/kit";

export function Example() {
  return (
    <Card>
      <CardContent className="pt-6">
        <Button>Ship it</Button>
      </CardContent>
    </Card>
  );
}

Local development (this repo)

npm install       # once, at the repo root
npm run dev       # builds packages, generates the registry, starts this site
npm run test      # vitest across packages
npm run build     # full production build