Base

Class	Description
.ui-list	Base class

Spacing

Class	Value
.ui-list--compact	compact
.ui-list--loose	loose

Style

Class	Value
.ui-list--unstyled	unstyled
.ui-list--inline	inline

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-list-spacing	var(--ui-unit)	Spacing
--ui-list-marker-color	var(--ui-color-text-muted)	Marker color
--ui-list-indent	var(--ui-space-3)	Indent
--ui-list-line-height	var(--ui-line-height-md)	Line height

<!-- Use on ol for numbered markers. -->
<ol class="ui-list">
  <li>Create the branch</li>
  <li>Implement the feature</li>
  <li>Open a pull request</li>
  <li>Merge after review</li>
</ol>

<!-- Removes markers and indent for nav or custom lists. -->
<ul class="ui-list ui-list--unstyled">
  <li>No bullet markers</li>
  <li>No inline padding</li>
  <li>Clean vertical stack</li>
</ul>

<!-- Horizontal flow with wrapping. Markers removed. -->
<ul class="ui-list ui-list--inline">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>TypeScript</li>
  <li>React</li>
</ul>

<!-- Control gap between items with compact or loose variants. -->
<div class="ui-column ui-gap-2">
  <p>Compact</p>
  <ul class="ui-list ui-list--compact">
    <li>Tight spacing</li>
    <li>No gap between items</li>
    <li>Dense content</li>
  </ul>
  <p>Default</p>
  <ul class="ui-list">
    <li>Standard spacing</li>
    <li>One grid unit gap</li>
    <li>Balanced readability</li>
  </ul>
  <p>Loose</p>
  <ul class="ui-list ui-list--loose">
    <li>Extra breathing room</li>
    <li>Two grid units gap</li>
    <li>Prominent separation</li>
  </ul>
</div>

<!-- Lists inside lists inherit spacing and show sub-level markers. -->
<ul class="ui-list">
  <li>Top-level item</li>
  <li>
    <span>Parent with children</span>
    <ul class="ui-list">
      <li>Nested child</li>
      <li>Another nested child</li>
    </ul>
  </li>
  <li>Back to top level</li>
</ul>