List

Display a collection of items in a vertical or horizontal layout with optional dividers and active states.

Installation

Usage

import { List } from "@/registry/core/list";

export default () => (
  <List>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </List>
);

Examples

Vertical List

<List direction="vertical">
  <li>Dashboard</li>
  <li>Settings</li>
  <li>Profile</li>
  <li>Logout</li>
</List>

Horizontal List

<List direction="horizontal">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</List>

Without Dividers

<List hideDividers>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</List>

With Active State

<List>
  <li>Dashboard</li>
  <li data-active="true">Settings</li>
  <li>Profile</li>
</List>

API Reference

List

Extends ul element props.

List Item

Use standard <li> elements as children with optional data attributes:

Accessibility

• Uses semantic <ul> and <li> elements
• Active state is communicated via data-active attribute
• Hover states provide clear visual feedback
• Keyboard accessible when used with interactive elements
• Icons inherit text color for consistent styling

Notes

• Active items are styled with primary background and text color
• Counts with data-type="count" are automatically positioned with ml-auto
• Icons automatically inherit the current text color
• Vertical lists have a max width of 228px (14.25rem)
• Horizontal lists have a max width of fit-content
• Hover states apply to all list items by default
• Dividers can be hidden with the hideDividers prop