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:

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

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! Use the Nocta UI CLI to pull components straight into your Next.js application whenever you need them.

On this page

Create Next.js Project
Install Nocta UI
Add Components
Usage