Framework guides

Vite

Install and configure Auralix UI for Vite.

Create project

Start by creating a new React project using Vite:

bash

npm create vite@latest my-app -- --template react-ts

Add Components

Install the Auralix UI package and its dependencies:

bash

npm install auralix-ui

Configure

Import the styles and add the source directive to your src/index.css file:

css

@import "tailwindcss";
@import "auralix-ui/styles.css";

@source "../../node_modules/auralix-ui/src";

Configure path aliases

Add the following to your tsconfig.json file:

tsconfig.json

json

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

Add utilities

Create a src/lib/utils.ts file with the following content:

src/lib/utils.ts

tsx

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Usage

You can then import components like this:

src/App.tsx

tsx

import { Button } from "auralix-ui";

function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

export default App

← NextJS

Install and configure Next.js

Laravel →

Install and configure Laravel