List

Displays a list of items with various styles and layouts.

Playground

Customize the List properties to see different variations.

  • First item
  • Second item
  • Third item

Customize

Installation

pnpm dlx shadcn@latest add https://shadcn-ui-variants.vercel.app/r/list.json

Overview

This component provides a flexible and stylish way to render ordered (<ol>) and unordered (<ul>) lists in React, with support for different bullet styles, spacing and custom icons.

Basic Usage

import { List, ListItem } from "@/components/ui/list";
<List> <ListItem>Item 1</ListItem> <ListItem>Item 2</ListItem> <ListItem>Item 3</ListItem> </List>

Examples

Nested Lists with different variants

  1. Main project setup
    • Initialize repository
    • Configure environment
      • Set up development variables
      • Configure production settings
    • Install dependencies
  2. Feature development
    • User authentication
    • Dashboard components
    • API integration
  3. Testing and deployment
    • Unit tests
    • Integration tests
    • Deployment pipeline

Nested lists with icons

  • Project Documentation
    • README.md
    • API Documentation
      • Authentication endpoints
      • User endpoints
      • Admin endpoints
    • Deployment Guide
  • Source Code
    • Frontend
      • Components
      • Pages
      • Utilities
    • Backend
      • Models
      • Controllers
      • Services

Interactive to-do list

  • Research component libraries
  • Design system implementation
  • Create reusable components
  • Write documentation
  • Unit testing

Custom icon and styles

Premium Plan Features
Everything you get with our premium subscription
  • Unlimited Projects

    Create as many projects as you need

  • Priority Support

    Get help within 2 hours, 24/7

  • Advanced Analytics

    Detailed insights and reporting

  • Custom Integrations

    Connect with your favorite tools

  • White-labeling

    Add your own branding

Different variants and custom styles

Basic
  • 5GB Storage
  • 2 Users
  • Basic Support
  • Advanced Features
  • Custom Domain
  • Analytics
Pro
  • 50GB Storage
  • 10 Users
  • Priority Support
  • Advanced Features
  • Custom Domain
  • Analytics
Enterprise
  • Unlimited Storage
  • Unlimited Users
  • 24/7 Support
  • Advanced Features
  • Custom Domain
  • Analytics
  • Custom Development

List Props

PropTypeDefault
icon
React.ReactNode—
variant
enum"default"
spacing
enum"default"
children
React.ReactNode—