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

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

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