BETA
Installation Vite

Vite

Create project

Start by creating a new Vite project:

npm create vite@latest

Add tailwindcss

Configure Tailwind CSS: Setup Tailwind CSS

TypeScript configuration

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 and tsconfig.app.json files:

{
  "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

Run the following command to install the @types/node package:

# (so you can import "path" without error)
npm i -D @types/node

Then, add the following code to the vite.config.ts so your app can resolve paths without errors:

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

Setup

Run the init command to setup uilabs in your project:

npx uilabs-cli init

Configuration

You will be asked a few questions to configure uilabs.config.json:

? Would you like to use TypeScript? › no / yes (default)
? Configure the import alias for components: › @/components
? Would you like to install @uilabs/utils package? › no / yes (default)
? Are you using React Server Components? › no / yes (default)

Add components

You can now start adding components to your project.

npx uilabs-cli add [component-id]

The command above will add the component to your project in the directory you specified during the initialization.

NextManual