Svelte Tabs - Flowbite

Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container

The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.

Setup #

Svelte
<script>
  import { Tabs, TabItem } from 'flowbite-svelte';
</script>

Default tabs #

Use the following default tabs component example to show a dynamic content in your webpage.

If your tab title is a simple string set the title property on TabItem, otherwise when more control is needed overwrite the title slot.

The last tab in that example shows not only how to show a disabled tab, but how to use the title slot entry as well.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><ul class="flex flex-wrap space-x-2 rtl:space-x-reverse"><li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500 active">Profile</button> <div class="hidden tab_content_placeholder"><div><p class="text-sm text-gray-500 dark:text-gray-400" data-svelte-h="svelte-12go2dy"><b>Profile:</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div></li>  <li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300">Settings</button> </li>  <li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300">Users</button> </li>  <li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300">Dashboard</button> </li>  <li class="group" role="presentation"><button type="button" role="tab" disabled class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"><span slot="title" class="text-gray-400 dark:text-gray-500" data-svelte-h="svelte-1fogcgl">Disabled</span></button> </li> </ul>  <div class="h-px bg-gray-200 dark:bg-gray-700"></div>  <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4" role="tabpanel" aria-labelledby="id-tab"></div> </div>
Svelte
<script>
  import { Tabs, TabItem } from 'flowbite-svelte';
</script>

<Tabs>
  <TabItem open title="Profile">
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Profile:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem title="Settings">
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Settings:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem title="Users">
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Users:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem title="Dashboard">
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Dashboard:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem disabled>
    <span slot="title" class="text-gray-400 dark:text-gray-500">Disabled</span>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Disabled:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
</Tabs>

Tabs with underline #

You can control the style of tabs component by settings the activeClasses and inactiveClasses on the TabItem elements. See the Custom style section below for more details.

However tabs component comes with several pre-defined styles that are accessible to you by setting the tabStyle property. This will set the activeClasses and inactiveClasses properties for you.

Use the tabStyle="underline" to achieve this alternative tabs component style with an underline instead of a background when hovering and being active on a certain page.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><ul class="flex flex-wrap space-x-2 rtl:space-x-reverse -mb-px"><li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 text-primary-600 border-b-2 border-primary-600 dark:text-primary-500 dark:border-primary-500 active">Profile</button> <div class="hidden tab_content_placeholder"><div><p class="text-sm text-gray-500 dark:text-gray-400" data-svelte-h="svelte-12go2dy"><b>Profile:</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div></li>  <li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400">Dashboard</button> </li>  <li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400">Settings</button> </li>  <li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400">Users</button> </li>  <li class="group" role="presentation"><button type="button" role="tab" disabled class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400"><span slot="title" class="text-gray-400 dark:text-gray-500" data-svelte-h="svelte-1fogcgl">Disabled</span></button> </li> </ul>  <div class="h-px bg-gray-200 dark:bg-gray-700"></div>  <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4" role="tabpanel" aria-labelledby="id-tab"></div> </div>
Svelte
<script>
  import { Tabs, TabItem } from 'flowbite-svelte';
</script>

<Tabs tabStyle="underline">
  <TabItem open title="Profile">
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Profile:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem title="Dashboard">
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Dashboard:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem title="Settings">
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Settings:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem title="Users">
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Users:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem disabled>
    <span slot="title" class="text-gray-400 dark:text-gray-500">Disabled</span>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Disabled:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
</Tabs>

Tabs with icons #

