Installation

Laravel

Install and configure Auralix UI for Laravel.

Create project

Start by creating a new Laravel project:

bash

composer create-project laravel/laravel my-app

Add Components

Install the Auralix UI package and its dependencies:

bash

npm install auralix-ui

Configure

Import the Auralix UI styles in your resources/css/app.css file.

For Tailwind CSS v4.0+

css

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

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

For Tailwind CSS v3

Update your tailwind.config.js:

javascript

export default {
    content: [
      "./resources/**/*.blade.php",
      "./resources/**/*.js",
      "./resources/**/*.vue",
      "./node_modules/auralix-ui/**/*.{js,mjs}",
    ],
    // ...
};

Configure path aliases

Add the following to your tsconfig.json file:

tsconfig.json

json

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

Add utilities

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

resources/js/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

If using React with Inertia.js:

resources/js/Pages/Welcome.tsx

tsx

import { Button } from "auralix-ui";

export default function Welcome() {
    return (
        <Button>Click me</Button>
    );
}

← Vite

Install and configure Vite

CDN →

Use via CDN