ListContainers

Flexible wrapper for lists and grouped content. Supports multiple variants such as `simple`, `card`, and `separate` layouts.

Simple

Minimal layout with dividers between items.

Payment integration
Oct 18, 2025
Completed

Seatmap redesign
Oct 20, 2025
In Progress

Ticket refund module
Oct 21, 2025
Pending

Card

Displays the list inside a bordered Card with internal dividers.

Payment integration
Oct 18, 2025
Completed

Seatmap redesign
Oct 20, 2025
In Progress

Ticket refund module
Oct 21, 2025
Pending

Separate

Renders each item inside its own Card, ideal for distinct content blocks.

Payment integration
Oct 18, 2025
Completed
Seatmap redesign
Oct 20, 2025
In Progress
Ticket refund module
Oct 21, 2025
Pending

Flat Card

Same as card but uses subtle borders for a flatter visual appearance.

Payment integration
Oct 18, 2025
Completed

Seatmap redesign
Oct 20, 2025
In Progress

Ticket refund module
Oct 21, 2025
Pending

Card Full

Adds horizontal padding and full-width alignment for dashboard sections.

Payment integration
Oct 18, 2025
Completed

Seatmap redesign
Oct 20, 2025
In Progress

Ticket refund module
Oct 21, 2025
Pending

Separate Full

Similar to separate but with larger padding and rounded corners.

Payment integration
Oct 18, 2025
Completed
Seatmap redesign
Oct 20, 2025
In Progress
Ticket refund module
Oct 21, 2025
Pending

Props

Configuration options for ListContainers.

items: T[] — The array of data to render in the list.
renderItem: (item, idx) => ReactNode — Function that defines how each list item is rendered.
variant?: ListContainerVariant — Layout style for rendering. Available values: simple, simple-full, card, card-full, flat-card, separate, separate-full.
className?: string — Additional Tailwind classes for custom layout.

Integration Example

Combine with Buttons or Links for interactive lists.

Payment integration
Oct 18, 2025
Seatmap redesign
Oct 20, 2025
Ticket refund module
Oct 21, 2025