v1.1.1

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="vt-rounded-xl vt-border vt-border-border-default">
  <div class="vt-px-4 vt-py-3">
    <span class="vt-text-sm vt-font-medium">General</span>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-px-4 vt-py-3">
    <span class="vt-text-sm vt-font-medium">Privacy</span>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-px-4 vt-py-3">
    <span class="vt-text-sm vt-font-medium">Notifications</span>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-px-4 vt-py-3">
    <span class="vt-text-sm vt-font-medium">Appearance</span>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-px-4 vt-py-3">
    <span class="vt-text-sm vt-font-medium">Language</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="vt-rounded-xl vt-border vt-border-border-default">
  <div class="vt-px-4 vt-py-3">
    <div class="vt-text-sm vt-font-medium">Display Name</div>
    <div class="vt-text-sm vt-text-foreground-muted">Your name as shown to other users</div>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-px-4 vt-py-3">
    <div class="vt-text-sm vt-font-medium">Email Address</div>
    <div class="vt-text-sm vt-text-foreground-muted">Used for login and notifications</div>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-px-4 vt-py-3">
    <div class="vt-text-sm vt-font-medium">Password</div>
    <div class="vt-text-sm vt-text-foreground-muted">Last changed 3 months ago</div>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-px-4 vt-py-3">
    <div class="vt-text-sm vt-font-medium">Two-Factor Authentication</div>
    <div class="vt-text-sm vt-text-foreground-muted">Add an extra layer of security</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="vt-rounded-xl vt-border vt-border-border-default">
  <div class="vt-list-item">
    <div class="vt-avatar vt-avatar-md vt-bg-info-fill/10 vt-text-info-fill vt-font-semibold">AS</div>
    <div class="vt-flex-1 vt-min-w-0">
      <div class="vt-text-sm vt-font-medium">Alice Smith</div>
      <div class="vt-text-sm vt-text-foreground-muted vt-truncate">alice.smith@example.com</div>
    </div>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-list-item">
    <div class="vt-avatar vt-avatar-md vt-bg-info-fill/10 vt-text-info-fill vt-font-semibold">BJ</div>
    <div class="vt-flex-1 vt-min-w-0">
      <div class="vt-text-sm vt-font-medium">Bob Johnson</div>
      <div class="vt-text-sm vt-text-foreground-muted vt-truncate">bob.johnson@example.com</div>
    </div>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-list-item">
    <div class="vt-avatar vt-avatar-md vt-bg-info-fill/10 vt-text-info-fill vt-font-semibold">CW</div>
    <div class="vt-flex-1 vt-min-w-0">
      <div class="vt-text-sm vt-font-medium">Carol Williams</div>
      <div class="vt-text-sm vt-text-foreground-muted vt-truncate">carol.williams@example.com</div>
    </div>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-list-item">
    <div class="vt-avatar vt-avatar-md vt-bg-info-fill/10 vt-text-info-fill vt-font-semibold">DM</div>
    <div class="vt-flex-1 vt-min-w-0">
      <div class="vt-text-sm vt-font-medium">David Miller</div>
      <div class="vt-text-sm vt-text-foreground-muted vt-truncate">david.miller@example.com</div>
    </div>
  </div>
</div>

With Trailing

Items with trailing chevrons or badges.

