List

Stable

A semantic list of related items with dividers, density and an optional bordered surface.

Use List for collections people scan top to bottom, such as members, templates or recent activity. Each row is a ListItem. Use Table instead when people need to compare values across columns.

Source Edit docs Report an issue

Overview

Amara OkaforSales · amara@binds.siOwner
Lukas NovakEngineering · lukas@binds.siAdmin
Priya RamanLegal · priya@binds.siMember

tsx

import { Avatar, Badge, List, ListItem } from '@bindshq/stance-react';

export function Basic() {
  return (
    <List aria-label="Organisation members">
      {[
        ['Amara Okafor', 'Sales · amara@binds.si', 'Owner'],
        ['Lukas Novak', 'Engineering · lukas@binds.si', 'Admin'],
        ['Priya Raman', 'Legal · priya@binds.si', 'Member'],
      ].map(([name, description, role]) => (
        <ListItem
          key={name}
          leading={<Avatar name={name!} size="sm" decorative />}
          title={name}
          description={description}
          meta={<Badge size="sm">{role}</Badge>}
        />
      ))}
    </List>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Amara OkaforSales · amara@binds.siOwner
Lukas NovakEngineering · lukas@binds.siAdmin
Priya RamanLegal · priya@binds.siMember

Light

Amara OkaforSales · amara@binds.siOwner
Lukas NovakEngineering · lukas@binds.siAdmin
Priya RamanLegal · priya@binds.siMember

Dark

Amara OkaforSales · amara@binds.siOwner
Lukas NovakEngineering · lukas@binds.siAdmin
Priya RamanLegal · priya@binds.siMember

High contrast

Import

tsx

import { List, ListItem } from '@bindshq/stance-react';

Platforms

List has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { List, ListItem } from '@bindshq/stance-react';

Playground

Amara Okaforamara@binds.si
Lukas Novaklukas@binds.si

tsx

<List />

Examples

Bordered with actions

Sales 2026Updated 2 days ago
ExecutiveUpdated 2 days ago
SupportUpdated 2 days ago

tsx

import { Button, Icon, List, ListItem } from '@bindshq/stance-react';

export function Bordered() {
  return (
    <List bordered aria-label="Signature templates">
      {['Sales 2026', 'Executive', 'Support'].map((t) => (
        <ListItem
          key={t}
          leading={<Icon name="pen-nib" />}
          title={t}
          description="Updated 2 days ago"
          actions={
            <Button size="sm" variant="ghost">
              Edit
            </Button>
          }
        />
      ))}
    </List>
  );
}

Ordered steps

1Connect your Exchange relay
2Assign templates to departments
3Deploy and verify signatures

tsx

import { Badge, List, ListItem } from '@bindshq/stance-react';

export function Ordered() {
  return (
    <List ordered dividers={false} density="sm" aria-label="Deployment steps">
      <ListItem
        leading={
          <Badge variant="solid" tone="inverse" size="sm">
            1
          </Badge>
        }
        title="Connect your Exchange relay"
      />
      <ListItem
        leading={
          <Badge variant="solid" tone="inverse" size="sm">
            2
          </Badge>
        }
        title="Assign templates to departments"
      />
      <ListItem
        leading={
          <Badge variant="solid" tone="inverse" size="sm">
            3
          </Badge>
        }
        title="Deploy and verify signatures"
      />
    </List>
  );
}

Density

Billing contactfinance@binds.si
Security contactsecurity@binds.si

Billing contactfinance@binds.si
Security contactsecurity@binds.si

tsx

import { List, ListItem } from '@bindshq/stance-react';

export function Density() {
  return (
    <div
      style={{
        display: 'grid',
        gap: 24,
        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
      }}
    >
      {(['sm', 'lg'] as const).map((d) => (
        <List key={d} density={d} bordered aria-label={`Density ${d}`}>
          <ListItem title="Billing contact" description="finance@binds.si" />
          <ListItem title="Security contact" description="security@binds.si" />
        </List>
      ))}
    </div>
  );
}

API reference

Prop	Type	Default	Description
`ordered`	`boolean`	`false`	Render <ol> instead of <ul>.
`dividers`	`boolean`	`true`	Lines between items.
`density`	`'sm' \| 'md' \| 'lg'`	`'md'`	Vertical padding of items.
`bordered`	`boolean`	`false`	Wrap the list in a bordered surface.
`...props`	`HTMLAttributes<HTMLUListElement>`	None	Native list attributes; use aria-label to name the list.

Accessibility

Renders native <ul> or <ol>, so screen readers announce the number of items.
Name lists that stand alone with aria-label or aria-labelledby.
Keep interactive items to one primary target per row (see ListItem asChild) so tab order stays predictable.

Usage guidelines

Do

Keep titles short and put secondary detail in the description.
Use ordered lists when sequence matters.

Don’t

Nest interactive elements inside an interactive row.
Use List for tabular comparisons.

Overview

Amara OkaforSales · amara@binds.siOwner
Lukas NovakEngineering · lukas@binds.siAdmin
Priya RamanLegal · priya@binds.siMember

tsx

import { Avatar, Badge, List, ListItem } from '@bindshq/stance-react';

export function Basic() {
  return (
    <List aria-label="Organisation members">
      {[
        ['Amara Okafor', 'Sales · amara@binds.si', 'Owner'],
        ['Lukas Novak', 'Engineering · lukas@binds.si', 'Admin'],
        ['Priya Raman', 'Legal · priya@binds.si', 'Member'],
      ].map(([name, description, role]) => (
        <ListItem
          key={name}
          leading={<Avatar name={name!} size="sm" decorative />}
          title={name}
          description={description}
          meta={<Badge size="sm">{role}</Badge>}
        />
      ))}
    </List>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Amara OkaforSales · amara@binds.siOwner
Lukas NovakEngineering · lukas@binds.siAdmin
Priya RamanLegal · priya@binds.siMember

Light

Amara OkaforSales · amara@binds.siOwner
Lukas NovakEngineering · lukas@binds.siAdmin
Priya RamanLegal · priya@binds.siMember

Dark

Amara OkaforSales · amara@binds.siOwner
Lukas NovakEngineering · lukas@binds.siAdmin
Priya RamanLegal · priya@binds.siMember

High contrast

Examples

Bordered with actions

Sales 2026Updated 2 days ago
ExecutiveUpdated 2 days ago
SupportUpdated 2 days ago

tsx

import { Button, Icon, List, ListItem } from '@bindshq/stance-react';

export function Bordered() {
  return (
    <List bordered aria-label="Signature templates">
      {['Sales 2026', 'Executive', 'Support'].map((t) => (
        <ListItem
          key={t}
          leading={<Icon name="pen-nib" />}
          title={t}
          description="Updated 2 days ago"
          actions={
            <Button size="sm" variant="ghost">
              Edit
            </Button>
          }
        />
      ))}
    </List>
  );
}

Ordered steps

1Connect your Exchange relay
2Assign templates to departments
3Deploy and verify signatures

tsx

import { Badge, List, ListItem } from '@bindshq/stance-react';

export function Ordered() {
  return (
    <List ordered dividers={false} density="sm" aria-label="Deployment steps">
      <ListItem
        leading={
          <Badge variant="solid" tone="inverse" size="sm">
            1
          </Badge>
        }
        title="Connect your Exchange relay"
      />
      <ListItem
        leading={
          <Badge variant="solid" tone="inverse" size="sm">
            2
          </Badge>
        }
        title="Assign templates to departments"
      />
      <ListItem
        leading={
          <Badge variant="solid" tone="inverse" size="sm">
            3
          </Badge>
        }
        title="Deploy and verify signatures"
      />
    </List>
  );
}

Density

Billing contactfinance@binds.si
Security contactsecurity@binds.si

Billing contactfinance@binds.si
Security contactsecurity@binds.si

tsx

import { List, ListItem } from '@bindshq/stance-react';

export function Density() {
  return (
    <div
      style={{
        display: 'grid',
        gap: 24,
        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
      }}
    >
      {(['sm', 'lg'] as const).map((d) => (
        <List key={d} density={d} bordered aria-label={`Density ${d}`}>
          <ListItem title="Billing contact" description="finance@binds.si" />
          <ListItem title="Security contact" description="security@binds.si" />
        </List>
      ))}
    </div>
  );
}

API reference

Prop	Type	Default	Description
`ordered`	`boolean`	`false`	Render <ol> instead of <ul>.
`dividers`	`boolean`	`true`	Lines between items.
`density`	`'sm' \| 'md' \| 'lg'`	`'md'`	Vertical padding of items.
`bordered`	`boolean`	`false`	Wrap the list in a bordered surface.
`...props`	`HTMLAttributes<HTMLUListElement>`	None	Native list attributes; use aria-label to name the list.

Overview

Light, dark and high contrast

Import

Platforms

Playground

Examples

Bordered with actions

Ordered steps

Density

API reference

Accessibility

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Platforms

Playground

Examples

Bordered with actions

Ordered steps

Density

API reference

Accessibility

Usage guidelines

Do

Don’t

Related