Vite

Create a Vite project

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

npm create vite@latest

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

Install Tailwind CSS

npm install npm install 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

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

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

Add components

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

npx 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