Building a Dashboard with Aura UI Pro

The Admin Dashboard

Every SaaS application, CMS, and internal tool needs an admin dashboard. It is the first screen your users see after logging in, and it sets the tone for the entire experience. With Aura UI Pro, you can build a professional dashboard in a single afternoon.

The Layout

Start with the sidebar layout component:

<x-aura::sidebar-layout>
    <x-aura::sidebar>
        <x-aura::sidebar.brand>
            <img src="/logo.svg" alt="My App" class="h-8" />
        </x-aura::sidebar.brand>

        <x-aura::sidebar.nav>
            <x-aura::sidebar.item icon="home" href="/dashboard" :active="request()->is('dashboard')">
                Dashboard
            </x-aura::sidebar.item>
            <x-aura::sidebar.item icon="users" href="/users">
                Users
            </x-aura::sidebar.item>
            <x-aura::sidebar.item icon="chart-bar" href="/analytics">
                Analytics
            </x-aura::sidebar.item>
            <x-aura::sidebar.item icon="cog" href="/settings">
                Settings
            </x-aura::sidebar.item>
        </x-aura::sidebar.nav>
    </x-aura::sidebar>

    <x-aura::sidebar.content>
        {{-- Dashboard content goes here --}}
    </x-aura::sidebar.content>
</x-aura::sidebar-layout>

The sidebar is fully responsive: it collapses to an off-canvas menu on mobile, supports nested navigation groups, and includes the dark mode toggle.

Stats Overview

The top of a dashboard typically shows key metrics. Aura UI Pro stats cards make this trivial:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <x-aura::stats-card
        label="Total Revenue"
        value="$124,563"
        trend="+14.2%"
        trend-direction="up"
        icon="currency-dollar"
    />
    <x-aura::stats-card
        label="Active Users"
        value="8,492"
        trend="+5.1%"
        trend-direction="up"
        icon="users"
    />
    <x-aura::stats-card
        label="Conversion Rate"
        value="3.24%"
        trend="-0.4%"
        trend-direction="down"
        icon="arrow-trending-up"
    />
    <x-aura::stats-card
        label="Avg. Response Time"
        value="142ms"
        trend="-12ms"
        trend-direction="up"
        icon="clock"
    />
</div>

Each card includes the Vibrant Depth gradient treatment, trend indicators with color-coded arrows, and an icon. They look impressive without any custom CSS.

Charts Section

Below the stats, add a chart for visual data:

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <x-aura::card class="lg:col-span-2">
        <x-aura::card.header>
            <h3 class="font-semibold">Revenue Over Time</h3>
        </x-aura::card.header>
        <x-aura::card.body>
            <livewire:revenue-chart />
        </x-aura::card.body>
    </x-aura::card>

    <x-aura::card>
        <x-aura::card.header>
            <h3 class="font-semibold">Traffic Sources</h3>
        </x-aura::card.header>
        <x-aura::card.body>
            <livewire:traffic-sources-chart />
        </x-aura::card.body>
    </x-aura::card>
</div>

Aura UI Pro chart components wrap Chart.js with theme-aware colors that automatically adapt to dark mode.

Recent Activity Table

Finish the dashboard with a compact data table showing recent activity:

<x-aura::card>
    <x-aura::card.header class="flex items-center justify-between">
        <h3 class="font-semibold">Recent Orders</h3>
        <x-aura::button variant="ghost" size="sm" href="/orders">
            View All
        </x-aura::button>
    </x-aura::card.header>
    <x-aura::card.body class="p-0">
        <livewire:recent-orders-table />
    </x-aura::card.body>
</x-aura::card>

The DataTable component integrates seamlessly inside cards, inheriting the card's padding and styling.

The Result

In less than 100 lines of Blade template code, you have a complete dashboard with navigation, metrics, charts, and data tables. Every component supports dark mode, is responsive, and follows the Vibrant Depth design language for visual consistency.

This is the power of a comprehensive component library: instead of building UI primitives, you build features. Aura UI Pro gives you the building blocks. You assemble them into something your users will love.