Documentation

AuraAI Template

Everything you need to customize, extend, and ship this template as your own product.

Next.js 16React 19Tailwind CSS v4Three.jsTypeScript

Quick Start

Requires Node.js 22+. Earlier versions break Tailwind v4's native bindings on Apple Silicon.

Install & run

npm install
npm run dev
# → http://localhost:3000

Production build

npm run build
npm start

Project Structure

src/
├── app/
│   ├── (marketing)/        # Landing, pricing, docs
│   ├── (auth)/             # Sign in, sign up, forgot password
│   ├── (dashboard)/        # Dashboard, chat, image gen, settings
│   ├── not-found.tsx
│   ├── layout.tsx          # Root layout (dark mode default)
│   └── globals.css         # Design tokens + Tailwind
│
├── components/
│   ├── ui/                 # shadcn/ui primitives
│   ├── marketing/          # Navbar, hero, features, footer …
│   ├── dashboard/          # Sidebar, header, stats cards …
│   ├── chat/               # Chat sidebar, messages, input
│   ├── image-gen/          # Prompt panel, image grid
│   ├── three/              # hero-orb.tsx, particle-field.tsx
│   └── shared/             # Logo, ThemeToggle
│
└── lib/
    ├── utils.ts            # cn() helper
    └── mock-data.ts        # All placeholder content

Customization

1 — Rename the product

Do a global find-and-replace for AuraAI across the project. Key files:

src/app/layout.tsx — Page title + meta description
src/components/shared/logo.tsx — Logo text
src/components/marketing/footer.tsx — Footer copyright
src/components/marketing/hero.tsx — Hero body copy

2 — Change the color scheme

All colors are CSS variables in src/app/globals.css. Change --primary in both :root and .dark to rebrand:

.dark {
  --primary: oklch(0.65 0.25 293);  /* violet (default) */
}

/* Hue reference:
   25  = red/orange
   160 = teal/green
   220 = blue
   293 = violet (default)
   340 = pink/rose
*/

Also update the orb colors in src/components/three/hero-orb.tsx to match your new brand color.

3 — Change the logo

Edit src/components/shared/logo.tsx. Swap the Lucide icon or replace it with an <Image> tag pointing to a file in public/.

4 — Switch default theme

Dark mode is set by className="dark" on the <html> element in src/app/layout.tsx. Remove it to default to light mode. The theme toggle button still works either way.

5 — Change the font

The template uses Geist via next/font/google. Swap it for any Google Font in src/app/layout.tsx — the --font-sans CSS variable propagates everywhere automatically.

Mock Data

All placeholder content lives in src/lib/mock-data.ts. Edit any export to update what appears in the UI:

Export	Appears in
`mockUser`	Sidebar avatar, settings page
`mockStats`	Dashboard stat cards
`mockActivity`	Dashboard recent activity feed
`mockUsageData`	Dashboard bar chart
`mockChatHistory`	Chat sidebar history list
`mockMessages`	Chat conversation
`mockImages`	Image generator grid
`mockModels`	Chat model selector
`mockImageModels`	Image gen model selector
`mockPlans`	Pricing cards
`mockFaqs`	FAQ accordion
`mockTestimonials`	Testimonials section

Pricing plans

Find mockPlans in the same file. Set popular: true on whichever tier you want highlighted. The annual/monthly toggle works automatically off the price.monthly and price.annual values.

Adding a Dashboard Page

1 — Create the file

// src/app/(dashboard)/analytics/page.tsx
import { DashboardHeader } from "@/components/dashboard/header";

export default function AnalyticsPage() {
  return (
    <>
      <DashboardHeader title="Analytics" description="Your usage insights" />
      <div className="flex-1 overflow-auto p-6">
        <div className="mx-auto max-w-6xl">
          {/* content here */}
        </div>
      </div>
    </>
  );
}

2 — Add it to the sidebar

// src/components/dashboard/sidebar.tsx
import { BarChart2 } from "lucide-react";

const navItems = [
  { label: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
  { label: "Chat",      href: "/chat",      icon: MessageSquare },
  { label: "Analytics", href: "/analytics", icon: BarChart2 },  // ← add this
  { label: "Image Gen", href: "/image",     icon: Image },
  { label: "Settings",  href: "/settings",  icon: Settings },
];

Browse all available icons at lucide.dev.

3D Animations

Hero orb — `src/components/three/hero-orb.tsx`

// Distortion: 0 = perfect sphere, 1 = very blobby
<MeshDistortMaterial distort={0.45} speed={2.2} />

// Float behavior
<Float speed={1.8} floatIntensity={0.6} rotationIntensity={0.25}>

// Disable: remove <HeroOrb /> from hero.tsx
// and collapse the layout back to single-column

Dashboard particle field — `src/components/three/particle-field.tsx`

// Particle count — lower = better perf
<Particles count={150} />   // default 280

// Color & opacity
<pointsMaterial color="#7c3aed" opacity={0.5} />

// Connection lines opacity
<lineBasicMaterial opacity={0.12} />

// Disable: remove <ParticleBackground />
// from src/app/(dashboard)/layout.tsx

Connecting Real Services

Authentication — Clerk

npm install @clerk/nextjs

Add your keys to .env.local, wrap the root layout with <ClerkProvider>, replace sign-in/sign-up pages with Clerk's components, and add clerkMiddleware() to src/middleware.ts to protect dashboard routes.

Payments — Stripe

npm install stripe @stripe/stripe-js

Create a /api/checkout route handler to generate Checkout sessions and wire the pricing CTAs to call it. Add a /api/webhooks/stripe handler to manage subscription lifecycle events.

AI Chat — Vercel AI SDK + OpenAI

npm install ai openai

// src/app/api/chat/route.ts
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({ model: openai("gpt-4o"), messages });
  return result.toDataStreamResponse();
}

In src/components/chat/chat-input.tsx, replace the mock setTimeout with a useChat() hook from the AI SDK.

AI Images — OpenAI DALL·E

npm install openai

// src/app/api/image/route.ts
import OpenAI from "openai";
const client = new OpenAI();

export async function POST(req: Request) {
  const { prompt } = await req.json();
  const res = await client.images.generate({
    model: "dall-e-3", prompt, size: "1024x1024",
  });
  return Response.json({ url: res.data[0].url });
}

Database — Supabase

npm install @supabase/supabase-js

Use for storing chat history, user profiles, usage metrics, and generated image metadata. Supabase has a generous free tier and pairs well with Next.js.

Environment Variables

Create a .env.local file in the project root (git-ignored):

# Auth (Clerk)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...

# Payments (Stripe)
STRIPE_SECRET_KEY=sk_live_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...

# AI providers
OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...

# Database
DATABASE_URL=postgresql://...
NEXT_PUBLIC_SUPABASE_URL=https://...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...

Deployment

Vercel (recommended)

npx vercel

Set environment variables in the Vercel dashboard under Settings → Environment Variables.

Other platforms

Any platform that supports Node.js 22+ works: Railway, Render, Fly.io, AWS App Runner, DigitalOcean App Platform. Set NODE_VERSION=22in the platform's environment settings.

Need help?

Reach out via the platform you purchased this template on. Include your Node.js version (node --version) and a description of what you're trying to do.