List

List can be used to display a list of items with List.Item as children.

List can be used to display a list of items with List.Item as children.

API Reference

Props

List

Name	Type	Default	Description
children*	React.ReactElement<ListItemProps>[]		The content of the list.

List.Item

Name	Type	Default	Description
type*	ListType		The type of the list item.
title*	string		The title of the list item.
subtitle*	string		The subtitle of the list item.
icon	IconEnum		The icon of the list item.
image	string		The image of the list item.
additional	string		The additional content of the list item.
count	{ value: number; icon: IconEnum; }		The count of the list item.
actions	ActionsProps		The actions for the list item.

Examples

Basic

import { Section, Header, List } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block>
      <List>
        <List.Item
          title="Project 1"
          subtitle="Subtitle"
          icon="PlayIcon"
        />
        <List.Item
          title="Project 2"
          subtitle="Subtitle"
          icon="PlayIcon"
        />
        <List.Item
          title="Project 3"
          subtitle="Subtitle"
          icon="PlayIcon"
        />
      </List>
    </Block>
  );
}

With additional content

import { Section, Header, List, Button } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block>
      <List>
        <List.Item
          title="Project 1"
          subtitle="Subtitle"
          icon="PlayIcon"
          additional="Additional content"
        />
        <List.Item
          title="Project 2"
          subtitle="Subtitle"
          icon="PlayIcon"
          additional="Additional content"
        />
        <List.Item
          title="Project 3"
          subtitle="Subtitle"
          icon="PlayIcon"
          additional="Additional content"
        />
      </List>
    </Block>
  );
}

With actions

import { Section, Header, List, Button } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block>
      <List>
        <List.Item
          title="Project 1"
          subtitle="Subtitle"
          icon="PlayIcon"
          actions={{ open: { url: "https://getstage.app" }}}
        />
        <List.Item
          title="Project 2"
          subtitle="Subtitle"
          icon="PlayIcon"
          actions={{ open: { url: "https://getstage.app" }}}
        />
        <List.Item
          title="Project 3"
          subtitle="Subtitle"
          icon="PlayIcon"
          actions={{ open: { url: "https://getstage.app" }}}
        />
      </List>
    </Block>
  );
}

Types

ListType

type ListType = "card" | "text" | "bullet" | "cover";

Supported list types for the List.Item component.