List
Ordered/unordered list with custom markers, spacing control, and nested list support
List
Flexible list component for unordered and ordered lists with support for icons, variants, sizes and custom styling.
Basic unordered list
Use the default List for unordered items such as bullet-like lists, feature summaries or simple collections.
- First item
- Second item
- Third item
- Fourth item
Ordered list
Set ordered to display a numbered list. Perfect for steps in a process or instructions.
- First step
- Second step
- Third step
With icons
Use the icon prop on ListItem to add status icons, bullets or decorative elements.
- Completed task
- Failed task
- In progress
- Starred item
- Favorite item
Variants
Change presentation with variant — use bordered, striped, divided or glass depending on the surface and emphasis.
Divided
- Item with divider
- Another item
- Final item
Bordered
- Bordered item 1
- Bordered item 2
- Bordered item 3
Striped
- Striped item 1
- Striped item 2
- Striped item 3
- Striped item 4
Glass
- Glass effect item 1
- Glass effect item 2
- Glass effect item 3
Sizes
Control density with the size prop. Use sm for compact lists, lg for more spacious content.
Small
- Small list item
- Small list item
Medium (default)
- Medium list item
- Medium list item
Large
- Large list item
- Large list item
Lists inside cards
Combine List with Card to build task lists, activity feeds and grouped content.
Task list
Project tasks
- Complete project setup
- Design component architecture
- Implement core features
- Write documentation
- Deploy to production
Custom styled items
Extend visual language with className directly on ListItem for special emphasis.
- Important item with custom styling
- Subtle secondary information
- Emphasized item with underline
Usage Guidelines
When to Use
- Bullet points
- Numbered lists
- Feature lists
Accessibility
- Proper list semantics
- Nesting preserved for AT
Performance
- Native list elements
- CSS-only styling
Common Mistakes
- Deep nesting without indentation
- Inconsistent marker styles
Frequently Asked Questions
Related Components
View allCollapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
User avatar with image loading, fallback text generation, status indicators, and shape variants
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Status indicator with variant system, dot mode, positioning, and pulsing animation support