Quick start

From a fresh Next.js scaffold to a working Aidash button in about ten minutes. Follow the steps in order — each one leaves your app in a runnable state.

Prerequisites

You'll need Node.js 18.17 or newer, a package manager (pnpm/npm/yarn/bun), and a React project. If you're starting from scratch: pnpm dlx create-next-app@latest.

Five steps

Install, add the tokens, wire up the layout, drop in a component, then compose a few together.

Install the package

Aidash Components installs like any other React library. Pick whichever package manager your project uses.

Terminal

bash

pnpm add @aidash/components

Add the design tokens

Copy the token block into your global stylesheet. This is the vocabulary every component references.

app/globals.css

css

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.62 0.20 255);
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --muted:      oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border:     oklch(0.92 0 0);
}

Info

For the full token vocabulary, see Design tokens.

Wire up the root layout

Import the stylesheet so the tokens are available to every route.

app/layout.tsx

tsx

import "./globals.css";

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

Use your first component

Import AidashButton and render it. You should see the same button on the right.

tsx

1import { AidashButton } from "@/components/aidash/button";2 3export default function Page() {4  return (5    <main className="p-8">6      <AidashButton variant="primary" size="md">7        Get started8      </AidashButton>9    </main>10  );11}

Compose multiple components

Every component is designed to compose with every other. Here's a login card built from button, input, and card in six lines.

components/login-card.tsx

tsx

import { AidashButton } from "@/components/aidash/button";
import { AidashInput } from "@/components/aidash/input";
import { AidashCard } from "@/components/aidash/card";

export default function LoginCard() {
  return (
    <AidashCard className="max-w-sm p-6 space-y-4">
      <h2 className="text-lg font-semibold">Sign in</h2>
      <AidashInput label="Email" type="email" />
      <AidashInput label="Password" type="password" />
      <AidashButton fullWidth>Continue</AidashButton>
    </AidashCard>
  );
}

What next

A few paths from here, depending on how you like to learn.