List

List and ListItem provide a consistent layout for settings, navigation, activity feeds and operational rows. Each item can render content before the label through leading, after it through trailing, or both. Use dense when vertical space matters.

import { Badge, List, ListItem } from "@pompeitech/vesuvius-ui";

Leading and trailing content

NotificationsYou have new activity3
Account settings›

Dense

Use dense on an item to reduce its padding and gap for compact tables, menus or status lists.

Maya Chen
Online
Noah Williams
Away

API

List — renders a <ul> and forwards native list props.

Prop	Type	Default	Description
`dividers`	`boolean`	`false`	Adds separators between adjacent items.

ListItem — renders an <li> and forwards native list-item props.

Prop	Type	Default	Description
`leading`	`ReactNode`		Content before the main item content.
`trailing`	`ReactNode`		Content after the main item content.
`dense`	`boolean`	`false`	Uses a tighter layout with reduced padding and gap.

The item content can be any React node, including a title and secondary description. leading and trailing are layout slots, so the component keeps their sizing and alignment consistent without requiring utility classes on the item itself.