List Component

The List component provides a flexible foundation for creating structured, accessible lists with optional icons and custom styling. Perfect for feature lists, navigation menus, and content organization.

Key Features

• Flexible Structure: Support for both simple text and complex content

• Icon Integration: Optional icons with customizable styling

• Accessibility: Semantic HTML structure with proper list markup

• Customization: Extensive styling options and props

Basic Usage

Create lists using either the simplified array approach or individual list items when complex content is needed:

1
<List listItems={['First Item', 'Second Item', 'Third Item']} />
2
<!-- Using listItems prop -->
3

4
<List>
5
  <ListItem>First Item</ListItem>
6
  <ListItem>Second Item</ListItem>
7
  <ListItem>Third Item</ListItem>
8
</List>
9
<!-- Using ListItem components -->

Icon Integration

Add visual hierarchy with icons:

• Default icon alignment
• Consistent spacing
• Automatic sizing

1
---
2
import checkIcon from '@/assets/icons/check-circle.svg?raw';
3
---
4

5
<List>
6
  <ListItem icon={checkIcon}>Default icon alignment</ListItem>
7
  <ListItem icon={checkIcon}>Consistent spacing</ListItem>
8
  <ListItem icon={checkIcon}>Automatic sizing</ListItem>
9
</List>

Custom Icon Styling

• Custom icon styling

• Multiple icon options

1
<List>
2
    <ListItem icon={star} iconProps={{ class: 'text-secondary' }}>
3
        Custom icon styling
4
    </ListItem>
5
    <ListItem icon={arrow} iconProps={{ class: 'text-success' }}>
6
        Multiple icon options
7
    </ListItem>
8
</List>

Complex Content

Lists support rich content within items:

• Feature Title

  Detailed description of the feature goes here.

• Another Feature

  Can include any HTML content or components.

1
<List class="[&_icon]:mt-1 sm:[&_icon]:mt-1.5">
2
    <ListItem icon={checkIcon}>
3
        <div>
4
            <h3>Feature Title</h3>
5
            <p class="text-txt-secondary text-sm">Detailed description of the feature.</p>
6
        </div>
7
    </ListItem>
8
    <ListItem icon={checkIcon}>
9
        <div>
10
            <h3>Another Feature</h3>
11
            <p class="text-txt-secondary text-sm">Can include any HTML content.</p>
12
        </div>
13
    </ListItem>
14
</List>

Component API

List Props

ListItem Props

Common Use Cases