Installation

Add Aidash Components to a Next.js, Vite, Remix, or Astro project. This guide walks through the five steps you need — install the package, add its peer dependencies, add the design tokens, wire up your root layout, and drop in your first component.

Framework support

Choose your framework to see any framework-specific notes. Everything else on this page is framework-agnostic.

Next.js

App Router · Turbopack

Vite

React 18/19 + Vite 5

Remix

v2 stable

Astro

Islands + React integration

Requirements

Confirm your toolchain matches these versions before installing.

Dependency	Version	Status
Node.js	≥ 18.17	Required
React	≥ 18.0	Required
Tailwind CSS	≥ 4.0	Required
Framer Motion	≥ 11.0	Required
TypeScript	≥ 5.0	Recommended

Setup

Five steps. Copy each block into your project and you're done.

Install the package

Pick your package manager. Aidash Components has zero peer-dependency surprises — the command below installs the library plus its optional install-time deps.

$ pnpm add @aidash/components

Install peer dependencies

If your app doesn't already have them, add React, Tailwind CSS v4, and Framer Motion. These are the three primitives every Aidash component builds on.

Terminal

bash

pnpm add react react-dom tailwindcss@^4 framer-motion

Add the design tokens

Aidash uses Tailwind CSS v4's CSS-first configuration. Paste this into your global stylesheet — usually app/globals.css for Next.js or src/index.css for Vite.

app/globals.css

css

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  /* Brand — Aidash blue (#198CFF) */
  --color-brand-500: oklch(0.62 0.20 255);
  --color-brand-600: oklch(0.54 0.20 255);

  /* Typography */
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Radius */
  --radius-md: 6px;
  --radius-lg: 8px;
}

: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);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --muted:      oklch(0.22 0 0);
  --muted-foreground: oklch(0.68 0 0);
  --border:     oklch(0.26 0 0);
}

Full token set

This is the minimum. See Design tokens for the complete vocabulary — every scale, every semantic pair, every dark-mode value.

Wire up your root layout

Import the stylesheet from your app entry point so the tokens are available everywhere.

app/layout.tsx

tsx

import "./globals.css";

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

Import your first component

You're ready. Drop a component into any page or route.

app/page.tsx

tsx

import { AidashButton } from "@/components/aidash/button";

export default function Page() {
  return (
    <main className="p-8">
      <AidashButton variant="primary" size="md">
        Get started
      </AidashButton>
    </main>
  );
}

Framework notes

The setup above is the same everywhere. These are the only per-framework differences.

Next.js

Works with both the App Router and the Pages Router. Wire Tailwind v4 through @tailwindcss/postcss. Server Components are the default in the App Router, so any file that renders an interactive Aidash component needs a "use client" directive at the top — the components rely on hooks and Framer Motion.

Vite

Add the official Tailwind plugin instead of a PostCSS config, then import your stylesheet from src/main.tsx.

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Remix

Remix loads CSS through the links export rather than a bare import, so register the stylesheet in app/root.tsx.

app/root.tsx

tsx

import type { LinksFunction } from "@remix-run/node";
import styles from "./globals.css?url";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
];

Astro

Astro ships static HTML by default, so React needs the official integration and each interactive component needs a client directive — for example <AidashButton client:load />. Without one, the component renders but never hydrates.

astro.config.mjs

import { defineConfig } from "astro/config";
import react from "@astrojs/react";

export default defineConfig({
  integrations: [react()],
});

Notes

A couple of things worth knowing.

Dark mode

Aidash Components ships in dark mode too. Toggle by adding a class="dark" on <html>. See the Dark mode guide.

Framework-agnostic

The package is a plain React library — nothing Next.js-specific. Use it inside Vite, Remix, Astro, Gatsby, or any React SSR/SPA setup.

Next steps

Where to go once your project builds.

Installation

Framework support

Next.js

Vite

Remix

Astro

Requirements

Setup

Install the package

Install peer dependencies

Add the design tokens

Wire up your root layout

Import your first component

Framework notes

Next.js

Vite

Remix

Astro

Notes

Next steps

Foundation

Components

Quick start