List

Displays a collection of items in a vertical list layout.

Default

Simple text items with dividers.

html
General
Privacy
Notifications
Appearance
Language 
<div class="uc-rounded-xl uc-border">
  <div class="uc-px-4 uc-py-3">
    <span class="uc-text-sm uc-font-medium">General</span>
  </div>
  <hr />
  <div class="uc-px-4 uc-py-3">
    <span class="uc-text-sm uc-font-medium">Privacy</span>
  </div>
  <hr />
  <div class="uc-px-4 uc-py-3">
    <span class="uc-text-sm uc-font-medium">Notifications</span>
  </div>
</div>

With Description

Title and subtitle for each list item.

html
Display Name
Your name as shown to other users
Email Address
Used for login and notifications
Password
Last changed 3 months ago
Two-Factor Authentication
Add an extra layer of security
<div class="uc-rounded-xl uc-border">
  <div class="uc-px-4 uc-py-3">
    <div class="uc-text-sm uc-font-medium">Display Name</div>
    <div class="uc-text-sm uc-text-fg-disabled">Your name as shown to other users</div>
  </div>
  <hr />
  <div class="uc-px-4 uc-py-3">
    <div class="uc-text-sm uc-font-medium">Email Address</div>
    <div class="uc-text-sm uc-text-fg-disabled">Used for login and notifications</div>
  </div>
  ...
</div>

With Leading Icon/Avatar

Avatar or icon before the text content.

html
AS
Alice Smith
alice.smith@example.com
BJ
Bob Johnson
bob.johnson@example.com
CW
Carol Williams
carol.williams@example.com
DM
David Miller
david.miller@example.com
<div class="uc-rounded-xl uc-border">
  <div class="uc-flex uc-items-center uc-gap-3 uc-px-4 uc-py-3">
    <div class="uc-flex-shrink-0 uc-w-10 uc-h-10 uc-rounded-full uc-bg-accents-blue/10 uc-flex uc-items-center uc-justify-center uc-text-sm uc-font-semibold uc-text-accents-blue">AS</div>
    <div class="uc-flex-1 uc-min-w-0">
      <div class="uc-text-sm uc-font-medium">Alice Smith</div>
      <div class="uc-text-sm uc-text-fg-disabled uc-truncate">alice.smith@example.com</div>
    </div>
  </div>
  <hr />
  ...
</div>

With Trailing

Items with trailing chevrons or badges.

html
Notifications
12
Storage
24.5 GB
Battery
87%
Wi-Fi
Connected 
<div class="uc-rounded-xl uc-border">
  <div class="uc-flex uc-items-center uc-justify-between uc-px-4 uc-py-3">
    <span class="uc-text-sm uc-font-medium">Notifications</span>
    <div class="uc-flex uc-items-center uc-gap-2">
      <span class="uc-inline-flex uc-items-center uc-justify-center uc-h-5 uc-min-w-[20px] uc-px-1.5 uc-text-[11px] uc-font-semibold uc-bg-accents-red uc-text-constant-white uc-rounded-full">12</span>
      <svg>...</svg>
    </div>
  </div>
  <hr />
  ...
</div>

Grouped

Sections with headers, like iOS settings.

html

Account

Profile
Security
Notifications

Preferences

Appearance
System
Language
English

Danger Zone

Sign Out
Delete Account 
<div class="uc-space-y-6">
  <div>
    <h3 class="uc-text-xs uc-font-medium uc-text-fg-disabled uc-uppercase uc-tracking-wider uc-px-4 uc-mb-1.5">Account</h3>
    <div class="uc-rounded-xl uc-border">
      <div class="uc-flex uc-items-center uc-justify-between uc-px-4 uc-py-3">
        <div class="uc-flex uc-items-center uc-gap-3">
          <svg>...</svg>
          <span class="uc-text-sm uc-font-medium">Profile</span>
        </div>
        <svg>...</svg>
      </div>
      <hr />
      ...
    </div>
  </div>
  ...
</div>

Interactive

Selectable items with checkmarks.

html
System Default
Light Mode
Dark Mode
High Contrast 
<div class="uc-rounded-xl uc-border">
  <div class="uc-flex uc-items-center uc-justify-between uc-px-4 uc-py-3 uc-hover:bg-neutrals-subtle uc-transition-colors uc-cursor-pointer">
    <span class="uc-text-sm uc-font-medium">System Default</span>
    <svg>...</svg>
  </div>
  <hr />
  <div class="uc-flex uc-items-center uc-justify-between uc-px-4 uc-py-3 uc-hover:bg-neutrals-subtle uc-transition-colors uc-cursor-pointer">
    <span class="uc-text-sm uc-font-medium">Light Mode</span>
    <div class="uc-w-4 uc-h-4"></div>
  </div>
  ...
</div>

API Reference

All CSS classes available for the List component.

Class Type Description
uc-rounded-xl uc-border uc-border-border-default Container Rounded card container with border for list groups
uc-px-4 uc-py-3 Spacing Standard list item padding
uc-text-sm uc-font-medium Typography Default item text style
uc-text-fg-disabled Color Secondary text and description color
uc-flex uc-items-center uc-justify-between Layout Horizontal layout with trailing content
uc-flex uc-items-center uc-gap-3 Layout Leading icon or avatar with text
uc-hover:bg-neutrals-subtle State Hover background for interactive items
uc-cursor-pointer State Pointer cursor for clickable items
uc-text-accents-red Color Danger text for destructive actions

Accessibility

Keyboard and screen reader support.

Feature Details
Semantics Use ul/ol/li elements for proper list semantics
Navigation Screen readers announce list length and position (e.g. "item 2 of 5")
Interactive Clickable list items should use button or anchor elements inside li
Description Complex list items benefit from aria-label summarizing the content