This is an example of the tabs component where you can also use a SVG powered icon to complement the text within the navigational tabs. Use icon components for a simple syntax. See Icons for more details.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><ul class="flex flex-wrap space-x-2 rtl:space-x-reverse -mb-px"><li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 text-primary-600 border-b-2 border-primary-600 dark:text-primary-500 dark:border-primary-500 active"><div slot="title" class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-5 h-5" role="img" aria-label="user circle solid" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"></path></svg> 
Profile</div></button> <div class="hidden tab_content_placeholder"><div><p class="text-sm text-gray-500 dark:text-gray-400" data-svelte-h="svelte-12go2dy"><b>Profile:</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div></li>  <li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400"><div slot="title" class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-5 h-5" role="img" aria-label="grid solid" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4.857 3A1.857 1.857 0 0 0 3 4.857v4.286C3 10.169 3.831 11 4.857 11h4.286A1.857 1.857 0 0 0 11 9.143V4.857A1.857 1.857 0 0 0 9.143 3H4.857Zm10 0A1.857 1.857 0 0 0 13 4.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 21 9.143V4.857A1.857 1.857 0 0 0 19.143 3h-4.286Zm-10 10A1.857 1.857 0 0 0 3 14.857v4.286C3 20.169 3.831 21 4.857 21h4.286A1.857 1.857 0 0 0 11 19.143v-4.286A1.857 1.857 0 0 0 9.143 13H4.857Zm10 0A1.857 1.857 0 0 0 13 14.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 21 19.143v-4.286A1.857 1.857 0 0 0 19.143 13h-4.286Z" clip-rule="evenodd"></path></svg> 
Dashboard</div></button> </li>  <li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400"><div slot="title" class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-5 h-5" role="img" aria-label="adjustments vertical solid" viewBox="0 0 24 24"><path d="M5 13.17a3.001 3.001 0 0 0 0 5.66V20a1 1 0 1 0 2 0v-1.17a3.001 3.001 0 0 0 0-5.66V4a1 1 0 0 0-2 0v9.17ZM11 20v-9.17a3.001 3.001 0 0 1 0-5.66V4a1 1 0 1 1 2 0v1.17a3.001 3.001 0 0 1 0 5.66V20a1 1 0 1 1-2 0Zm6-1.17V20a1 1 0 1 0 2 0v-1.17a3.001 3.001 0 0 0 0-5.66V4a1 1 0 1 0-2 0v9.17a3.001 3.001 0 0 0 0 5.66Z"></path></svg> 
Settings</div></button> </li>  <li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400"><div slot="title" class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-5 h-5" role="img" aria-label="clipboard solid" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M8 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1h2a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h2Zm6 1h-4v2H9a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2h-1V4Zm-6 8a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H9Z" clip-rule="evenodd"></path></svg> 
Contacts</div></button> </li> </ul>  <div class="h-px bg-gray-200 dark:bg-gray-700"></div>  <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4" role="tabpanel" aria-labelledby="id-tab"></div> </div>
Svelte
<script>
  import { Tabs, TabItem } from 'flowbite-svelte';
  import { UserCircleSolid, GridSolid, AdjustmentsVerticalSolid, ClipboardSolid } from 'flowbite-svelte-icons';
</script>

<Tabs tabStyle="underline">
  <TabItem open>
    <div slot="title" class="flex items-center gap-2">
      <UserCircleSolid size="md" />
      Profile
    </div>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Profile:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem>
    <div slot="title" class="flex items-center gap-2">
      <GridSolid size="md" />
      Dashboard
    </div>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Dashboard:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem>
    <div slot="title" class="flex items-center gap-2">
      <AdjustmentsVerticalSolid size="md" />
      Settings
    </div>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Settings:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem>
    <div slot="title" class="flex items-center gap-2">
      <ClipboardSolid size="md" />
      Contacts
    </div>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Contacts:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
</Tabs>

Pills tabs #

If you want to use pills as a style for the tabs component use tabStyle="pill".

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><ul class="flex flex-wrap space-x-2 rtl:space-x-reverse"><li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed py-3 px-4 text-white bg-primary-600 rounded-lg active"><span slot="title" data-svelte-h="svelte-16s2rs">Profile</span></button> <div class="hidden tab_content_placeholder"><div><p class="text-sm text-gray-500 dark:text-gray-400" data-svelte-h="svelte-12go2dy"><b>Profile:</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div></li>  <li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed py-3 px-4 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"><span slot="title" data-svelte-h="svelte-d4qj0d">Dashboard</span></button> </li>  <li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed py-3 px-4 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"><span slot="title" data-svelte-h="svelte-el864e">Settings</span></button> </li>  <li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed py-3 px-4 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"><span slot="title" data-svelte-h="svelte-c0dbql">Users</span></button> </li> </ul>  <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4" role="tabpanel" aria-labelledby="id-tab"></div> </div>
Svelte
<script>
  import { Tabs, TabItem } from 'flowbite-svelte';
</script>

<Tabs tabStyle="pill">
  <TabItem open>
    <span slot="title">Profile</span>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Profile:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem>
    <span slot="title">Dashboard</span>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Dashboard:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem>
    <span slot="title">Settings</span>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Settings:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem>
    <span slot="title">Users</span>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Users:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
</Tabs>

Full width tabs #

If you want to show the tabs on the full width relative to the parent element use tabStyle="full" prop.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><ul class="flex rounded-lg divide-x rtl:divide-x-reverse divide-gray-200 shadow dark:divide-gray-700"><li class="group w-full" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 w-full group-first:rounded-s-lg group-last:rounded-e-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:bg-gray-700 dark:text-white active"><span slot="title" data-svelte-h="svelte-16s2rs">Profile</span></button> <div class="hidden tab_content_placeholder"><div><p class="text-sm text-gray-500 dark:text-gray-400" data-svelte-h="svelte-12go2dy"><b>Profile:</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div></li>  <li class="group w-full" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 w-full group-first:rounded-s-lg group-last:rounded-e-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"><span slot="title" data-svelte-h="svelte-d4qj0d">Dashboard</span></button> </li>  <li class="group w-full" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 w-full group-first:rounded-s-lg group-last:rounded-e-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"><span slot="title" data-svelte-h="svelte-el864e">Settings</span></button> </li>  <li class="group w-full" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 w-full group-first:rounded-s-lg group-last:rounded-e-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"><span slot="title" data-svelte-h="svelte-c0dbql">Users</span></button> </li> </ul>  <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4" role="tabpanel" aria-labelledby="id-tab"></div> </div>
Svelte
<script>
  import { Tabs, TabItem } from 'flowbite-svelte';
