List

import { List } from "@sugarcoat/ui-nxt";

<List bordered>
<List.Item>
  <List.ItemTitle>Item Title</List.ItemTitle>
</List.Item>
</List>

Basic Usage#

A simple list of items.

Anatomy#

The List component uses a compound component pattern:

<List>
  <List.Header />           {/* Optional header section */}
  <List.Item>               {/* List item */}
    <List.ItemTitle />      {/* Item title */}
    <List.ItemDescription />{/* Item description */}
    <List.ItemContent />    {/* Additional content */}
  </List.Item>
  <List.Footer />           {/* Optional footer section */}
</List>

With Header and Footer#

Lists can include header and footer sections.

Sizes#

Lists come in three sizes: sm, md (default), and lg.

Bordered#

Add a border around the list.

Shadow#

Add shadow depth with none, sm, md, or lg.

Interactive#

Make list items hoverable.

Item Content#

Use ItemContent for additional custom content within items.

Common Patterns#

Settings List#

Task List#

Props#

List (Root)#

List.Header, List.Footer, List.ItemTitle, List.ItemDescription, List.ItemContent#

List.Item#