Vite

Create a Vite project

Create a new React project using Vite, you can use the following command:

npm create vite@latest

pnpm create vite

yarn create vite

bunx create-vite

Follow the prompts to set up your project. Choose React + Typescript as the framework.

Install Tailwind CSS

npm install npm install tailwindcss @tailwindcss/vite

pnpm add yarn add tailwindcss @tailwindcss/vite

yarn add yarn add tailwindcss @tailwindcss/vite

bun add yarn add tailwindcss @tailwindcss/vite

and now you can replace everything inside src/index.css with the following:

@import "tailwindcss";

once done let's continue with editing tsconfig.json file

Edit tsconfig.json file

Vite's current version splits TypeScript configuration into three files, two requiring edits. Add baseUrl and paths to the compilerOptions section of tsconfig.json and tsconfig.app.json.

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

Edit tsconfig.app.json

Add this code to tsconfig.app.json to resolve paths for your IDE:

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

Update vite.config.ts

Add this code to vite.config.ts to resolve paths without errors:

npm install -D @types/node

pnpm add -D @types/node

yarn add --dev @types/node

bun add --dev @types/node

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite"; 
import path from "path"; 

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

Install HextaUI

To install HextaUI in your Vite project, navigate to your project directory and run:

npm install hextaui@latest

pnpm add hextaui@latest

yarn add hextaui@latest

bun add hextaui@latest

Or you can directly use the npx command to run HextaUI without installing it globally:

Initialize HextaUI

Run the init command to initialize HextaUI in your project:

npx hextaui@latest init

pnpm dlx hextaui@latest init

yarn dlx hextaui@latest init

bun x hextaui@latest init

Add components

You can now start using HextaUI components in your Vite project.

npx hextaui@latest add button

pnpm dlx hextaui@latest add button

yarn dlx hextaui@latest add button

bun x hextaui@latest add button

This command will add Button component to your project. You can simply import the button component from components/ui in your project.

import { Button } from "@/components/ui/button";

function App() {
  return (
    <main>
      <Button>Click Me!</Button>  
    </main>
  );
}

export default App