Overview
List provides consistently styled lists for content areas. Use semantic spacing tokens on parent containers to control spacing. Supports feature (check icons), bullet, numbered, and definition list types.
Key Features
- Four list types: feature, bullet, numbered, and definition
- Feature lists with green check icons for key benefits
- Definition lists support term/description pairs
- Consistent typography with muted foreground color
When to Use
Use List for:
- Key features and benefits with check icons (feature)
- Step-by-step instructions (numbered)
- Term definitions or glossaries (definition)
Skip List when:
- Navigation lists - use nav elements
- Interactive lists with selection - use Listbox or similar
- Data tables - use table elements or ListTableBlock
Examples
Feature List
List with green check icons. Ideal for key features, benefits, or capabilities.
- Built-in search and filtering
- Keyboard navigation support
- Fully accessible by default
Bullet List
Unordered list with disc markers. Default type if not specified.
- Configure notification preferences
- Set up team members and roles
- Create your first project
Numbered List
Ordered list with decimal markers. Ideal for step-by-step instructions.
- Click the "New Project" button
- Enter project details
- Invite team members
- Configure project settings
- Launch your project
Definition List
Term/description pairs for glossaries, API documentation, or settings explanations.
- API Key
- Your unique identifier for API access
- Secret
- Keep this private, never share publicly
- Webhook URL
- Endpoint to receive real-time notifications
With SectionHeading
Lists automatically have correct spacing after SectionHeading components.
Key Features
- Lists use space-y-content for proper spacing after headings
- Parent containers control spacing, not components
Getting Started
- Install the package
- Import the component
- Add to your page
Props Reference
List Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'feature' | 'bullet' | 'numbered' | 'definition' | 'bullet' | List type: 'feature', 'bullet', 'numbered', or 'definition' |
children | ReactNode | required | ListItem children |
className | string | - | Additional CSS classes |
ListItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Item content |
term | string | - | Definition term (only for definition lists) |
Usage
import { SectionHeading, List, ListItem } from '@/ui/components';
// Feature list (green check icons)
<List type="feature">
<ListItem>Built-in search and filtering</ListItem>
<ListItem>Keyboard navigation support</ListItem>
<ListItem>Fully accessible by default</ListItem>
</List>
// Bullet list (disc markers)
<List type="bullet">
<ListItem>Configure notification preferences</ListItem>
<ListItem>Set up team members and roles</ListItem>
<ListItem>Create your first project</ListItem>
</List>
// Numbered list (steps)
<List type="numbered">
<ListItem>Click the "New Project" button</ListItem>
<ListItem>Enter project details</ListItem>
<ListItem>Invite team members</ListItem>
</List>
// Definition list (terms with descriptions)
<List type="definition">
<ListItem term="API Key">Your unique identifier for API access</ListItem>
<ListItem term="Secret">Keep this private, never share publicly</ListItem>
</List>