Aura UI

Aura UI

"Vibrant Depth" UI component library for Laravel 12/13 + Livewire 3/4 + Alpine.js + Tailwind CSS 4.

Aura UI ships 127 production-ready Blade components under the MIT licence — no account, no licence key, no paid tier required to use them. They share one design system: gradients, glow, micro-animations, glass morphism and full dark mode. Where most libraries go flat and minimal, Aura deliberately goes the other way, while staying professional.

Browse every component → · machine-readable index at /r/registry.json

Date picker, time picker, file upload, autocomplete, multiselect, calendar, command palette, QR code, the editor, a Chart.js-backed chart, and European business fields such as the IBAN field and the currency input — all in the free package.

Why Aura

• Breadth, free. Most libraries put the interesting components behind a licence. Here the calendar, the command palette, the date picker and a chart component (line, bar, pie, doughnut, area) are MIT.
• Own the code. php artisan aura:add button copies the component source into your app. Keep Aura as a dependency or walk away with the files — your choice, no lock-in.
• Accessibility is tested, not claimed. 111 colour pairs are checked against the WCAG contrast thresholds in CI, and php artisan aura:doctor --a11y runs the same checks against your Blade templates.
• Built to be read by AI assistants. Every docs page is available as raw Markdown by appending .md to its URL, indexed in llms.txt, plus an MCP server so your assistant can look up real component APIs instead of inventing them.
• 1,233 tests in this package (measured 2026-08-09).

Requirements

• PHP 8.3+
• Laravel 12 or 13
• Tailwind CSS 4

Livewire is optional — the components are anonymous Blade components and work without it.

Installation

composer require bluestarsystem/aura-ui
php artisan aura:install

Import the CSS in your app:

/* resources/css/app.css */
@import "vendor/aura-ui/aura.css";

Publish individually if you prefer:

php artisan vendor:publish --tag=aura-ui-config
php artisan vendor:publish --tag=aura-ui-css
php artisan vendor:publish --tag=aura-ui-views

Quick Start

{{-- Button --}}
<x-aura::button variant="primary" size="lg">Save Changes</x-aura::button>

{{-- Input with label and error --}}
<x-aura::input label="Email" type="email" wire:model="email" error="{{ $errors->first('email') }}" />

{{-- Card with header --}}
<x-aura::card shadow="lg">
    <x-slot:header>
        <x-aura::card.title>Dashboard</x-aura::card.title>
    </x-slot:header>
    Your content here.
</x-aura::card>

{{-- Modal --}}
<x-aura::modal name="confirm-delete" max-width="sm">
    <p>Are you sure?</p>
</x-aura::modal>

{{-- Alert --}}
<x-aura::alert variant="success" dismissible>Operation completed.</x-aura::alert>

Components

The full catalogue, with live previews and props for every component, is at aura-ui.com/components.

It is deliberately not duplicated here: a list in a README goes stale the moment a component is added, and this one did — it advertised a third of what was actually in the box.

Each page is also available as Markdown for humans and machines alike, e.g. /docs/components/button.md.

Own the code

php artisan aura:init                 # prepare the destination and publish the CSS
php artisan aura:add button card      # copy the source into your project
php artisan aura:add table --dry-run  # see what it would write first

Copied components are yours: edit them freely, and drop the dependency if you want to.

Accessibility

php artisan aura:doctor          # setup and component-usage problems
php artisan aura:doctor --a11y   # plus the accessibility checks, on your own views

Components target WCAG 2.1 AA. Contrast is enforced in CI over 111 colour pairs, in light and dark mode, so a theme change cannot quietly push text below the minimum.

Design System

Built on CSS custom properties:

• Colors: 6 semantic palettes (primary, secondary, success, warning, danger, info) + surface scale
• Shadows: 6 elevation levels + coloured glow effects for focus states
• Animations: 14 keyframes with spring easing curves
• Glass morphism: 3 intensity levels (subtle, standard, strong)
• Typography: Inter (sans) + JetBrains Mono (mono)
• Border radius: 6-step scale from 6px to 9999px

Dark Mode

Add .dark to <html>; colours, shadows and glows adapt on their own.

<html class="dark">

Theming

:root {
    --aura-primary-500: #8b5cf6; /* Change primary to violet */
    --aura-radius-md: 12px;      /* Rounder corners */
}

Full guide: Theming · Dark Mode.

Translations

Ships with English and Italian strings; publish aura-ui-lang to add your own.

Playground

Visit /aura/playground in your app to browse every component live:

// config/aura-ui.php
'playground' => [
    'enabled' => env('AURA_PLAYGROUND', true),
],

Testing

composer install
vendor/bin/pest

Links

• Documentation — full docs, live previews, playground
• All components · llms.txt for AI assistants
• Changelog

License

MIT License. See LICENSE for details.

Credits

• Juri Montico — BlueStarSystem