components / list

List

Semantic list of items with title, description, leading and trailing elements.

How to use

`List` renders a `<ul>` (`divided` draws lines between items); `ListItem` takes `title`, `description`, `leading` (e.g. an Avatar), `trailing` (e.g. a Badge or button) and extra `children`. The list is not interactive: put a link or button inside `title` or `trailing`.

preview

Camila Souza
Product designer
Active
Yuki Tanaka
Engineer
Pending

List.tsx

import { List, ListItem, Avatar, Badge } from "vaiperui";
 
<List divided>
  <ListItem
    leading={<Avatar name="Camila Souza" />}
    title="Camila Souza"
    description="Product designer"
    trailing={<Badge status="success">Active</Badge>}
  />
</List>

Divided

preview

Camila Souza
Designer
Yuki Tanaka
Engineer

divided

divided.tsx

<List divided>
  <ListItem title="Camila Souza" description="Designer" />
  <ListItem title="Yuki Tanaka" description="Engineer" />
</List>

Props

Prop	Values	Default	Description
divided	boolean	false	Line between items (List)
title	ReactNode	required	Item heading (ListItem)
description	ReactNode	none	Supporting text under the title
leading	ReactNode	none	Element before the text
trailing	ReactNode	none	Element at the end of the row
(native)	ul / li	none	Every native prop of the element, className, ref, etc.