List

List component is used to display ordered and unordered lists with customizable markers, spacing, and colors. It supports both native list markers and custom icon markers.

import { List } from "@ninna-ui/primitives"

pnpm add @ninna-ui/primitives

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the List and ListItem components to display lists.

import { List, ListItem } from "@ninna-ui/primitives";

export default function Example() {
  return (
    <List>
      <ListItem>First item</ListItem>
      <ListItem>Second item</ListItem>
      <ListItem>Third item</ListItem>
    </List>
  );
}

Basic

Default list rendering.

First item
Second item
Third item

Types

Ordered and unordered list types.

Unordered (default)

Apple
Banana
Cherry

Ordered

First step
Second step
Third step

Markers

Different marker styles for lists.

Disc (default)

Item one
Item two
Item three

Circle

Item one
Item two
Item three

Square

Item one
Item two
Item three

Decimal

Item one
Item two
Item three

Alpha

Item one
Item two
Item three

Roman

Item one
Item two
Item three

Icon Markers

Lists with icon markers like check and arrow.

Check markers

Completed task
Another completed task
Yet another done

Arrow markers

Navigate here
Then go here
Finally here

Spacing

Different spacing options between list items.

None

Item one
Item two
Item three

Small

Item one
Item two
Item three

Medium

Item one
Item two
Item three

Large

Item one
Item two
Item three

Colors

Lists with different marker colors.

Neutral

Item one
Item two

Primary

Item one
Item two

Secondary

Item one
Item two

Accent

Item one
Item two

Info

Item one
Item two

Success

Item one
Item two

Warning

Item one
Item two

Danger

Item one
Item two

Use Cases

Real-world examples of List component usage.

Feature List

Unlimited projects
Priority support
Advanced analytics
Custom integrations
Team collaboration

Getting Started

Create an account on our platform
Verify your email address
Complete your profile setup
Start your first project

Quick Links

Documentation
API Reference
Examples
Community Forum

Project Structure

src/
- components/
- hooks/
- utils/
public/
- images/
- fonts/
package.json
README.md

System Requirements

Node.js 18.0 or higher
npm 9.0 or pnpm 8.0
Modern browser (Chrome, Firefox, Safari, Edge)
4GB RAM minimum

API Reference

Complete list of props for List and ListItem components.

List Props

Props

Prop	Type	Default	Description
`type`	`'unordered' \| 'ordered'`	`'unordered'`	List type (ul or ol)
`spacing`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	Spacing between list items
`marker`	`'disc' \| 'circle' \| 'square' \| 'decimal' \| 'alpha' \| 'roman' \| 'none' \| 'check' \| 'arrow'`	`'disc' (unordered) / 'decimal' (ordered)`	Marker style
`markerColor`	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'neutral'`	Marker color
`icon`	`ReactNode`	-	Custom icon for all list items
`className`	`string`	-	Additional CSS classes

ListItem Props

Props

Prop	Type	Default	Description
`icon`	`ReactNode`	-	Custom icon for this item (overrides list icon)
`iconColor`	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	-	Icon color for this item
`className`	`string`	-	Additional CSS classes

Accessibility

Semantic HTML: Uses native ul/ol and li elements for proper semantics
List role: Proper list role is automatically applied
Screen readers: List items are properly announced with count
Nested lists: Supports proper nesting with correct hierarchy
Icon markers: Icons are hidden from screen readers (aria-hidden)