Aarogya
Step-by-Step Guide

Installation

Complete set of instructions to bootstrap your Next.js project with Aarogya's Tailwind v4 design system.

CLI Installation

The easiest way to get started is using our CLI. It will automatically configure your project, install dependencies, and setup Tailwind v4.

$

npx aarogya-ui@latest init

Tailwind v4 Setup

Aarogya is built on the lightning-fast Tailwind v4 engine. Ensure your globals.css imports the necessary CSS variables and design tokens.

globals.css Setup
@import "tailwindcss";
@import "./tokens.css";

/* Add your base layers here */
@layer base {
  :root {
    --background: hwb(30 98% 1%);
    --foreground: hwb(0 10% 90%);
  }
}

Verification

Once installed, try importing the component below in your page.tsx to verify that everything is working.

page.tsx
import { Button } from "@/components/ui/button";

export default function Page() {
  return (
    <Button variant="primary">
      Hello Aarogya!
    </Button>
  );
}

Previous

Introduction

Next Up

Theming