NOCTA UI

React Router Installation

Step-by-step guide to install and configure Nocta UI with React Router 7

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

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

On this page

Create React Router Project
Install Nocta UI
Add Components
Usage