List group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Example

The most basic list group is an unordered list with list items and the proper classes.

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
                
                  <ul class="px-0 border-b border-gray-200 dark:border-gray-700">
                    <li class="border border-gray-200 dark:border-gray-700 border-b-0 list-none rounded-sm py-3 px-4">An item</li>
                    <li class="border border-gray-200 dark:border-gray-700 border-b-0 list-none rounded-sm py-3 px-4">A second item</li>
                    <li class="border border-gray-200 dark:border-gray-700 border-b-0 list-none rounded-sm py-3 px-4">A third item</li>
                    <li class="border border-gray-200 dark:border-gray-700 border-b-0 list-none rounded-sm py-3 px-4">A fourth item</li>
                    <li class="border border-gray-200 dark:border-gray-700 border-b-0 list-none rounded-sm py-3 px-4" >And a fifth one</li>
                  </ul>

List group with active item

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
                
                  <ul x-data="{ item: '1' }" class="px-0 border-b border-gray-200 dark:border-gray-700">
                    <li :class="{ 'bg-blue-700 text-gray-100': item === '1' }" @click="item = '1'" class="py-3 px-4 border border-gray-200 dark:border-gray-700 border-b-0 list-none rounded-sm hover:text-white hover:bg-blue-700">An item</li>
                    <li :class="{ 'bg-blue-700 text-gray-100': item === '2' }" @click="item = '2'" class="py-3 px-4 border border-gray-200 dark:border-gray-700 border-b-0 list-none rounded-sm hover:text-white hover:bg-blue-700">A second item</li>
                    <li :class="{ 'bg-blue-700 text-gray-100': item === '3' }" @click="item = '3'" class="py-3 px-4 border border-gray-200 dark:border-gray-700 border-b-0 list-none rounded-sm hover:text-white hover:bg-blue-700">A third item</li>
                    <li :class="{ 'bg-blue-700 text-gray-100': item === '4' }" @click="item = '4'" class="py-3 px-4 border border-gray-200 dark:border-gray-700 border-b-0 list-none rounded-sm hover:text-white hover:bg-blue-700">A fourth item</li>
                    <li :class="{ 'bg-blue-700 text-gray-100': item === '5' }" @click="item = '5'" class="py-3 px-4 border border-gray-200 dark:border-gray-700 border-b-0 list-none rounded-sm hover:text-white hover:bg-blue-700">And a fifth one</li>
                  </ul>

List group with badge

                
                  <ul class="px-0 border-b border-gray-200 dark:border-gray-700">
                    <li class="group">
                      <a class="border border-gray-200 dark:border-gray-700 border-b-0 list-none rounded-sm py-3 px-4 flex justify-between items-center group-hover:text-white group-hover:bg-blue-700" href="#">
                        An item
                        <span class="text-sm py-1 px-2 bg-blue-700 text-gray-100 rounded group-hover:text-blue-700 group-hover:bg-gray-100">14</span>
                      </a>
                    </li>
                    <li class="group">
                      <a class="border border-gray-200 dark:border-gray-700 border-b-0 list-none rounded-sm py-3 px-4 flex justify-between items-center group-hover:text-white group-hover:bg-blue-700" href="#">
                        A second item
                        <span class="text-sm py-1 px-2 bg-blue-700 text-gray-100 rounded group-hover:text-blue-700 group-hover:bg-gray-100">14</span>
                      </a>
                    </li>
                    <li class="group">
                      <a class="border border-gray-200 dark:border-gray-700 border-b-0 list-none rounded-sm py-3 px-4 flex justify-between items-center group-hover:text-white group-hover:bg-blue-700" href="#">
                        A third item
                        <span class="text-sm py-1 px-2 bg-blue-700 text-gray-100 rounded group-hover:text-blue-700 group-hover:bg-gray-100">14</span>
                      </a>
                    </li>
                    <li class="group">
                      <a class="border border-gray-200 dark:border-gray-700 border-b-0 list-none rounded-sm py-3 px-4 flex justify-between items-center group-hover:text-white group-hover:bg-blue-700" href="#">
                        A fourth item
                        <span class="text-sm py-1 px-2 bg-blue-700 text-gray-100 rounded group-hover:text-blue-700 group-hover:bg-gray-100">14</span>
                      </a>
                    </li>
                    <li class="group">
                      <a class="border border-gray-200 dark:border-gray-700 border-b-0 list-none rounded-sm py-3 px-4 flex justify-between items-center group-hover:text-white group-hover:bg-blue-700" href="#">
                        And a fifth one
                        <span class="text-sm py-1 px-2 bg-blue-700 text-gray-100 rounded group-hover:text-blue-700 group-hover:bg-gray-100">14</span>
                      </a>
                    </li>
                  </ul>