NOCTA UI

Next.js Installation

Step-by-step guide to install and configure Nocta UI with Next.js

Create Next.js Project

First, create a new Next.js project:

Terminal
npx create-next-app@latest my-app \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*"
cd my-app

Install Nocta UI

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

Terminal
npx nocta-ui init

The init command will:

  • Install all required dependencies (tailwind-merge, clsx)
  • Create the components directory structure

Add Components

Now you can add specific components that you need:

Terminal
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:

src/app/page.tsx
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.