Getting Started with Aura UI Components

Why Aura UI?

Building user interfaces in Laravel has traditionally meant choosing between writing everything from scratch or pulling in a heavy JavaScript framework. Aura UI offers a third path: a comprehensive Blade component library that gives you beautiful, accessible UI out of the box while keeping you in the Laravel ecosystem.

With 45+ components, dark mode support, and a cohesive "Vibrant Depth" design language, Aura UI lets you focus on your application logic instead of pixel-pushing.

Installation

Getting started takes less than a minute. Require the package via Composer:

composer require bluestarsystem/aura-ui

Then publish the assets:

php artisan aura:install

This publishes the CSS files to your resources/css/vendor/aura-ui/ directory and registers the component prefix automatically.

Your First Component

Every Aura UI component uses the <x-aura::*> prefix. Let's start with a simple button:

<x-aura::button>
    Click me
</x-aura::button>

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

<x-aura::button variant="outline" icon="arrow-right" icon-position="right">
    Learn More
</x-aura::button>

Buttons support multiple variants (primary, secondary, outline, ghost, danger), sizes (sm, md, lg), icons, loading states, and can render as links with the href attribute.

Building a Card Layout

Cards are one of the most versatile components. Here is a typical feature card:

<x-aura::card>
    <x-aura::card.header>
        <x-aura::badge variant="success">New</x-aura::badge>
        <h3 class="text-lg font-semibold">Dashboard Analytics</h3>
    </x-aura::card.header>
    <x-aura::card.body>
        <p>Track your application metrics with real-time charts and customizable widgets.</p>
    </x-aura::card.body>
    <x-aura::card.footer>
        <x-aura::button variant="primary" size="sm">View Demo</x-aura::button>
    </x-aura::card.footer>
</x-aura::card>

The card component handles padding, borders, rounded corners, dark mode colors, and the subtle shadow that is part of the Vibrant Depth design language.

Composing a Form

Forms are where Aura UI really shines. Instead of writing repetitive markup, you get clean, accessible form elements:

<form method="POST" action="/contact">
    @csrf
    <div class="space-y-4">
        <x-aura::input
            label="Full Name"
            name="name"
            placeholder="John Doe"
            required
        />
        <x-aura::input
            label="Email"
            name="email"
            type="email"
            placeholder="[email protected]"
            required
        />
        <x-aura::textarea
            label="Message"
            name="message"
            rows="4"
            placeholder="Tell us about your project..."
        />
        <x-aura::button type="submit" variant="primary">
            Send Message
        </x-aura::button>
    </div>
</form>

Each input component automatically handles labels, error messages from Laravel validation, help text, and proper aria attributes for accessibility.

What's Next?

This is just the surface. Aura UI includes components for navigation (navbar, sidebar, breadcrumbs), feedback (alerts, toasts, modals), data display (badges, stats cards, avatars), and much more.

Explore the full component library in the documentation or try components live in the playground. If you need advanced components like DataTable, charts, or kanban boards, check out Aura UI Pro.