NOCTA UI

Vite Installation

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

Create Vite Project

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

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

Install Tailwind CSS

Install and configure Tailwind CSS:

Terminal
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

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:

tsconfig.json
{
  "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:

tsconfig.app.json
{
  "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:

Terminal
npm install -D @types/node
vite.config.ts
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:

Terminal
npx nocta-ui init

The init command will:

  • Install all required dependencies (tailwind-merge, clsx)
  • Create the components directory structure

Add Components

Now you can add specific components that you need:

Terminal
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:

src/App.tsx
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.