List

import { List, ListItem } from '@hanzo/ui'

Basic

Four rows in a plain vertical list.

First item in the list
Second item in the list
Third item in the list
Fourth item in the list

export function Basic() {
  return (
    <List>
      <ListItem>First item in the list</ListItem>
      <ListItem>Second item in the list</ListItem>
      <ListItem>Third item in the list</ListItem>
      <ListItem>Fourth item in the list</ListItem>
    </List>
  )
}

Rich rows

A row can hold more than text, like any other element.

report.pdf1.2 MB
invoice.csv48 KB
cover.png3.4 MB

export function RichRows() {
  const files = [
    { name: "report.pdf", size: "1.2 MB" },
    { name: "invoice.csv", size: "48 KB" },
    { name: "cover.png", size: "3.4 MB" },
  ]

  return (
    <List>
      {files.map((file) => (
        <ListItem key={file.name}>
          <YStack flexDirection="row" justify="space-between">
            <span>{file.name}</span>
            <span>{file.size}</span>
          </YStack>
        </ListItem>
      ))}
    </List>
  )
}

Empty state

An empty list still renders its `<ul>` frame.

export function Empty() {
  return <List aria-label="no results" />
}

Types

export type ListProps = React.ComponentProps<typeof ListFrame>

export type ListItemProps = React.ComponentProps<typeof ListItemFrame>

Exports

ListListItemtype ListItemPropstype ListProps