ListGroup Component Showcase

Introduction

The ListGroup component is a versatile and customizable component designed to display lists with various layout options and animations. Below are examples demonstrating different configurations, including vertical and horizontal layouts with fade and slide animations.

Usage Examples

Vertical Layout with Fade Animation

<ListGroup
  items={[
    { id: '1', content: 'Item 1', href: '#' },
    { id: '2', content: 'Item 2', href: '#' },
    { id: '3', content: 'Item 3' },
    { id: '4', content: 'Item 4', href: '#' },
  ]}
  layout="vertical"
  animation="fade"
/>

Horizontal Layout with Slide Animation

<ListGroup
  items={[
    { id: '1', content: 'Item 1', href: '#' },
    { id: '2', content: 'Item 2', href: '#' },
    { id: '3', content: 'Item 3' },
    { id: '4', content: 'Item 4', href: '#' },
  ]}
  layout="horizontal"
  animation="slide"
/>

Vertical Layout with Custom Styling

  • Custom Item 1
  • Custom Item 2
  • Custom Item 3
<ListGroup
  items={[
    { id: '1', content: 'Custom Item 1' },
    { id: '2', content: 'Custom Item 2' },
    { id: '3', content: 'Custom Item 3' },
  ]}
  layout="vertical"
  animation="fade"
  className="border border-gray-300 rounded-lg shadow-lg"
/>