Skip to content

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 is fully accessible, supports dark mode out of the box, and integrates seamlessly with Livewire's wire:model directive.

<!-- 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

45+ 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.

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.

Accessible by Default

Components follow WAI-ARIA guidelines. Proper roles, keyboard navigation, focus management, and screen reader support are built into every component.

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

Dependency Version
PHP 8.3+
Laravel 12.0+
Tailwind CSS 4.0+
Alpine.js 3.0+
Livewire 3.6+ (optional, required for Pro interactive components)

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.

Free Package (MIT License)

26 components organized into six categories:

Category Components
Primitives Button, Icon, Spinner, Skeleton
Feedback Alert, Badge, Empty State, Progress, Tooltip
Layout Card, Card.Title, Card.Description, Modal
Navigation Breadcrumbs, Dropdown, Dropdown.Item, Dropdown.Separator, Pagination
Data Display Avatar, Avatar.Group, Description List, Description List.Item, Stats Card
Form Layout Form, Form.Section, Form.Actions, Input, Select, Textarea, Checkbox, Radio, Radio Group, Toggle

Pro Package (Proprietary License)

20 additional components plus 5 Livewire traits:

Category Components
Advanced Forms Autocomplete, Color Picker, Date Picker, Time Picker, File Upload, OTP Input, Slider, Tags Input
Navigation Sidebar, Sidebar.Brand, Sidebar.Section, Sidebar.Item, Sidebar.SubItem, Tabs, Tabs.Tab, Steps, Steps.Step, Command Palette
Interactive Accordion, Calendar, Chart, Confirmation Dialog, Editor, Kanban, Toasts, Tree
Livewire Trait Purpose
WithAuraDataTable Sortable, searchable, paginated data tables
WithAuraFilters Filter UI with text, select, date range, and boolean filters
WithAuraBulkActions Checkbox selection and bulk operations
WithAuraForm Form state management, validation, and submission
WithAuraInlineEdit Click-to-edit cells in tables

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