Tailwind CSS List

David UI’s list component helps you create organized and responsive lists. Perfect for directories, menus, or navigation, this Tailwind CSS-based component supports custom styles and layouts.

Browse our versatile component examples to include structured lists effortlessly in your Tailwind CSS projects.

---

#Basic List

Explore this example to integrate a straightforward, responsive list component into your project. Fully customizable to suit your specific design needs.

---

#List with Icon

This interactive list example features action buttons represented as icons. Each item can perform tasks like deletion, editing, or other actions, making it ideal for lists requiring both navigation and functionality.

---

#List with Avatar

Highlight individuals or teams with this visually appealing list example, which pairs profile images with text descriptions. Perfect for contact lists, team pages, or similar use cases.

---

#List with Badge

Improve your lists with notification badges, offering users a clear visual indication of item counts or message statuses, such as "Inbox," "Spam," or "Trash." This design is especially useful for content-heavy interfaces.

---

#List with Selected Item

Use this example to showcase a pre-selected or default item in a list. The selected item is visually distinguished with a semi-transparent background (bg-blue-gray-50/50), making it stand out from the rest.

---

#List with Disabled Item

Easily represent non-selectable list options with this example. Disabled items are styled to clearly convey their inactive state, ensuring a smooth user experience.

---

#List with Link

Transform your list items into interactive links using this example. Each item is wrapped in an anchor tag (<a href="#">), making them navigable to other pages or actions.

---

#List Custom Styles

Discover how to customize your David UI list component with this example. Customize styles to align with your project’s unique design language.