Skip to Content
Dashflow Logo

List Component

A comprehensive guide to using the List component with examples, props, and best practices.

Overview

The List component provides a flexible list interface with support for ordered, unordered, and icon-based lists. It's designed to handle dynamic list data and various styling options.

Basic Usage

import { List } from '@dashflowx/core'


export default function ListExample() {
  const listArray = [
    { id: 1, content: 'First item' },
    { id: 2, content: 'Second item' },
    { id: 3, content: 'Third item' }
  ];


  return (
    <List 
      varients="unordered"
      listArray={listArray}
    />
  )
}

Preview:

  • List item 1
  • List item 2
  • List item 3

Props

PropTypeDefaultDescription
varients'ordered' | 'iconunordered' | 'unordered''unordered'The type of list to render
listArrayArray<iListArray>[]Array of list items
listClassNamestring''Additional CSS classes for the list
classNamestring''Additional CSS classes for the container

List Array Structure

interface iListArray {
  id: number;
  content: string;
  className?: string;
  icon?: JSX.Element;
}

Examples

Unordered List

import { List } from '@dashflowx/core'


export default function UnorderedList() {
  const listArray = [
    { id: 1, content: 'Feature 1' },
    { id: 2, content: 'Feature 2' },
    { id: 3, content: 'Feature 3' }
  ];


  return (
    <List 
      varients="unordered"
      listArray={listArray}
    />
  )
}

Preview:

  • List item 1
  • List item 2
  • List item 3

Ordered List

import { List } from '@dashflowx/core'


export default function OrderedList() {
  const listArray = [
    { id: 1, content: 'Step 1: Prepare ingredients' },
    { id: 2, content: 'Step 2: Mix ingredients' },
    { id: 3, content: 'Step 3: Cook for 30 minutes' }
  ];


  return (
    <List 
      varients="ordered"
      listArray={listArray}
    />
  )
}

Preview:

  1. List item 1
  2. List item 2
  3. List item 3

Icon Unordered List

import { List } from '@dashflowx/core'


export default function IconUnorderedList() {
  const listArray = [
    { id: 1, content: 'Fast delivery' },
    { id: 2, content: 'Quality guarantee' },
    { id: 3, content: '24/7 support' }
  ];


  return (
    <List 
      varients="iconunordered"
      listArray={listArray}
    />
  )
}

Preview:

  • •List item 1
  • •List item 2
  • •List item 3

Custom Styled List

import { List } from '@dashflowx/core'


export default function CustomStyledList() {
  const listArray = [
    { id: 1, content: 'Custom item 1' },
    { id: 2, content: 'Custom item 2' },
    { id: 3, content: 'Custom item 3' }
  ];


  return (
    <List 
      varients="unordered"
      listArray={listArray}
      listClassName="border border-blue-500 rounded-lg p-4"
      className="bg-blue-50"
    />
  )
}

Preview:

  • List item 1
  • List item 2
  • List item 3

Large List

import { List } from '@dashflowx/core'


export default function LargeList() {
  const listArray = [
    { id: 1, content: 'Item 1' },
    { id: 2, content: 'Item 2' },
    { id: 3, content: 'Item 3' },
    { id: 4, content: 'Item 4' },
    { id: 5, content: 'Item 5' },
    { id: 6, content: 'Item 6' }
  ];


  return (
    <List 
      varients="unordered"
      listArray={listArray}
    />
  )
}

Preview:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Common Use Cases

Feature List

const featureList = (
  <List 
    varients="iconunordered"
    listArray={[
      { id: 1, content: 'Fast performance' },
      { id: 2, content: 'Secure data' },
      { id: 3, content: 'Easy to use' }
    ]}
  />
);

Instructions List

const instructionsList = (
  <List 
    varients="ordered"
    listArray={[
      { id: 1, content: 'Download the app' },
      { id: 2, content: 'Create an account' },
      { id: 3, content: 'Start using the service' }
    ]}
  />
);
const navigationMenu = (
  <List 
    varients="unordered"
    listArray={[
      { id: 1, content: 'Home' },
      { id: 2, content: 'About' },
      { id: 3, content: 'Services' },
      { id: 4, content: 'Contact' }
    ]}
  />
);

Benefits List

