Laravel Tabs Component

Free · MIT

Tabbed interface for organizing content into switchable panels with icons, badges, and disabled states.

A Tabs built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::tabs>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::tabs :tabs="[
    ['name' => 'general', 'label' => 'General'],
    ['name' => 'security', 'label' => 'Security'],
]">
    <x-aura::tabs.tab name="general">
        General settings content here.
    </x-aura::tabs.tab>

    <x-aura::tabs.tab name="security">
        Security settings content here.
    </x-aura::tabs.tab>
</x-aura::tabs>

See the full API, props and live examples in the Tabs documentation.

Overview

The Tabs component organizes content into multiple panels, each accessible via a tab button. Only one panel is visible at a time. Tabs support icons, notification badges, disabled states, and multiple visual variants. Built with Alpine.js for instant client-side switching without page reloads.

Props

Tabs (root)

Prop	Type	Default	Description
`tabs`	`array`	`[]`	Array of tab definitions. Each item: `['name' => '', 'label' => '', 'icon' => '', 'badge' => '', 'disabled' => false]`.
`variant`	`string`	`'default'`	Visual style: `default`, `pills`, `bordered`, `vertical`.
`defaultTab`	`string\|null`	`null`	Name of the initially active tab. Defaults to the first tab.

Tab Definition Keys

Key	Type	Required	Description
`name`	`string`	Yes	Unique identifier, must match the `name` prop on the corresponding `tabs.tab` panel.
`label`	`string`	No	Display text for the tab button. Falls back to `name` if omitted.
`icon`	`string`	No	Heroicon name displayed before the label.
`badge`	`string\|int`	No	Badge text or count displayed after the label.
`disabled`	`bool`	No	Disable the tab, preventing selection.

Tabs Tab (panel)

Prop	Type	Default	Description
`name`	`string`	`''`	Must match the `name` key in the parent's `tabs` array.

Slots

Slot	Component	Description
default	`tabs`	Contains `tabs.tab` panel children.
default	`tabs.tab`	The panel content displayed when this tab is active.

See more examples and every variant in the Tabs documentation.

Laravel-native

No JavaScript framework. Pure Blade, Livewire & Alpine.

Dark mode & themeable

Tailwind 4 CSS variables and a visual Theme Studio.

Accessible

WCAG 2.1 AA-minded, keyboard and ARIA support.

Related components

Radio

A radio button input component with label and description support, designed for use individually or within a radio group.