Skip to content

[UI] Modernize Views with Better Tailwind Components #10

@devalade

Description

@devalade

Description

The current generated views are functional but very basic. Upgrade to modern, polished UI components.

Current Issues

  • Plain table with no hover states or zebra striping
  • No card layouts for forms
  • No responsive mobile design
  • Basic form inputs without floating labels or validation styling
  • No toast notifications (just session flash)

Proposed Improvements

  • Card-based layouts for create/edit forms
  • Better tables: Zebra striping, row hover, sticky headers
  • Form inputs: Floating labels, inline validation errors, helper text
  • Toast notifications: Auto-dismissible success/error toasts
  • Breadcrumbs: Auto-generated breadcrumb navigation
  • Responsive: Collapsible sidebar, mobile-optimized table (card view on small screens)
  • Dark mode support: dark: Tailwind variants
  • Empty states: Illustrations and clear CTAs
  • Loading states: Skeleton screens for table rows

Example Form Input

<div class="space-y-1">
    <label for="title" class="text-sm font-medium text-gray-700 dark:text-gray-300">
        Title
    </label>
    <input 
        wire:model="title" 
        id="title"
        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-600"
        :class="{ 'border-red-500': $errors->has('title') }"
    />
    @error('title') 
        <p class="text-sm text-red-600">{{ $message }}</p> 
    @enderror
</div>

Inspiration

  • Laravel Nova
  • Filament Admin Panel
  • Tailwind UI

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions