Qwik tabs - Flowbite

Get started with the tabs component from Flowbite Qwik to show a list of tab items where you can switch between them using multiple styles, colors and layouts

The tabs component can be used to show a list of tab items that you can click on to change the content inside of the main tabs component using Qwik state reactivity.

Choose one of the examples below based on various styles, layouts, and content types that you can customize with Qwik components, props and the utility classes from Tailwind CSS.

To start using the tabs component make sure you import it from flowbite-qwik :

import { Tabs } from "flowbite-qwik"

Default Tabs

Use the following default tabs component example to show a list of links that the user can navigate from on your website.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Tabs } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Tabs>
      <Tabs.Tab title="First">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur
        distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
      </Tabs.Tab>
      <Tabs.Tab title="Second">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam
        maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
      </Tabs.Tab>
      <Tabs.Tab title="Third">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque
        iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
      </Tabs.Tab>
      <Tabs.Tab title="Fourth" disabled>
        Lorem ipsum dolor...
      </Tabs.Tab>
    </Tabs>
  )
})

Tabs with underline

Use this alternative tabs component style with an underline instead of a background when hovering and being active on a certain page.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Tabs } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Tabs variant="underline">
      <Tabs.Tab title="First">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur
        distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
      </Tabs.Tab>
      <Tabs.Tab title="Second">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam
        maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
      </Tabs.Tab>
      <Tabs.Tab title="Third">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque
        iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
      </Tabs.Tab>
      <Tabs.Tab title="Fourth" disabled>
        Lorem ipsum dolor...
      </Tabs.Tab>
    </Tabs>
  )
})

Pills tabs

If you want to use pills as a style for the tabs component you can do so by using this example.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Tabs } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Tabs variant="pills">
      <Tabs.Tab title="First">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur
        distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
      </Tabs.Tab>
      <Tabs.Tab title="Second">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam
        maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
      </Tabs.Tab>
      <Tabs.Tab title="Third">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque
        iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
      </Tabs.Tab>
      <Tabs.Tab title="Fourth" disabled>
        Lorem ipsum dolor...
      </Tabs.Tab>
    </Tabs>
  )
})

Directive - show

Use this props if you want to control which directive to use for rendering every tab content

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Tabs } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Tabs directive="show">
      <Tabs.Tab title="First">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur
        distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
      </Tabs.Tab>
      <Tabs.Tab title="Second">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam
        maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
      </Tabs.Tab>
      <Tabs.Tab title="Third">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque
        iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
      </Tabs.Tab>
      <Tabs.Tab title="Fourth" disabled>
        Lorem ipsum dolor...
      </Tabs.Tab>
    </Tabs>
  )
})

With icons

You can add icons to the tabs to make them more visually appealing and easier to understand.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Tabs } from 'flowbite-qwik'
import { IconGridOutline, IconGridPlusOutline, IconProfileCardOutline, IconUserCircleSolid } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <Tabs>
      <Tabs.Tab title="Profile" icon={IconProfileCardOutline}>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur
        distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
      </Tabs.Tab>
      <Tabs.Tab title="Dashboard" icon={IconGridOutline}>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam
        maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
      </Tabs.Tab>
      <Tabs.Tab title="Settings" icon={IconGridPlusOutline}>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque
        iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
      </Tabs.Tab>
      <Tabs.Tab title="Contacts" disabled icon={IconUserCircleSolid}>
        Lorem ipsum dolor...
      </Tabs.Tab>
    </Tabs>
  )
})

Active tab

If you want to set a specific tab as active you can do so by using the `active` prop.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Tabs } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Tabs>
      <Tabs.Tab title="First">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur
        distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
      </Tabs.Tab>
      <Tabs.Tab title="Second" active>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam
        maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
      </Tabs.Tab>
      <Tabs.Tab title="Third">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque
        iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
      </Tabs.Tab>
      <Tabs.Tab title="Fourth" disabled>
        Lorem ipsum dolor...
      </Tabs.Tab>
    </Tabs>
  )
})

Interaction

You can interact with tabs by using the `onClickInteraction$` prop.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Tabs } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Tabs
      directive="show"
      onClickInteraction$={() => {
        alert('Click!')
      }}
    >
      <Tabs.Tab title="First">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur
        distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
      </Tabs.Tab>
      <Tabs.Tab title="Second">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam
        maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
      </Tabs.Tab>
      <Tabs.Tab title="Third">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque
        iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
      </Tabs.Tab>
      <Tabs.Tab title="Fourth" disabled>
        Lorem ipsum dolor...
      </Tabs.Tab>
    </Tabs>
  )
})