Qwik list - Flowbite

Use the list component to show an unordered or ordered list of items based on multiple styles, layouts, and variants built with Tailwind CSS and Flowbite

Get started with a collection of list components built with Tailwind CSS for ordered and unordered lists with bullets, numbers, or icons and other styles and layouts to show a list of items inside an article or throughout your web page.

To start using the component make sure that you have imported it from Flowbite Qwik:

import { List } from "flowbite-qwik"

Default list

Use this example to create a default unordered list of items using the List component with List.Item child components inside of it.

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

export default component$(() => {
  return (
    <List>
      <List.Item>At least 10 characters (and up to 100 characters)</List.Item>
      <List.Item>At least one lowercase character</List.Item>
      <List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
    </List>
  )
})

Icons

This example can be used to apply custom icons instead of the default bullets for the list items.

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

export default component$(() => {
  return (
    <List>
      <List.Item icon={IconCheckCircleSolid}>At least 10 characters (and up to 100 characters)</List.Item>
      <List.Item icon={IconCheckCircleSolid}>At least one lowercase character</List.Item>
      <List.Item icon={IconCheckCircleSolid}>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
    </List>
  )
})

Nested

Use this example to nest another list of items inside the parent list element.

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

export default component$(() => {
  return (
    <List>
      <List.Item>
        List item one
        <List ordered nested>
          <List.Item>You might feel like you are being really "organized" o</List.Item>
          <List.Item>Nested navigation in UIs is a bad idea too, keep things as flat as possible.</List.Item>
          <List.Item>Nesting tons of folders in your source code is also not helpful.</List.Item>
        </List>
      </List.Item>
      <List.Item>
        List item two
        <List ordered nested>
          <List.Item>I'm not sure if we'll bother styling more than two levels deep.</List.Item>
          <List.Item>Two is already too much, three is guaranteed to be a bad idea.</List.Item>
          <List.Item>If you nest four levels deep you belong in prison.</List.Item>
        </List>
      </List.Item>
      <List.Item>
        List item three
        <List ordered nested>
          <List.Item>Again please don't nest lists if you want</List.Item>
          <List.Item>Nobody wants to look at this.</List.Item>
          <List.Item>I'm upset that we even have to bother styling this.</List.Item>
        </List>
      </List.Item>
    </List>
  )
})

Unstyled

Use the unstyled prop to disable the list style bullets or numbers.

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

export default component$(() => {
  return (
    <List unstyled>
      <List.Item>At least 10 characters (and up to 100 characters)</List.Item>
      <List.Item>At least one lowercase character</List.Item>
      <List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
    </List>
  )
})

Ordered list

Use the ordered prop tag to create an ordered list of items with numbers.

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

export default component$(() => {
  return (
    <List ordered>
      <List.Item>At least 10 characters (and up to 100 characters)</List.Item>
      <List.Item>At least one lowercase character</List.Item>
      <List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
    </List>
  )
})

Advanced layout

This example can be used to show more details for each list item such as the user’s name, email and profile picture.

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

export default component$(() => {
  return (
    <List unstyled class="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
      <List.Item class="pb-3 sm:pb-4">
        <div class="flex items-center space-x-4 rtl:space-x-reverse">
          <Avatar
            img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
            alt="Neil image"
            rounded
            size="sm"
          />
          <div class="min-w-0 flex-1">
            <p class="truncate text-sm font-medium text-gray-900 dark:text-white">Neil Sims</p>
            <p class="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
          </div>
          <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
        </div>
      </List.Item>
      <List.Item class="py-3 sm:py-4">
        <div class="flex items-center space-x-4 rtl:space-x-reverse">
          <Avatar
            img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
            alt="Neil image"
            rounded
            size="sm"
          />
          <div class="min-w-0 flex-1">
            <p class="truncate text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</p>
            <p class="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
          </div>
          <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
        </div>
      </List.Item>
      <List.Item class="py-3 sm:py-4">
        <div class="flex items-center space-x-4 rtl:space-x-reverse">
          <Avatar
            img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/v0w8f2cf2xxxas8ad1jl.jpg"
            alt="Neil image"
            rounded
            size="sm"
          />
          <div class="min-w-0 flex-1">
            <p class="truncate text-sm font-medium text-gray-900 dark:text-white">Michael Gough</p>
            <p class="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
          </div>
          <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
        </div>
      </List.Item>
      <List.Item class="py-3 sm:py-4">
        <div class="flex items-center space-x-4 rtl:space-x-reverse">
          <Avatar
            img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/v0w8f2cf2xxxas8ad1jl.jpg"
            alt="Neil image"
            rounded
            size="sm"
          />
          <div class="min-w-0 flex-1">
            <p class="truncate text-sm font-medium text-gray-900 dark:text-white">Thomas Lean</p>
            <p class="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
          </div>
          <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
        </div>
      </List.Item>
      <List.Item class="pb-0 pt-3 sm:pt-4">
        <div class="flex items-center space-x-4 rtl:space-x-reverse">
          <Avatar
            img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/v0w8f2cf2xxxas8ad1jl.jpg"
            alt="Neil image"
            rounded
            size="sm"
          />
          <div class="min-w-0 flex-1">
            <p class="truncate text-sm font-medium text-gray-900 dark:text-white">Lana Byrd</p>
            <p class="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
          </div>
          <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
        </div>
      </List.Item>
    </List>
  )
})

Horizontal list

Use this example to create a horizontally aligned list of items.

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

export default component$(() => {
  return (
    <List horizontal>
      <List.Item>About</List.Item>
      <List.Item>Premium</List.Item>
      <List.Item>Campaigns</List.Item>
      <List.Item>Blog</List.Item>
      <List.Item>Affiliate Program</List.Item>
      <List.Item>FAQs</List.Item>
      <List.Item>Contact</List.Item>
    </List>
  )
})