DEV Community

Juri Montico
Juri Montico

Posted on

Building a "Vibrant Depth" Design Language for Laravel Components with Tailwind CSS 4

#laravel #css #opensource #tailwindcss

Every Laravel admin panel looks the same. Gray backgrounds, flat buttons, minimal borders, neutral colors. It works — but it's visually indistinguishable from every other app out there.

While building two SaaS products (BeautyFlow for salon management and Kelvio for restaurants), I needed a shared component library. But I didn't want the same flat/minimal look that dominates the Laravel ecosystem. I wanted visual personality — depth, energy, and warmth — while staying professional.

The result is Aura UI, a Blade component library for Laravel + Livewire with a design language I call "Vibrant Depth."

What is "Vibrant Depth"?

Instead of flat surfaces and neutral grays, Vibrant Depth uses:

  • Gradients instead of solid colors
  • Glow effects on focus and hover states
  • Glass morphism for cards and overlays
  • Micro-animations for feedback and delight
  • Color tokens via Tailwind CSS 4's @theme directive

The goal: interfaces that feel alive and intentional, without crossing into "too much."

Implementation with Tailwind CSS 4

The Token System

Tailwind CSS 4 introduced @theme — a way to define design tokens directly in CSS. This is the foundation of Aura UI's color system:

@theme {
  --color-deep-blue: #0a1628;
  --color-ocean-blue: #1e3a5f;
  --color-tropical-blue: #3b82f6;
  --color-seafoam: #2dd4bf;
  --color-white-foam: #f0f9ff;
}
Enter fullscreen mode Exit fullscreen mode

These tokens are available as Tailwind utilities (bg-deep-blue, text-tropical-blue, etc.) and can be overridden per-project.

Glass Morphism Pattern

The glass morphism effect combines transparency, blur, and subtle borders:

<div class="bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl p-6">
  <!-- Content with frosted glass appearance -->
</div>
Enter fullscreen mode Exit fullscreen mode

This creates a frosted glass look that works beautifully for cards, modals, and overlays — especially in dark mode where it really shines.

Glow Effect on Focus

Instead of the standard ring utility for focus states, Aura UI uses colored box-shadows that create a subtle glow:

<button class="
  bg-gradient-to-r from-tropical-blue to-seafoam
  shadow-md hover:shadow-lg
  focus:shadow-lg focus:shadow-tropical-blue/20
  transition-all duration-200
">
  Save Changes
</button>
Enter fullscreen mode Exit fullscreen mode

The shadow-tropical-blue/20 creates a soft blue glow around the button on focus — much more visually engaging than a simple outline.

Dark Mode with @custom-variant

Tailwind CSS 4 supports @custom-variant for class-based dark mode:

@custom-variant dark (&:where(.dark, .dark *));
Enter fullscreen mode Exit fullscreen mode

This makes all dark: variants work with a .dark class on the root element, giving you programmatic toggle control (vs. media query). Combined with Alpine.js and localStorage, you get a smooth dark mode toggle that remembers user preference.

Building Components for Laravel/Livewire

Aura UI components are anonymous Blade components with Alpine.js for interactivity:

<!-- Using Aura UI components -->
<x-aura::card>
  <x-aura::card-header>
    <h3>User Profile</h3>
  </x-aura::card-header>
  <x-aura::card-body>
    <x-aura::input label="Name" wire:model="name" />
    <x-aura::select label="Role" wire:model="role" :options="$roles" />
  </x-aura::card-body>
  <x-aura::card-footer>
    <x-aura::button variant="primary" wire:click="save">Save</x-aura::button>
  </x-aura::card-footer>
</x-aura::card>
Enter fullscreen mode Exit fullscreen mode

Every component follows the same design tokens, so the visual language stays consistent across your entire app.

The DataTable Trait (Pro)

For the Pro package, I built a Livewire trait system that gives you a full-featured DataTable with minimal code:

use BlueStarSystem\AuraUIPro\Traits\WithAuraDataTable;

class UserList extends Component
{
    use WithAuraDataTable;

    public array $columns = [
        ['key' => 'name', 'label' => 'Name', 'sortable' => true],
        ['key' => 'email', 'label' => 'Email', 'searchable' => true],
        ['key' => 'created_at', 'label' => 'Created', 'sortable' => true],
    ];

    public function query(): Builder
    {
        return User::query();
    }
}
Enter fullscreen mode Exit fullscreen mode

One trait gives you server-side sorting, search, pagination, column visibility toggle, and bulk selection. Additional traits (WithAuraFilters, WithAuraBulkActions, WithAuraForm) can be composed for richer functionality.

What's Included

Free package (26 components, MIT license):

  • Primitives: Button, Badge, Input, Select, Textarea, Checkbox, Toggle, Radio
  • Feedback: Alert, Modal, Notification, Tooltip, ConfirmDialog
  • Layout: Card, Divider, Container
  • Navigation: Tabs, Breadcrumb, Dropdown, Pagination
  • Data Display: Table, Stat, Avatar, EmptyState
  • Form Layout: FieldGroup, FormSection

Pro package (19 additional components):

  • DataTable with server-side sorting, filtering, bulk actions
  • Sidebar, CommandPalette, FileUpload, RichTextEditor
  • Calendar, Timeline, Kanban, StepWizard
  • Charts, TreeView, and more
  • 5 Livewire traits for rapid CRUD development

Testing

The free package has 138 tests. The Pro package has 388 tests. Both run with Pest v3.

Try It

I'd love to hear your thoughts on this design direction. Is there room for visual personality in dev tools, or is flat/minimal the only acceptable style?

Top comments (0)