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 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.

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>
  )
})