Think of them as the dividers in a notebook, helping you switch between different sections easily. Whether it's switching between different content areas or settings, Tabs keep everything organized and just a click away.
php artisan spur:add interactives/tabs interactives/tab interactives/tab-panel
If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.
"components": [
'interactives/tabs',
'interactives/tab',
'interactives/tab-panel',
]If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component
<x-spur.tabs>
<x-slot name="tabList">
<x-spur.tab>Products</x-spur.tab>
<x-spur.tab>Orders</x-spur.tab>
<x-spur.tab>Admin Panel</x-spur.tab>
</x-slot>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis consequatur dolor magni placeat reprehenderit repudiandae, sapiente sed temporibus? Corporis, dolore doloremque exercitationem explicabo fuga magnam nulla porro recusandae sequi suscipit.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus earum nesciunt nulla officia omnis quibusdam. Ad architecto beatae cumque delectus exercitationem fuga hic illum impedit nulla officiis, quia reiciendis voluptatem.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto hic ipsum minus officia praesentium, quis rerum? Adipisci animi, beatae doloribus nisi pariatur quaerat rerum veniam vero. Assumenda eligendi quos sunt?</x-spur.tab-panel>
</x-spur.tabs>You can use the color attribute to pass any of the available color.
<x-spur.tabs>
<x-slot name="tabList">
<x-spur.tab color="yellow">Products</x-spur.tab>
<x-spur.tab color="yellow">Orders</x-spur.tab>
<x-spur.tab color="yellow">Admin Panel</x-spur.tab>
</x-slot>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis consequatur dolor magni placeat reprehenderit repudiandae, sapiente sed temporibus? Corporis, dolore doloremque exercitationem explicabo fuga magnam nulla porro recusandae sequi suscipit.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus earum nesciunt nulla officia omnis quibusdam. Ad architecto beatae cumque delectus exercitationem fuga hic illum impedit nulla officiis, quia reiciendis voluptatem.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto hic ipsum minus officia praesentium, quis rerum? Adipisci animi, beatae doloribus nisi pariatur quaerat rerum veniam vero. Assumenda eligendi quos sunt?</x-spur.tab-panel>
</x-spur.tabs><x-spur.tabs line>
<x-slot name="tabList">
<x-spur.tab color="yellow">Products</x-spur.tab>
<x-spur.tab color="yellow">Orders</x-spur.tab>
<x-spur.tab color="yellow">Admin Panel</x-spur.tab>
</x-slot>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis consequatur dolor magni placeat reprehenderit repudiandae, sapiente sed temporibus? Corporis, dolore doloremque exercitationem explicabo fuga magnam nulla porro recusandae sequi suscipit.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus earum nesciunt nulla officia omnis quibusdam. Ad architecto beatae cumque delectus exercitationem fuga hic illum impedit nulla officiis, quia reiciendis voluptatem.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto hic ipsum minus officia praesentium, quis rerum? Adipisci animi, beatae doloribus nisi pariatur quaerat rerum veniam vero. Assumenda eligendi quos sunt?</x-spur.tab-panel>
</x-spur.tabs><x-spur.tabs line fullWidth>
<x-slot name="tabList">
<x-spur.tab color="yellow">Products</x-spur.tab>
<x-spur.tab color="yellow">Orders</x-spur.tab>
<x-spur.tab color="yellow">Admin Panel</x-spur.tab>
</x-slot>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis consequatur dolor magni placeat reprehenderit repudiandae, sapiente sed temporibus? Corporis, dolore doloremque exercitationem explicabo fuga magnam nulla porro recusandae sequi suscipit.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus earum nesciunt nulla officia omnis quibusdam. Ad architecto beatae cumque delectus exercitationem fuga hic illum impedit nulla officiis, quia reiciendis voluptatem.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto hic ipsum minus officia praesentium, quis rerum? Adipisci animi, beatae doloribus nisi pariatur quaerat rerum veniam vero. Assumenda eligendi quos sunt?</x-spur.tab-panel>
</x-spur.tabs><x-spur.tabs>
<x-slot name="tabList">
<x-spur.tab pill>Products</x-spur.tab>
<x-spur.tab pill>Orders</x-spur.tab>
<x-spur.tab pill>Admin Panel</x-spur.tab>
</x-slot>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis consequatur dolor magni placeat reprehenderit repudiandae, sapiente sed temporibus? Corporis, dolore doloremque exercitationem explicabo fuga magnam nulla porro recusandae sequi suscipit.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus earum nesciunt nulla officia omnis quibusdam. Ad architecto beatae cumque delectus exercitationem fuga hic illum impedit nulla officiis, quia reiciendis voluptatem.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto hic ipsum minus officia praesentium, quis rerum? Adipisci animi, beatae doloribus nisi pariatur quaerat rerum veniam vero. Assumenda eligendi quos sunt?</x-spur.tab-panel>
</x-spur.tabs><x-spur.tabs fullWidth>
<x-slot name="tabList" >
<x-spur.tab pill rounded color="cyan">Products</x-spur.tab>
<x-spur.tab pill rounded color="cyan">Orders</x-spur.tab>
<x-spur.tab pill rounded color="cyan">Admin Panel</x-spur.tab>
</x-slot>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis consequatur dolor magni placeat reprehenderit repudiandae, sapiente sed temporibus? Corporis, dolore doloremque exercitationem explicabo fuga magnam nulla porro recusandae sequi suscipit.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus earum nesciunt nulla officia omnis quibusdam. Ad architecto beatae cumque delectus exercitationem fuga hic illum impedit nulla officiis, quia reiciendis voluptatem.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto hic ipsum minus officia praesentium, quis rerum? Adipisci animi, beatae doloribus nisi pariatur quaerat rerum veniam vero. Assumenda eligendi quos sunt?</x-spur.tab-panel>
</x-spur.tabs><x-spur.tabs>
<x-slot name="tabList" >
<x-spur.tab pill rounded color="cyan">Products</x-spur.tab>
<x-spur.tab pill rounded color="cyan">Orders</x-spur.tab>
<x-spur.tab disabled color="cyan">Admin Panel</x-spur.tab>
</x-slot>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis consequatur dolor magni placeat reprehenderit repudiandae, sapiente sed temporibus? Corporis, dolore doloremque exercitationem explicabo fuga magnam nulla porro recusandae sequi suscipit.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus earum nesciunt nulla officia omnis quibusdam. Ad architecto beatae cumque delectus exercitationem fuga hic illum impedit nulla officiis, quia reiciendis voluptatem.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto hic ipsum minus officia praesentium, quis rerum? Adipisci animi, beatae doloribus nisi pariatur quaerat rerum veniam vero. Assumenda eligendi quos sunt?</x-spur.tab-panel>
</x-spur.tabs><x-spur.tabs defaultTab="2">
<x-slot name="tabList">
<x-spur.tab pill rounded color="lime">Products</x-spur.tab>
<x-spur.tab pill rounded color="lime">Orders</x-spur.tab>
<x-spur.tab pill rounded color="lime">Admin Panel</x-spur.tab>
</x-slot>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis consequatur dolor magni placeat reprehenderit repudiandae, sapiente sed temporibus? Corporis, dolore doloremque exercitationem explicabo fuga magnam nulla porro recusandae sequi suscipit.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus earum nesciunt nulla officia omnis quibusdam. Ad architecto beatae cumque delectus exercitationem fuga hic illum impedit nulla officiis, quia reiciendis voluptatem.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto hic ipsum minus officia praesentium, quis rerum? Adipisci animi, beatae doloribus nisi pariatur quaerat rerum veniam vero. Assumenda eligendi quos sunt?</x-spur.tab-panel>
</x-spur.tabs><x-spur.tabs>
<x-slot name="tabList" >
<x-spur.tab pill rounded color="cyan">
<x-spur.icon name="heroicons-s-rectangle-group" class="w-4 h-4"/>
Products
</x-spur.tab>
<x-spur.tab pill>
<x-spur.icon name="heroicons-s-queue-list" class="w-4 h-4"/>
Orders
</x-spur.tab>
<x-spur.tab color="indigo">
<x-spur.icon name="heroicons-s-cog" class="w-4 h-4"/>
Admin Panel
</x-spur.tab>
</x-slot>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis consequatur dolor magni placeat reprehenderit repudiandae, sapiente sed temporibus? Corporis, dolore doloremque exercitationem explicabo fuga magnam nulla porro recusandae sequi suscipit.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus earum nesciunt nulla officia omnis quibusdam. Ad architecto beatae cumque delectus exercitationem fuga hic illum impedit nulla officiis, quia reiciendis voluptatem.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto hic ipsum minus officia praesentium, quis rerum? Adipisci animi, beatae doloribus nisi pariatur quaerat rerum veniam vero. Assumenda eligendi quos sunt?</x-spur.tab-panel>
</x-spur.tabs><x-spur.tabs vertical>
<x-slot name="tabList" >
<x-spur.tab align="start" pill rounded color="cyan">
<x-spur.icon name="heroicons-s-rectangle-group" class="w-4 h-4"/>
Products
</x-spur.tab>
<x-spur.tab align="start" pill>
<x-spur.icon name="heroicons-s-queue-list" class="w-4 h-4"/>
Orders
</x-spur.tab>
<x-spur.tab align="start" pill color="indigo">
<x-spur.icon name="heroicons-s-cog" class="w-4 h-4"/>
Admin Panel
</x-spur.tab>
</x-slot>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis consequatur dolor magni placeat reprehenderit repudiandae, sapiente sed temporibus? Corporis, dolore doloremque exercitationem explicabo fuga magnam nulla porro recusandae sequi suscipit.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus earum nesciunt nulla officia omnis quibusdam. Ad architecto beatae cumque delectus exercitationem fuga hic illum impedit nulla officiis, quia reiciendis voluptatem.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto hic ipsum minus officia praesentium, quis rerum? Adipisci animi, beatae doloribus nisi pariatur quaerat rerum veniam vero. Assumenda eligendi quos sunt?</x-spur.tab-panel>
</x-spur.tabs><x-spur.tabs line vertical>
<x-slot name="tabList" >
<x-spur.tab align="start" color="cyan">
<x-spur.icon name="heroicons-s-rectangle-group" class="w-4 h-4"/>
Products
</x-spur.tab>
<x-spur.tab align="start" color="red">
<x-spur.icon name="heroicons-s-queue-list" class="w-4 h-4"/>
Orders
</x-spur.tab>
<x-spur.tab align="start" color="indigo">
<x-spur.icon name="heroicons-s-cog" class="w-4 h-4"/>
Admin Panel
</x-spur.tab>
</x-slot>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis consequatur dolor magni placeat reprehenderit repudiandae, sapiente sed temporibus? Corporis, dolore doloremque exercitationem explicabo fuga magnam nulla porro recusandae sequi suscipit.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus earum nesciunt nulla officia omnis quibusdam. Ad architecto beatae cumque delectus exercitationem fuga hic illum impedit nulla officiis, quia reiciendis voluptatem.</x-spur.tab-panel>
<x-spur.tab-panel>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto hic ipsum minus officia praesentium, quis rerum? Adipisci animi, beatae doloribus nisi pariatur quaerat rerum veniam vero. Assumenda eligendi quos sunt?</x-spur.tab-panel>
</x-spur.tabs>You can use any custom html as tab content, by adding your desired HTML in the enclosed Tab tag.
Spur provides a modifier to style the active and hover states of the Tab `s-tab`.
Can be used like so s-tab-active:bg-red-300
Please enter your credentials to login.
Please choose credentials in order to proceed
<x-spur.tabs class="max-w-96 mx-auto" fullWidth>
<x-slot name="tabList" class="bg-zinc-100 dark:bg-white/5 rounded-md p-1.5 !gap-1">
<x-spur.tab>
<div class="s-tab-active:bg-white s-tab-hover:bg-white/60 dark:s-tab-active:bg-neutral-800 dark:s-tab-hover:bg-neutral-800/60 s-tab-active:shadow rounded-md w-full text-center transition py-1">
Login
</div>
</x-spur.tab>
<x-spur.tab>
<div class="s-tab-active:bg-white s-tab-hover:bg-white/60 dark:s-tab-active:bg-neutral-800 dark:s-tab-hover:bg-neutral-800/60 s-tab-active:shadow rounded-md w-full text-center transition py-1">
Register
</div>
</x-spur.tab>
</x-slot>
<x-spur.tab-panel class="rounded-md border-zinc-200/80 dark:border-white/5 border shadow p-4">
<x-components.login/>
</x-spur.tab-panel>
<x-spur.tab-panel class="rounded-md border-zinc-200/80 dark:border-white/5 border shadow p-4">
<x-components.register/>
</x-spur.tab-panel>
</x-spur.tabs>You can use the selectTab from any alpine event @click and passing the number of the tab.
You can also $dispatch(custom) custom events and listen to within the tab component @custom="selectTab(2)" from anywhere alpine component.
This is a list of your expenses
| Title | Cost |
|---|---|
| Food | $200 |
| Clothes | $200 |
| Flights | $200 |
| Shopping | $200 |
This is a list of your income
| Title | Cost |
|---|---|
| Salary | $1000 |
| Transfers | $400 |
<x-spur.button @click="$dispatch('showincome')">View Income</x-spur.button>
<x-spur.tabs class="mt-4" fullWidth @showincome.window="selectTab(2)">
<x-slot name="tabList" class="bg-zinc-100 transition dark:bg-white/5 rounded-md p-1.5 !gap-1">
<x-spur.tab>
<div class="s-tab-active:bg-white s-tab-hover:bg-white/60 dark:s-tab-active:bg-neutral-800 dark:s-tab-hover:bg-neutral-800/60 s-tab-active:shadow rounded-md w-full text-center transition py-1">
Expenses
</div>
</x-spur.tab>
<x-spur.tab>
<div class="s-tab-active:bg-white s-tab-hover:bg-white/60 dark:s-tab-active:bg-neutral-800 dark:s-tab-hover:bg-neutral-800/60 s-tab-active:shadow rounded-md w-full text-center transition py-1">
Income
</div>
</x-spur.tab>
</x-slot>
<x-spur.tab-panel class="rounded-md min-h-[450px] flex flex-col border-zinc-200/80 transition dark:border-white/5 border shadow p-4">
<h2 class="text-xl dark:text-white">Expenses</h2>
<p class="text-sm/6 dark:text-white mb-5">This is a list of your expenses</p>
<x-components.expenses-table/>
<div class="mt-5 flex mt-auto justify-end">
<x-spur.button plain @click="selectTab(2)">
<x-spur.icon name="heroicons-s-banknotes" class="w-5 h-5"/>
Income
</x-spur.button>
</div>
</x-spur.tab-panel>
<x-spur.tab-panel class="rounded-md min-h-[450px] flex flex-col border-zinc-200/80 transition dark:border-white/5 border shadow p-4">
<h2 class="text-xl dark:text-white">Income</h2>
<p class="text-sm/6 dark:text-white mb-5">This is a list of your income</p>
<x-components.income-table/>
<div class="mt-5 flex mt-auto justify-start">
<x-spur.button plain @click="selectTab(1)">
<x-spur.icon name="heroicons-s-credit-card" class="w-5 h-5"/>
Expenses
</x-spur.button>
</div>
</x-spur.tab-panel>
</x-spur.tabs>To be able to use the `s-tab-{modifier}` you would need to add it to tailwind.config.js
export default {
plugins: [
plugin(function({matchVariant}) {
matchVariant(
's-tab',
(value) => `:merge(.group\\/tab)${value} &`,
{values: { active: '[aria-selected="true"]', hover: ':hover' }},
)
})
]
}