</script>

<Tabs tabStyle="full" defaultClass="flex rounded-lg divide-x rtl:divide-x-reverse divide-gray-200 shadow dark:divide-gray-700">
  <TabItem class="w-full" open>
    <span slot="title">Profile</span>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Profile:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem class="w-full">
    <span slot="title">Dashboard</span>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Dashboard:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem class="w-full">
    <span slot="title">Settings</span>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Settings:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem class="w-full">
    <span slot="title">Users</span>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Users:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
</Tabs>

Components in tab contents #

You can add other components to the TabItem component. Here we are adding a timeline component in the tab 1:

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 h-auto"><ul class="flex flex-wrap space-x-2 rtl:space-x-reverse"><li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500 active"><span slot="title" data-svelte-h="svelte-16s2rs">Profile</span></button> <div class="hidden tab_content_placeholder"><div><ol class="relative border-s border-gray-200 dark:border-gray-700"><li class="mb-10 ms-4"><div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div> <time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">February 2022</time> <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Application UI code in Tailwind CSS</h3>  <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400" data-svelte-h="svelte-1rchdey">Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce &amp; Marketing pages.</p> <button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none inline-flex items-center justify-center px-5 py-2.5 text-sm text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:text-gray-400 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-600 focus-within:ring-gray-200 dark:focus-within:ring-gray-700 rounded-lg">Learn more
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="shrink-0 ms-2 w-5 h-5" role="img" aria-label="arrow right outline" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0-4 4m4-4-4-4"></path></svg> </button> </li>  <li class="mb-10 ms-4"><div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div> <time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">March 2022</time> <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Application UI code in Tailwind CSS</h3>  <p class="text-base font-normal text-gray-500 dark:text-gray-400" data-svelte-h="svelte-oyd43">All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.</p></li>  <li class="mb-10 ms-4"><div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div> <time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">April 2022</time> <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Application UI code in Tailwind CSS</h3>  <p class="text-base font-normal text-gray-500 dark:text-gray-400" data-svelte-h="svelte-16k79sd">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p></li> </ol> </div></div></li>  <li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"><span slot="title" data-svelte-h="svelte-d4qj0d">Dashboard</span></button> </li>  <li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"><span slot="title" data-svelte-h="svelte-el864e">Settings</span></button> </li>  <li class="group" role="presentation"><button type="button" role="tab" class="inline-block text-sm font-medium text-center disabled:cursor-not-allowed p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"><span slot="title" data-svelte-h="svelte-c0dbql">Users</span></button> </li> </ul>  <div class="h-px bg-gray-200 dark:bg-gray-700"></div>  <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4" role="tabpanel" aria-labelledby="id-tab"></div> </div>
Svelte
<script>
  import { Tabs, TabItem, Timeline, TimelineItem, Button } from 'flowbite-svelte';
  import { ArrowRightOutline } from 'flowbite-svelte-icons';
</script>

<Tabs>
  <TabItem open>
    <span slot="title">Profile</span>
    <Timeline>
      <TimelineItem title="Application UI code in Tailwind CSS" date="February 2022">
        <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.</p>
        <Button color="alternative">
          Learn more
          <ArrowRightOutline class="ms-2 w-5 h-5" />
        </Button>
      </TimelineItem>
      <TimelineItem title="Application UI code in Tailwind CSS" date="March 2022">
        <p class="text-base font-normal text-gray-500 dark:text-gray-400">All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.</p>
      </TimelineItem>
      <TimelineItem title="Application UI code in Tailwind CSS" date="April 2022">
        <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p>
      </TimelineItem>
    </Timeline>
  </TabItem>
  <TabItem>
    <span slot="title">Dashboard</span>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Dashboard:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem>
    <span slot="title">Settings</span>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Settings:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
  <TabItem>
    <span slot="title">Users</span>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      <b>Users:</b>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </TabItem>
</Tabs>

Custom style #

To get a custom look and feel for the Tabs component, set activeClasses and inactiveClasses properties either on the Tabs component or on the individual TabItem components.

Component data #

The component has the following props, type, and default values. See types page for type information.

TabItem styling #

Use the class prop to overwrite the li tag class.

Tabs styling #

Use the class prop to overwrite defaultClass.

References #

Flowbite Tabs

Table

Timeline