const benefitsList = (
  <List 
    varients="iconunordered"
    listArray={[
      { id: 1, content: 'Free shipping' },
      { id: 2, content: '30-day return policy' },
      { id: 3, content: 'Customer support' }
    ]}
  />
);

Checklist

const checklist = (
  <List 
    varients="unordered"
    listArray={[
      { id: 1, content: 'Review requirements' },
      { id: 2, content: 'Design solution' },
      { id: 3, content: 'Implement features' },
      { id: 4, content: 'Test functionality' }
    ]}
  />
);

Best Practices

1. Appropriate List Type

Choose the right list type for your content.

// ✅ Good - Ordered list for steps
<List varients="ordered" listArray={steps} />


// ✅ Good - Unordered list for features
<List varients="unordered" listArray={features} />


// ✅ Good - Icon list for benefits
<List varients="iconunordered" listArray={benefits} />

2. Clear Content

Use clear and descriptive content for list items.

// ✅ Good - Clear content
const listArray = [
  { id: 1, content: 'Complete the registration form' },
  { id: 2, content: 'Verify your email address' }
];


// ❌ Avoid - Unclear content
const listArray = [
  { id: 1, content: 'Do stuff' },
  { id: 2, content: 'More stuff' }
];

3. Consistent Styling

Maintain consistent styling across your lists.

// ✅ Good - Consistent styling
<List 
  varients="unordered"
  listClassName="standard-list-style"
  listArray={items}
/>


// ❌ Avoid - Inconsistent styling
<List 
  varients="unordered"
  listClassName="random-styles"
  listArray={items}
/>

4. Proper Data Structure

Use proper data structure for list items.

// ✅ Good - Proper structure
const listArray = [
  { id: 1, content: 'Item 1' },
  { id: 2, content: 'Item 2' }
];


// ❌ Avoid - Missing required fields
const listArray = [
  { content: 'Item 1' },
  { content: 'Item 2' }
];

5. Accessible Content

Ensure list content is accessible to all users.

// ✅ Good - Accessible content
const listArray = [
  { id: 1, content: 'Clear and descriptive content' }
];


// ❌ Avoid - Unclear content
const listArray = [
  { id: 1, content: 'Click here' }
];

Customization

Custom Styling

You can customize the list appearance using CSS classes:

<List 
  varients="unordered"
  listArray={items}
  listClassName="border border-gray-300 rounded-lg p-4"
  className="bg-gray-50"
/>

Different Themes

Use different themes for different contexts:

// Light theme
<List 
  varients="unordered"
  listArray={items}
  listClassName="bg-white border-gray-200"
/>


// Dark theme
<List 
  varients="unordered"
  listArray={items}
  listClassName="bg-gray-900 border-gray-700 text-white"
/>


// Brand theme
<List 
  varients="unordered"
  listArray={items}
  listClassName="bg-blue-50 border-blue-200"
/>

Size Variations

Use different sizes for different emphasis levels:

// Small list
<List 
  varients="unordered"
  listArray={items}
  listClassName="text-sm space-y-1"
/>


// Standard list
<List 
  varients="unordered"
  listArray={items}
  listClassName="text-base space-y-2"
/>


// Large list
<List 
  varients="unordered"
  listArray={items}
  listClassName="text-lg space-y-3"
/>

Advanced Usage

Dynamic List Data

Load list data dynamically:

const [listData, setListData] = useState([]);


useEffect(() => {
  // Load list data
  loadListData().then(setListData);
}, []);


<List 
  varients="unordered"
  listArray={listData}
/>

Conditional List Type

Change list type based on conditions:

const [listType, setListType] = useState('unordered');


<List 
  varients={listType}
  listArray={items}
/>

Custom Icons

Use custom icons for icon lists:

const listArray = [
  { 
    id: 1, 
    content: 'Feature 1',
    icon: <span className="text-green-500">✓</span>
  },
  { 
    id: 2, 
    content: 'Feature 2',
    icon: <span className="text-blue-500">★</span>
  }
];
  • Li: For individual list items
  • Ul: For unordered lists
  • Ol: For ordered lists
  • Typography: For text styling
  • Card: For list containers

API Reference

For the complete API reference and advanced usage patterns, see the List API documentation.

Edit this page on GitHub
previousImage