Layout

List

Flexible list component supporting data-driven rendering, avatars, actions, headers, footers, and grid layout.

Team Members

AM
Alice Martin
Product Designer
View
BC
Bob Chen
Frontend Engineer
View
CD
Clara Dupont
Backend Engineer
View

Installation

npx benflux-ui add list

Usage

import { List, ListItem } from "@benflux-ui/react"

// Data-driven
<List
  bordered
  header="Members"
  dataSource={users}
  renderItem={(user) => (
    <ListItem
      avatar={<Avatar><AvatarFallback>{user.initials}</AvatarFallback></Avatar>}
      title={user.name}
      description={user.role}
      actions={[<a href="#">Edit</a>]}
    />
  )}
/>

// Grid layout
<List
  grid={{ columns: 3, gap: 16 }}
  dataSource={items}
  renderItem={(item) => <Card>{item.title}</Card>}
/>

// Static children
<List bordered split>
  <ListItem title="Item 1" description="Description" />
  <ListItem title="Item 2" description="Description" />
</List>

Props — List

Prop	Type	Default	Description
dataSource	T[]	—	Array of items to render
renderItem	(item: T, index: number) => ReactNode	—	Render function for each item
bordered	boolean	false	Adds outer border and dividers
split	boolean	true	Show divider between items
header	ReactNode	—	Content rendered above the list
footer	ReactNode	—	Content rendered below the list
grid	{ columns: number; gap: number }	—	Render items in a CSS grid

Props — ListItem

Prop	Type	Default	Description
title	ReactNode	—	Primary text
description	ReactNode	—	Secondary text below the title
avatar	ReactNode	—	Avatar or icon displayed on the left
actions	ReactNode[]	—	Action links displayed on the right