List

iOS-style lists with items, headers, and dividers. Perfect for settings screens, menus, and data display.

Basic List

General
Notifications
Privacy

<ul class="list">
  <li class="list-item">
    <span class="list-item-content">
      <span class="list-item-label">General</span>
    </span>
  </li>
  <li class="list-item">
    <span class="list-item-content">
      <span class="list-item-label">Notifications</span>
    </span>
  </li>
  <li class="list-item">
    <span class="list-item-content">
      <span class="list-item-label">Privacy</span>
    </span>
  </li>
</ul>

Requires: ux.min.css

<ul class="flex flex-col w-full m-0 p-0 list-none bg-base-100">
  <li class="relative flex items-center min-h-11 px-4 py-3 border-b border-base-300">
    <span class="flex-1 min-w-0 text-sm">General</span>
  </li>
  <li class="relative flex items-center min-h-11 px-4 py-3 border-b border-base-300">
    <span class="flex-1 min-w-0 text-sm">Notifications</span>
  </li>
  <li class="relative flex items-center min-h-11 px-4 py-3">
    <span class="flex-1 min-w-0 text-sm">Privacy</span>
  </li>
</ul>

Requires: tw.min.css

// No JavaScript required - pure CSS component

With Header & Notes

Settings

Wi-Fi Connected
Bluetooth On

Manage your network and connectivity settings.

<div class="list-header">
  Settings
  <button class="list-header-action">Edit</button>
</div>
<ul class="list">
  <li class="list-item list-item-clickable">
    <span class="list-item-content">
      <span class="list-item-label">Wi-Fi</span>
    </span>
    <span class="list-item-end">
      <span class="list-item-value">Connected</span>
    </span>
  </li>
  <li class="list-item list-item-clickable">
    <span class="list-item-content">
      <span class="list-item-label">Bluetooth</span>
    </span>
    <span class="list-item-end">
      <span class="list-item-value">On</span>
    </span>
  </li>
</ul>
<div class="list-note">Manage your network and connectivity settings.</div>

Requires: ux.min.css

<div class="flex items-center justify-between px-4 pt-4 pb-2 text-xs font-semibold uppercase tracking-wide text-base-content/60 bg-base-200">
  Settings
  <button class="text-sm font-medium normal-case tracking-normal bg-transparent border-none cursor-pointer p-0 text-primary hover:opacity-80">Edit</button>
</div>
<ul class="flex flex-col w-full m-0 p-0 list-none bg-base-100">
  <li class="relative flex items-center min-h-11 px-4 py-3 border-b border-base-300 cursor-pointer hover:bg-base-200">
    <span class="flex-1 min-w-0 text-sm">Wi-Fi</span>
    <span class="flex items-center ml-auto pl-3 shrink-0 text-sm text-base-content/60">Connected</span>
  </li>
  <li class="relative flex items-center min-h-11 px-4 py-3 cursor-pointer hover:bg-base-200">
    <span class="flex-1 min-w-0 text-sm">Bluetooth</span>
    <span class="flex items-center ml-auto pl-3 shrink-0 text-sm text-base-content/60">On</span>
  </li>
</ul>
<div class="px-4 pb-4 pt-2 text-sm leading-relaxed text-base-content/40 bg-base-200">Manage your network and connectivity settings.</div>

Requires: tw.min.css

// No JavaScript required

Multiline & Detail

John Doe Software Engineer at Acme Corp
Jane Smith Product Designer at StartupX

<ul class="list">
  <li class="list-item list-item-multiline list-item-detail list-item-clickable">
    <span class="list-item-content">
      <span class="list-item-label">John Doe</span>
      <span class="list-item-note">Software Engineer at Acme Corp</span>
    </span>
  </li>
  <li class="list-item list-item-multiline list-item-detail list-item-clickable">
    <span class="list-item-content">
      <span class="list-item-label">Jane Smith</span>
      <span class="list-item-note">Product Designer at StartupX</span>
    </span>
  </li>
</ul>

Requires: ux.min.css

<ul class="flex flex-col w-full m-0 p-0 list-none bg-base-100">
  <li class="relative flex items-center min-h-11 px-4 py-3 border-b border-base-300 cursor-pointer hover:bg-base-200 pr-8">
    <span class="flex flex-col flex-1 min-w-0">
      <span class="text-sm font-medium">John Doe</span>
      <span class="text-xs text-base-content/50 mt-0.5">Software Engineer at Acme Corp</span>
    </span>
    <svg class="absolute right-3 size-4 text-base-content/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
  </li>
  <li class="relative flex items-center min-h-11 px-4 py-3 border-b border-base-300 cursor-pointer hover:bg-base-200 pr-8">
    <span class="flex flex-col flex-1 min-w-0">
      <span class="text-sm font-medium">Jane Smith</span>
      <span class="text-xs text-base-content/50 mt-0.5">Product Designer at StartupX</span>
    </span>
    <svg class="absolute right-3 size-4 text-base-content/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
  </li>
</ul>

Requires: tw.min.css

// No JavaScript required

Active & Selected States

Inbox
Sent
Drafts
Trash (disabled)

<ul class="list">
  <li class="list-item list-item-clickable">
    <span class="list-item-content">
      <span class="list-item-label">Inbox</span>
    </span>
  </li>
  <li class="list-item list-item-active list-item-clickable">
    <span class="list-item-content">
      <span class="list-item-label">Sent</span>
    </span>
  </li>
  <li class="list-item list-item-clickable">
    <span class="list-item-content">
      <span class="list-item-label">Drafts</span>
    </span>
  </li>
  <li class="list-item list-item-disabled">
    <span class="list-item-content">
      <span class="list-item-label">Trash (disabled)</span>
    </span>
  </li>
</ul>

Requires: ux.min.css

<ul class="flex flex-col w-full m-0 p-0 list-none bg-base-100">
  <li class="relative flex items-center min-h-11 px-4 py-3 border-b border-base-300 cursor-pointer hover:bg-base-200">
    <span class="text-sm">Inbox</span>
  </li>
  <li class="relative flex items-center min-h-11 px-4 py-3 border-b border-base-300 cursor-pointer bg-primary/8 border-l-3 border-l-primary">
    <span class="text-sm font-medium text-primary">Sent</span>
  </li>
  <li class="relative flex items-center min-h-11 px-4 py-3 border-b border-base-300 cursor-pointer hover:bg-base-200">
    <span class="text-sm">Drafts</span>
  </li>
  <li class="relative flex items-center min-h-11 px-4 py-3 opacity-50 pointer-events-none">
    <span class="text-sm">Trash (disabled)</span>
  </li>
</ul>

Requires: tw.min.css

// No JavaScript required for static states

Classes Reference

Class	Description
.list	Base list container
.list-inset	iOS grouped style (rounded, margin)
.list-item	List item
.list-item-clickable	Hover/active feedback
.list-item-detail	Chevron disclosure indicator
.list-item-multiline	Multi-line alignment
.list-item-active	Active state (left accent bar)
.list-item-selected	Selected state (tinted bg)
.list-item-disabled	Disabled state
.list-item-content	Content container (flex column)
.list-item-label	Primary text
.list-item-note	Secondary text
.list-item-value	End value text
.list-item-start	Start slot (icon/avatar)
.list-item-end	End slot (value/chevron)
.list-header	Section header
.list-note	Section footer note
.list-divider	Section divider
.list-sm	Small size
.list-lg	Large size