React Router Installation

Create React Router Project

First, create a new React Router project:

npx create-react-router@latest my-app
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 React Router 7 and check the framework mode
• 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 app/components/ui/ directory structure for components
• Utils Setup: Generate app/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 React Router 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">
              React Router Ready
            </Badge>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

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