List

Displays item collections with built-in selection and actions.

Items

Item One
Item Two
Item Three
import { List, Button } from "ui-lab-components";
 
export function Example() {
  return (
    <List aria-label="Items">
      <List.Header>
        <h2>Items</h2>
      </List.Header>
      <List.Item interactive>Item One</List.Item>
      <List.Item interactive>Item Two</List.Item>
      <List.Footer align="center">
        <Button variant="primary" size="sm">Load More</Button>
      </List.Footer>
    </List>
  );
}

Basic List

A simple list displaying basic items with selection and interaction support.

Items

Item One
Item Two
Item Three
import { List } from 'ui-lab-components';
import { Button } from 'ui-lab-components';
 
export default function Example() {
  return (
    <List aria-label="Basic List Example">
      <List.Header>
        <h2>Items</h2>
      </List.Header>
      <List.Item interactive>Item One</List.Item>
      <List.Item interactive>Item Two</List.Item>
      <List.Item interactive>Item Three</List.Item>
      <List.Footer align="center">
        <Button variant="primary" size="sm">
          Load More
        </Button>
      </List.Footer>
    </List>
  );
}
UI Lab