Basic Tabs

With Icons and Badges

Home content with icon

Disabled Tab

Enabled tab content

Overview

Tabs component with animated decoration background. The active tab has a colored background that smoothly animates between tabs.

Tab panels use scale and opacity transitions for smooth content switching.

Usage


<x-ui.tabs>
    <x-slot:tabs>
        <x-ui.tab-item label="Profile" tab-index="profile" :active="true" :is-button="true" />
        <x-ui.tab-item label="Settings" tab-index="settings" :is-button="true" />
    </x-slot:tabs>
    
    <x-ui.tab-item label="Profile" tab-index="profile" :active="true">
        <div class="p-4 bg-white rounded shadow-md">
            Content for Profile
        </div>
    </x-ui.tab-item>
    
    <x-ui.tab-item label="Settings" tab-index="settings">
        <div class="p-4 bg-white rounded shadow-md">
            Content for Settings
        </div>
    </x-ui.tab-item>
</x-ui.tabs>

Tabs Props

alpine-model - string|null

Alpine.js variable for active tab state

wire-model - string|null

Livewire property for active tab state

TabItem Props

label - string (required)

Tab label text

tab-index - string (required)

Unique identifier for tab (must match between button and content)

active - bool (default: false)

Whether tab is active by default

icon - string|null

FontAwesome icon name

badge - string|null

Badge text to display

disabled - bool (default: false)

Disable the tab

is-button - bool (default: false)

Set to true for tab buttons in the tabs slot. Set to false (or omit) for tab content panels in the main slot.

Features

  • Animated decoration background
  • Smooth scale and opacity transitions
  • Icon and badge support
  • Disabled state
  • Alpine.js integration
  • Livewire integration
  • Dark mode support
  • Accessibility (ARIA attributes)