html
Notifications
12
Storage
24.5 GB
Battery
87%
Wi-Fi
Connected 
<div class="vt-rounded-xl vt-border vt-border-border-default">
  <div class="vt-flex vt-items-center vt-justify-between vt-px-4 vt-py-3">
    <span class="vt-text-sm vt-font-medium">Notifications</span>
    <div class="vt-flex vt-items-center vt-gap-2">
      <span class="vt-count-badge">12</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-text-foreground-muted">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </div>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-flex vt-items-center vt-justify-between vt-px-4 vt-py-3">
    <span class="vt-text-sm vt-font-medium">Storage</span>
    <div class="vt-flex vt-items-center vt-gap-2">
      <span class="vt-text-sm vt-text-foreground-muted">24.5 GB</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-text-foreground-muted">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </div>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-flex vt-items-center vt-justify-between vt-px-4 vt-py-3">
    <span class="vt-text-sm vt-font-medium">Battery</span>
    <div class="vt-flex vt-items-center vt-gap-2">
      <span class="vt-text-sm vt-text-foreground-muted">87%</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-text-foreground-muted">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </div>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-flex vt-items-center vt-justify-between vt-px-4 vt-py-3">
    <span class="vt-text-sm vt-font-medium">Wi-Fi</span>
    <div class="vt-flex vt-items-center vt-gap-2">
      <span class="vt-text-sm vt-text-foreground-muted">Connected</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-text-foreground-muted">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </div>
  </div>
</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="vt-space-y-6">
  <!-- Group 1 -->
  <div>
    <h3 class="vt-section-label vt-px-4 vt-mb-1.5">Account</h3>
    <div class="vt-rounded-xl vt-border vt-border-border-default">
      <div class="vt-flex vt-items-center vt-justify-between vt-px-4 vt-py-3">
        <div class="vt-flex vt-items-center vt-gap-3">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-user vt-w-5 vt-h-5 vt-text-foreground-muted">
            <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>
          </svg>
          <span class="vt-text-sm vt-font-medium">Profile</span>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-text-foreground-muted">
          <path d="m9 18 6-6-6-6"></path>
        </svg>
      </div>
      <div class="vt-separator vt-separator-h"></div>
      <div class="vt-flex vt-items-center vt-justify-between vt-px-4 vt-py-3">
        <div class="vt-flex vt-items-center vt-gap-3">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-lock vt-w-5 vt-h-5 vt-text-foreground-muted">
            <rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
          </svg>
          <span class="vt-text-sm vt-font-medium">Security</span>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-text-foreground-muted">
          <path d="m9 18 6-6-6-6"></path>
        </svg>
      </div>
      <div class="vt-separator vt-separator-h"></div>
      <div class="vt-flex vt-items-center vt-justify-between vt-px-4 vt-py-3">
        <div class="vt-flex vt-items-center vt-gap-3">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-bell vt-w-5 vt-h-5 vt-text-foreground-muted">
            <path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path>
          </svg>
          <span class="vt-text-sm vt-font-medium">Notifications</span>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-text-foreground-muted">
          <path d="m9 18 6-6-6-6"></path>
        </svg>
      </div>
    </div>
  </div>

  <!-- Group 2 -->
  <div>
    <h3 class="vt-section-label vt-px-4 vt-mb-1.5">Preferences</h3>
    <div class="vt-rounded-xl vt-border vt-border-border-default">
      <div class="vt-flex vt-items-center vt-justify-between vt-px-4 vt-py-3">
        <div class="vt-flex vt-items-center vt-gap-3">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-paintbrush vt-w-5 vt-h-5 vt-text-foreground-muted">
            <path d="m14.622 17.897-10.68-2.913"></path><path d="M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z"></path><path d="M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15"></path>
          </svg>
          <span class="vt-text-sm vt-font-medium">Appearance</span>
        </div>
        <span class="vt-text-sm vt-text-foreground-muted">System</span>
      </div>
      <div class="vt-separator vt-separator-h"></div>
      <div class="vt-flex vt-items-center vt-justify-between vt-px-4 vt-py-3">
        <div class="vt-flex vt-items-center vt-gap-3">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-languages vt-w-5 vt-h-5 vt-text-foreground-muted">
            <path d="m5 8 6 6"></path><path d="m4 14 6-6 2-3"></path><path d="M2 5h12"></path><path d="M7 2h1"></path><path d="m22 22-5-10-5 10"></path><path d="M14 18h6"></path>
          </svg>
          <span class="vt-text-sm vt-font-medium">Language</span>
        </div>
        <span class="vt-text-sm vt-text-foreground-muted">English</span>
      </div>
    </div>
  </div>

  <!-- Group 3 -->
  <div>
    <h3 class="vt-section-label vt-px-4 vt-mb-1.5">Danger Zone</h3>
    <div class="vt-rounded-xl vt-border vt-border-border-default">
      <div class="vt-flex vt-items-center vt-justify-between vt-px-4 vt-py-3">
        <span class="vt-text-sm vt-font-medium vt-text-error-fill">Sign Out</span>
      </div>
      <div class="vt-separator vt-separator-h"></div>
      <div class="vt-flex vt-items-center vt-justify-between vt-px-4 vt-py-3">
        <span class="vt-text-sm vt-font-medium vt-text-error-fill">Delete Account</span>
      </div>
    </div>
  </div>
