Skip to main content
Version: 1.0.3

List-Basic

Overview​

The List-Basic component provides a clean and accessible way to display lists of content with consistent spacing. It supports both unordered lists (bullet points) and ordered lists (numbers), making it perfect for feature lists, instructions, or any content that needs to be organized in a list format.

Preview​

  • First item
  • Second item
  • Third item

Installation​

ignix add component list-basic

Usage​

Import the component:

import { ListBasic } from './components/ui/list-basic';

Basic Usage​

The simplest way to use ListBasic is with the items prop:

function BasicList() {
  return (
    <ListBasic 
      items={['Item 1', 'Item 2', 'Item 3']}
    />
  );
}

Ordered List​

To create a numbered list, set the type prop to "ordered":

function OrderedList() {
  return (
    <ListBasic 
      items={['First step', 'Second step', 'Third step']}
      type="ordered"
    />
  );
}

Custom Spacing​

Control the spacing between items using the spacing prop:

function CustomSpacing() {
  return (
    <ListBasic 
      items={['Item 1', 'Item 2', 'Item 3']}
      spacing="lg"  // Options: 'sm', 'md', 'lg'
    />
  );
}

Using Children​

For more complex content, you can use the children prop:

function ComplexList() {
  return (
    <ListBasic type="unordered" spacing="md">
      <li>
        <strong>Bold item</strong> with additional text
      </li>
      <li>
        Item with <a href="#">a link</a>
      </li>
      <li>
        <em>Italic item</em> for emphasis
      </li>
    </ListBasic>
  );
}

Interactive Demo​

    Variants​

    Spacing Variants​

    The component supports three spacing options to control the vertical spacing between list items:

    Spacing Variants

    Small Spacing

    • Item one
    • Item two
    • Item three

    Medium Spacing

    • Item one
    • Item two
    • Item three

    Large Spacing

    • Item one
    • Item two
    • Item three

    List Types​

    Choose between unordered (bullet points) and ordered (numbers) lists:

    List Types

    Unordered List

    • Bullet point one
    • Bullet point two
    • Bullet point three

    Ordered List

    1. Numbered item one
    2. Numbered item two
    3. Numbered item three

    Using Children​

    When you need more control over individual list items, use the children prop:

    Using Children

    • Bold item with additional text
    • Item with a link
    • Italic item for emphasis
    • Item with code inline

    Props​

    PropTypeDefaultDescription
    itemsReact.ReactNode[][]Array of items to display in the list. Can be strings or React nodes.
    type'unordered' | 'ordered''unordered'Type of list marker. 'unordered' for bullet points, 'ordered' for numbers.
    spacing'sm' | 'md' | 'lg''md'Spacing size between list items. 'sm' (8px), 'md' (12px), 'lg' (16px).
    classNamestringundefinedAdditional CSS classes to apply to the list container.
    childrenReact.ReactNodeundefinedAlternative way to pass list items as children. If provided, items prop will be ignored.

    Examples​

    Feature List​

    A common use case for displaying product features:

    <ListBasic 
      items={[
        'Responsive design for all devices',
        'Dark mode support',
        'Accessible components',
        'TypeScript support',
        'Customizable themes'
      ]}
      type="unordered"
      spacing="md"
    />

    Step-by-Step Instructions​

    Perfect for tutorials or guides:

    <ListBasic 
      items={[
        'Open the application',
        'Navigate to Settings',
        'Select your preferences',
        'Click Save to apply changes'
      ]}
      type="ordered"
      spacing="md"
    />

    Mixed Content List​

    Using children for complex content:

    <ListBasic type="unordered" spacing="lg">
      <li className="flex items-start gap-2">
        <span className="text-primary">✓</span>
        <span>Completed task with checkmark</span>
      </li>
      <li className="flex items-start gap-2">
        <span className="text-warning">⚠</span>
        <span>Warning item with icon</span>
      </li>
      <li className="flex items-start gap-2">
        <span className="text-destructive">✗</span>
        <span>Error item with icon</span>
      </li>
    </ListBasic>

    Accessibility​

    The ListBasic component uses semantic HTML (<ul> and <ol>) which provides:

    • Screen reader support: Screen readers can identify and navigate lists properly
    • Keyboard navigation: Standard list navigation works as expected
    • Semantic meaning: The list structure is clear to assistive technologies

    Best Practices​

    1. Use unordered lists for items that don't have a specific order (features, options, etc.)
    2. Use ordered lists for sequential steps, rankings, or numbered instructions
    3. Choose appropriate spacing based on your design needs:
      • sm: For compact layouts or when space is limited
      • md: For standard content (default)
      • lg: For better readability and visual separation
    4. Use children prop when you need to customize individual items with links, icons, or formatting
    5. Keep items concise for better readability and scanning