List

React List components are used to display a collection of related items. They are commonly used for navigation menus, settings panels, item groups, and structured content lists.

This List component is built with React and styled using Tailwind CSS. It supports vertical and horizontal layouts, dividers, and active item states.

Installation

Usage

Import the component and render list items as children.

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

Use the vertical layout for stacked navigation or menus.

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

Horizontal List

Use the horizontal layout for inline navigation or filters.

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

Without Dividers

Disable dividers when visual separation is not needed.

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

With Active State

Mark an item as active to indicate the current selection.

<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