Docs
List

List

Continuous, vertical indexes of text or images. Lists consist of one or more list items, and can contain actions represented by icons and text.

First
Item
Second
Item
Third
Item

Installation

npm install @brudi/react-list

Usage

import { ScrollArea } from '@brudi/react-list'
<ListItem>
  <ListItem.Cell>Item</ListItem.Cell>
</ListItem>

Virtual List

You can combine the <List /> component with @tanstack/react-virtual to virtualize only the visible DOM nodes within massive scrollable elements.

See the Virtual List documentation for more information.

Examples

Grouped

Group Name
Actions
First
Item
Second
Item
Group Name
Actions
Third
Item

With Skeleton

Customization

npx @brudi/ui extend list

LabelMenubar