</div>

Interactive

Selectable items with checkmarks.

html
System Default
Light Mode
Dark Mode
High Contrast 
<div class="vt-rounded-xl vt-border vt-border-border-default">
  <div class="vt-list-item vt-justify-between vt-cursor-pointer" onclick="this.parentElement.querySelectorAll('.vt-list-check').forEach(function(c){c.classList.add('vt-hidden')}); this.querySelector('.vt-list-check').classList.remove('vt-hidden')">
    <span class="vt-text-sm vt-font-medium">System Default</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-list-check">
      <path d="M20 6 9 17l-5-5"></path>
    </svg>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-list-item vt-justify-between vt-cursor-pointer" onclick="this.parentElement.querySelectorAll('.vt-list-check').forEach(function(c){c.classList.add('vt-hidden')}); this.querySelector('.vt-list-check').classList.remove('vt-hidden')">
    <span class="vt-text-sm vt-font-medium">Light Mode</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-list-check vt-hidden">
      <path d="M20 6 9 17l-5-5"></path>
    </svg>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-list-item vt-justify-between vt-cursor-pointer" onclick="this.parentElement.querySelectorAll('.vt-list-check').forEach(function(c){c.classList.add('vt-hidden')}); this.querySelector('.vt-list-check').classList.remove('vt-hidden')">
    <span class="vt-text-sm vt-font-medium">Dark Mode</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-list-check vt-hidden">
      <path d="M20 6 9 17l-5-5"></path>
    </svg>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-list-item vt-justify-between vt-cursor-pointer" onclick="this.parentElement.querySelectorAll('.vt-list-check').forEach(function(c){c.classList.add('vt-hidden')}); this.querySelector('.vt-list-check').classList.remove('vt-hidden')">
    <span class="vt-text-sm vt-font-medium">High Contrast</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-list-check vt-hidden">
      <path d="M20 6 9 17l-5-5"></path>
    </svg>
  </div>
</div>

Guidelines

Vertical stack of list-item rows inside a card (settings, notifications). Column data → table.

Display Name
Shown to other users
Email Address
Used for login
Do
Group related rows in a card and divide them with separators.
Display Name
Shown to other users
Email Address
Used for login
Don't
Don't float rows with no container or dividers.
System Default
Dark Mode
Do
Mark the selected row with a trailing check.
NameRoleStatusDate
AliceAdminActiveJan 4
Don't
Don't cram multi-column data into a list — use a table.

API Reference

All CSS classes available for the List component.

Class Type Description
vt-rounded-xl vt-border vt-border-border-default Container Rounded card container with border for list groups
vt-px-4 vt-py-3 Spacing Standard list item padding
vt-text-sm vt-font-medium Typography Default item text style
vt-text-foreground-muted Color Secondary text and description color
vt-flex vt-items-center vt-justify-between Layout Horizontal layout with trailing content
vt-flex vt-items-center vt-gap-3 Layout Leading icon or avatar with text
vt-hover:bg-surface-subtle State Hover background for interactive items
vt-cursor-pointer State Pointer cursor for clickable items
vt-text-error-fill 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
Built with:
Icons