Vite Installation

Create Vite Project

First, create a new Vite project with React and TypeScript:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

Install Tailwind CSS

Install tailwindcss and @tailwindcss/vite via npm:

npm install tailwindcss @tailwindcss/vite

Configure TypeScript

Edit tsconfig.json file

The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json file:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": { 
    "baseUrl": ".", 
    "paths": { 
      "@/*": ["./src/*"] 
    } 
  } 
}

Edit tsconfig.app.json file

Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:

{
  "compilerOptions": {
    // ...
    "baseUrl": ".", 
    "paths": { 
      "@/*": [ 
        "./src/*"
      ] 
    } 
    // ...
  }
}

Update vite.config.ts

Add the following code to the vite.config.ts so your app can resolve paths without error:

npm install -D @types/node

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()], 
  resolve: { 
    alias: { 
      "@": path.resolve(__dirname, "./src"), 
    }, 
  }, 
})

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 Vite with React
• 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 src/components/ui/ directory structure for components
• Utils Setup: Generate src/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 Vite React application:

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

function App() {
  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">
              Vite Ready
            </Badge>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

export default App;

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