Next.js Installation

Create Next.js Project

First, create a new Next.js project:

npx create-next-app@latest my-app 
  --typescript 
  --eslint 
  --tailwind 
  --app
  --turbopack	 
  --import-alias "@/*"
cd my-app

Install Nocta UI

Initialize Nocta UI in your project. This will automatically install all required dependencies:

npx nocta-ui init

The init command will:

• Framework Detection: Automatically detect that you're using Next.js and determine if you're using App Router or Pages Router
• Tailwind CSS Check: Verify your Tailwind CSS installation and version
• Theme Selection: Present you with theme options (Charcoal, Jade, Copper, Cobalt) to choose your preferred color palette
• Dependencies Installation: Install all required dependencies (tailwind-merge, clsx, class-variance-authority)
• Project Structure: Create the components/ui/ directory structure for components
• Utils Setup: Generate lib/utils.ts with the necessary utility functions
• Theme Configuration: Add your selected theme tokens to either your CSS file (Tailwind v4) or tailwind.config (Tailwind v3)

Add Components

Now you can add specific components that you need:

npx nocta-ui add button
npx nocta-ui add card
npx nocta-ui add badge

Usage

Now you can import and use Nocta UI components in your Next.js application:

import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

export default function Home() {
  return (
    <div className="p-8">
      <Card className="max-w-md">
        <CardHeader>
          <CardTitle>Welcome to Nocta UI</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <Button variant="default">
              Get Started
            </Button>
            <Badge variant="secondary">
              Next.js Ready
            </Badge>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

You're all set! You can now copy component code from the documentation and use it in your Next.js application.