• What is Aura UI?
• Key Features
  • 89 Components
  • Vibrant Depth Design
  • Dark Mode Built In
  • Livewire Integration
  • Accessibility Testing
  • Tailwind CSS 4 Native
• Requirements
• Quick Start
  • 1. Install the package
  • 2. Run the installer
  • 3. Import the CSS
  • 4. Use components in your Blade templates
• Free vs Pro
  • Free Package (MIT License)
  • Pro Package (Proprietary License)
  • Choosing Your Edition
• Project Structure
• Next Steps

What is Aura UI?#

Aura UI is a comprehensive Blade component library for Laravel applications. It provides a carefully crafted set of UI components that follow the Vibrant Depth design language -- combining gradients, soft glows, glass morphism effects, and micro-animations to create interfaces that feel modern and alive.

Built on top of Laravel 12, Tailwind CSS 4, and Alpine.js 3, Aura UI offers both anonymous Blade components and Livewire-powered interactive components. Every component supports dark mode out of the box and integrates seamlessly with Livewire's wire:model directive. Colour contrast is tested against WCAG 2.1 AA/UI in CI for every solid-background and border colour Aura renders -- see Accessibility for exactly what that covers, and what it does not.

<!-- It's as simple as this -->
<x-aura::card>
    <x-aura::card.title>Welcome to Aura UI</x-aura::card.title>
    <x-aura::card.description>
        Beautiful components for your Laravel application.
    </x-aura::card.description>

    <x-aura::button variant="primary">
        Get Started
    </x-aura::button>
</x-aura::card>

Key Features#

89 Components#

From basic primitives like buttons and inputs to advanced interactive components like data tables, command palettes, and kanban boards. Every component you need to build a complete application -- 64 of them in the MIT-licensed Free package.

Vibrant Depth Design#

A unique design language that goes beyond flat design. Subtle gradients, layered shadows, glass morphism panels, and purposeful micro-animations create depth and visual hierarchy without feeling heavy.

Dark Mode Built In#

Every component ships with full dark mode support. Toggle between light and dark themes using a simple Alpine.js data attribute. No extra configuration needed.

Livewire Integration#

All form components support wire:model out of the box. Pro components include dedicated Livewire traits for data tables, filters, bulk actions, inline editing, and form handling.

Accessibility Testing#

Colour contrast is checked against WCAG 2.1 AA (text) and 3:1 (borders, bars, toggle knobs) in both light and dark themes, in CI, on every commit -- 145 colour pairs across the Free and Pro packages. A number of components (inputs, modal, dropdown, toasts, command palette) carry ARIA roles and attributes verified by unit tests. There is no systematic keyboard-navigation or screen-reader audit of the library. See the Accessibility page for the full picture.

Tailwind CSS 4 Native#

Built specifically for Tailwind CSS 4. Uses CSS custom properties for theming, @theme configuration for design tokens, and leverages Tailwind's newest features.

Requirements#

Quick Start#

1. Install the package#

composer require bluestarsystem/aura-ui

2. Run the installer#

php artisan aura:install

This publishes the configuration file and CSS assets to your project.

3. Import the CSS#

Add the Aura UI stylesheet to your resources/css/app.css:

@import 'tailwindcss';
@import './vendor/aura-ui/aura.css';

4. Use components in your Blade templates#

<x-aura::button variant="primary" size="lg">
    Click me
</x-aura::button>

<x-aura::input
    label="Email address"
    type="email"
    placeholder="[email protected]"
/>

<x-aura::alert variant="success">
    Your changes have been saved.
</x-aura::alert>

That's it. You're ready to build.

Free vs Pro#

Aura UI is available in two editions. The Free package provides a solid foundation of essential components, while Pro adds advanced interactive components and Livewire integration traits.

Where the component lists live. The authoritative, always-current catalogue is /components, backed by the machine-readable registry at /r/registry.json. This page deliberately does not duplicate the full list -- a copy would drift out of date at the next release.

Free Package (MIT License)#

MIT-licensed, installed with a single composer require. The free package alone covers a complete application interface, not just the basics — see all components for the current list and count:

Note that the date picker, file upload, autocomplete, chart, calendar and rich editor are all in the Free tier -- you do not need a licence for them.

Pro Package (Proprietary License)#

25 additional components plus 6 Livewire traits, aimed at admin panels and data-heavy applications:

Choosing Your Edition#

• Free is perfect for personal projects, prototypes, and applications that need a clean component foundation.
• Pro is ideal for admin panels, dashboards, SaaS applications, and any project that needs advanced data management components.

Pro requires Free as a dependency -- both packages use the same <x-aura::*> prefix, so upgrading is seamless.

Project Structure#

After installation, Aura UI integrates into your Laravel project like this:

your-project/
├── config/
│   └── aura-ui.php                    # Configuration file
├── resources/
│   └── css/
│       ├── app.css                    # Your app CSS (imports Aura CSS)
│       └── vendor/
│           ├── aura-ui/
│           │   ├── aura.css           # Main entry point (Free)
│           │   ├── compat/            # Legacy variable compatibility
│           │   ├── base/              # Dark mode, keyframes, glass
│           │   └── components/        # Residual component CSS
│           └── aura-ui-pro/
│               └── aura-pro.css       # Pro entry point
├── vendor/
│   └── bluestarsystem/
│       ├── aura-ui/                   # Free package
│       └── aura-ui-pro/              # Pro package (if installed)

You only need to import the entry points (aura.css and aura-pro.css) -- they handle all internal imports automatically.

Next Steps#

• Installation -- Detailed installation instructions for Free and Pro
• Configuration -- Customize component behavior and defaults
• Theming -- Adapt the Vibrant Depth design to your brand
• Dark Mode -- Set up light/dark theme switching
• Upgrading -- Keep your installation up to date