 <ListCell.Root>
  <ListCell.Item
    title="WorkOS"
    description="Authentication and user management"
  >
    <ListCell.ItemSlot side="right">
      <Badge color="green">Verified</Badge>
      <IconButton size="1">
        <DotsHorizontalIcon />
      </IconButton>
    </ListCell.ItemSlot>
  </ListCell.Item>

  <ListCell.Item
    title="Example Inc"
    description="Authentication and user management"
  >
    <ListCell.ItemSlot side="right">
      <IconButton size="1">
        <DotsHorizontalIcon />
      </IconButton>
    </ListCell.ItemSlot>
  </ListCell.Item>
</ListCell.Root>

Props

ListCell.Item

`title`

required

ReactNode

`asChild`

boolean

`description`

ReactNode

`lowContrast`

boolean

ListCell.ItemSlot

`side`

leftright

Default: left

ListCell.Root

`align`

centerendstartbaselinestretch

Sets the CSS **align-items** property. Supports the corresponding CSS values and responsive objects.

`alignSelf`

centerendstartbaselinestretch

Sets the CSS **align-self** property. Supports a subset of the corresponding CSS values and responsive objects.

`as`

divspan

Controls whether to render **div** or **span**

`asChild`

boolean

Composes the component into its immediate child instead of rendering its own HTML element. You’ll have to provide a single React Element child.

`bottom`

1234056789-1-2-3-4-5-6-7-8-9

Sets the CSS **bottom** property. Supports space scale values, CSS strings, and responsive objects.

`direction`

rowcolumnrow-reversecolumn-reverse

Sets the CSS **flex-direction** property. Supports the corresponding CSS values and responsive objects.

`display`

noneinline-flexflex

Sets the CSS **display** property. Supports a subset of the corresponding CSS values and responsive objects.

`flexBasis`

Responsive<string>

Sets the CSS **flex-basis** property. Supports CSS strings and responsive objects.

`flexGrow`

Sets the CSS **flex-grow** property. Supports CSS strings and responsive objects.

`flexShrink`

Sets the CSS **flex-shrink** property. Supports CSS strings and responsive objects.

`gap`

1234056789

Sets the CSS **gap** property. Supports space scale values, CSS strings, and responsive objects.

`gapX`

1234056789

Sets the CSS **row-gap** property. Supports space scale values, CSS strings, and responsive objects.

`gapY`

1234056789

Sets the CSS **column-gap** property. Supports space scale values, CSS strings, and responsive objects.

`gridArea`

Responsive<string>

Sets the CSS **grid-area** property. Supports CSS strings and responsive objects.

`gridColumn`

Responsive<string>

Sets the CSS **grid-column** property. Supports CSS strings and responsive objects.

`gridColumnEnd`

Responsive<string>

Sets the CSS **grid-column-end** property. Supports CSS strings and responsive objects.

`gridColumnStart`

Responsive<string>

Sets the CSS **grid-column-start** property. Supports CSS strings and responsive objects.

`gridRow`

Responsive<string>

Sets the CSS **grid-row** property. Supports CSS strings and responsive objects.

`gridRowEnd`

Responsive<string>

Sets the CSS **grid-row-end** property. Supports CSS strings and responsive objects.

`gridRowStart`

Responsive<string>

Sets the CSS **grid-row-start** property. Supports CSS strings and responsive objects.

`height`

Responsive<string>

Sets the CSS **height** property. Supports CSS strings and responsive objects.

`inset`

1234056789-1-2-3-4-5-6-7-8-9

Sets the CSS **inset** property. Supports space scale values, CSS strings, and responsive objects.

`justify`

centerendstartbetween

Sets the CSS **justify-content** property. Supports a subset of the corresponding CSS values and responsive objects.

`justifySelf`

centerendstartbaselinestretch

Sets the CSS **justify-self** property. Supports a subset of the corresponding CSS values and responsive objects.

`left`

1234056789-1-2-3-4-5-6-7-8-9

Sets the CSS **left** property. Supports space scale values, CSS strings, and responsive objects.

`maxHeight`

Responsive<string>

Sets the CSS **max-height** property. Supports CSS strings and responsive objects.

`maxWidth`

Responsive<string>

Sets the CSS **max-width** property. Supports CSS strings and responsive objects.

`minHeight`

Responsive<string>

Sets the CSS **min-height** property. Supports CSS strings and responsive objects.

`minWidth`

Responsive<string>

Sets the CSS **min-width** property. Supports CSS strings and responsive objects.

`overflow`

hiddenautoclipvisiblescroll

Sets the CSS **overflow** property. Supports the corresponding CSS values and responsive objects.

`overflowX`

hiddenautoclipvisiblescroll

Sets the CSS **overflow-x** property. Supports the corresponding CSS values and responsive objects.

`overflowY`

hiddenautoclipvisiblescroll

Sets the CSS **overflow-y** property. Supports the corresponding CSS values and responsive objects.

`p`

1234056789

Sets the CSS **padding** property. Supports space scale values, CSS strings, and responsive objects.

`pb`

1234056789

Sets the CSS **padding-bottom** property. Supports space scale values, CSS strings, and responsive objects.

`pl`

1234056789

Sets the CSS **padding-left** property. Supports space scale values, CSS strings, and responsive objects.

`position`

fixedstickystaticrelativeabsolute

Sets the CSS **position** property. Supports the corresponding CSS values and responsive objects.

`pr`

1234056789

Sets the CSS **padding-right** property. Supports space scale values, CSS strings, and responsive objects.

`pt`

1234056789

Sets the CSS **padding-top** property. Supports space scale values, CSS strings, and responsive objects.

`px`

1234056789

Sets the CSS **padding-left** and **padding-right** properties. Supports space scale values, CSS strings, and responsive objects.

`py`

1234056789

Sets the CSS **padding-top** and **padding-bottom** properties. Supports space scale values, CSS strings, and responsive objects.

`right`

1234056789-1-2-3-4-5-6-7-8-9

Sets the CSS **right** property. Supports space scale values, CSS strings, and responsive objects.

`size`

123

Default: 1

`top`

1234056789-1-2-3-4-5-6-7-8-9

Sets the CSS **top** property. Supports space scale values, CSS strings, and responsive objects.

`width`

Responsive<string>

Sets the CSS **width** property. Supports CSS strings and responsive objects.

`wrap`

wrapnowrapwrap-reverse

Sets the CSS **flex-wrap** property. Supports the corresponding CSS values and responsive objects.

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Usage

Different sizes

Different sizes applies different padding and gap in each item.

 <Flex direction="column" gap="5">
  <ListCell.Root size="1">
    {[
      ['Google', 'google'],
      ['Entra ID (Azure AD)', 'azure'],
      ['Okta', 'okta'],
    ].map(([label, item]) => (
      <ListCell.Item asChild key={item} title={label}>
        <a href={`#${item}`}>
          <ListCell.ItemSlot side="left">
            <ProviderIcon provider={item} size="2" />
          </ListCell.ItemSlot>
        </a>
      </ListCell.Item>
    ))}
  </ListCell.Root>

  <ListCell.Root size="2">
    {[
      ['Google', 'google'],
      ['Entra ID (Azure AD)', 'azure'],
      ['Okta', 'okta'],
    ].map(([label, item]) => (
      <ListCell.Item asChild key={item} title={label}>
        <a href={`#${item}`}>
          <ListCell.ItemSlot side="left">
            <ProviderIcon provider={item} size="2" />
          </ListCell.ItemSlot>
        </a>
      </ListCell.Item>
    ))}
  </ListCell.Root>

  <ListCell.Root size="3">
    {[
      ['Google', 'google'],
      ['Entra ID (Azure AD)', 'azure'],
      ['Okta', 'okta'],
    ].map(([label, item]) => (
      <ListCell.Item asChild key={item} title={label}>
        <a href={`#${item}`}>
          <ListCell.ItemSlot side="left">
            <ProviderIcon provider={item} size="3" />
          </ListCell.ItemSlot>
        </a>
      </ListCell.Item>
    ))}
  </ListCell.Root>
</Flex>

With Badge and Icon

 <ListCell.Root>
  {[1, 2, 3].map((item) => (
    <ListCell.Item key={item} title="https://workos.com">
      <ListCell.ItemSlot side="right">
        <Badge color="green">Verified</Badge>

        <IconButton size="1">
          <DotsHorizontalIcon />
        </IconButton>
      </ListCell.ItemSlot>
    </ListCell.Item>
  ))}
</ListCell.Root>

As Links

Use the asChild prop to render items as links or buttons.

 <ListCell.Root>
  {[
    ['Google', 'google'],
    ['Entra ID (Azure AD)', 'azure'],
    ['Okta', 'okta'],
  ].map(([label, item]) => (
    <ListCell.Item asChild key={item} title={label}>
      <a href={`#${item}`}>
        <ListCell.ItemSlot side="left">
          <ProviderIcon provider={item} size="2" />
        </ListCell.ItemSlot>
      </a>
    </ListCell.Item>
  ))}
</ListCell.Root>

With Title and Description

 <ListCell.Root size="3">
  {[1, 2, 3].map((item) => (
    <ListCell.Item
      key={item}
      asChild
      title="Your WorkOS payment has failed"
      description="We were unable to collect the payment for your
        invoice."
    >
      <a href="#">
        <ListCell.ItemSlot side="left">
          <IconPanel size="2">
            <CubeIcon style={{ color: 'var(--accent-9)' }} />
          </IconPanel>
        </ListCell.ItemSlot>

        <ListCell.ItemSlot side="right">
          {item === 2 ? (
            <Text>Dec 24, 2024</Text>
          ) : (
            <Status color="gray">Dec 24, 2024</Status>
          )}
        </ListCell.ItemSlot>
      </a>
    </ListCell.Item>
  ))}
</ListCell.Root>

Low Contrast Items

Use the lowContrast prop to visually de-emphasize specific items.

 <ListCell.Root size="3">
  {[1, 2, 3].map((item) => (
    <ListCell.Item
      key={item}
      lowContrast={item === 2}
      asChild
      title="Your WorkOS payment has failed"
      description="We were unable to collect the payment for your
        invoice."
    >
      <a href="#">
        <ListCell.ItemSlot side="left">
          <IconPanel size="2">
            <CubeIcon style={{ color: 'var(--accent-9)' }} />
          </IconPanel>
        </ListCell.ItemSlot>

        <ListCell.ItemSlot side="right">
          {item === 2 ? (
            <Text>Dec 24, 2024</Text>
          ) : (
            <Status color="gray">Dec 24, 2024</Status>
          )}
        </ListCell.ItemSlot>
      </a>
    </ListCell.Item>
  ))}
</ListCell.Root>

Complex Content

Add multiple elements to build complex list items.

 <ListCell.Root size="3">
  {[1, 2, 3].map((item) => (
    <ListCell.Item key={item} title="Another one" description="Member">
      <ListCell.ItemSlot side="left">
        <IconPanel size="2">
          <Text weight="bold">AO</Text>
        </IconPanel>
      </ListCell.ItemSlot>

      <ListCell.ItemSlot side="right">
        <Text>
          <Text color="gray">Created </Text>Dec 24, 2024
        </Text>

        <IconButton size="1">
          <DotsHorizontalIcon />
        </IconButton>
      </ListCell.ItemSlot>
    </ListCell.Item>
  ))}
</ListCell.Root>

With Status Indicators

 <ListCell.Root size="3">
  {[1, 2, 3].map((item) => (
    <ListCell.Item
      key={item}
      title="Bot detection"
      description="Detect bots and scripted attacks!"
    >
      <ListCell.ItemSlot side="left">
        <IconPanel size="2">
          <CubeIcon style={{ color: 'var(--gray-a11)' }} />
        </IconPanel>
      </ListCell.ItemSlot>

      <ListCell.ItemSlot side="right">
        <Flag state="enabled" label="Enabled" />

        <Button>Button</Button>
      </ListCell.ItemSlot>
    </ListCell.Item>
  ))}
</ListCell.Root>

Inside a CardList

ListCell works seamlessly inside CardList components and will adapt to the CardList size.

 <CardList.Root>
  <CardList.Header
    title="Client credentials"
    description="Generate a private key to authenticate the application."
  >
    <Button>Generate new secret</Button>
  </CardList.Header>
  <CardList.Body>
    <ListCell.Root size="3">
      {[1, 2, 3].map((item) => (
        <ListCell.Item
          key={item}
          title={
            <Code variant="ghost" weight="regular">
              •••••••••••••••••••7963
            </Code>
          }
          description="Never used"
        >
          <ListCell.ItemSlot side="left">
            <IconPanel size="2">
              <MagicWandIcon style={{ color: 'var(--gray-a11)' }} />
            </IconPanel>
          </ListCell.ItemSlot>

          <ListCell.ItemSlot side="right">
            <Text>
              <Text color="gray">Created </Text>Dec 24, 2024
            </Text>

            <IconButton size="1">
              <TrashIcon />
            </IconButton>
          </ListCell.ItemSlot>
        </ListCell.Item>
      ))}
    </ListCell.Root>
  </CardList.Body>
</CardList.Root>

Inside a CardList with Search

 <CardList.Root>
  <CardList.Search />
  <CardList.Body>
    <ListCell.Root>
      {[
        ['Google', 'google'],
        ['Entra ID (Azure AD)', 'azure'],
        ['Okta', 'okta'],
      ].map(([label, item]) => (
        <ListCell.Item asChild key={item} title={label}>
          <a href={`#${item}`}>
            <ListCell.ItemSlot side="left">
              <ProviderIcon provider={item} size="2" />
            </ListCell.ItemSlot>
          </a>
        </ListCell.Item>
      ))}
    </ListCell.Root>
  </CardList.Body>
</CardList.Root>

With truncated titles

 <ListCell.Root>
  {[1, 2, 3].map((item) => (
    <ListCell.Item
      key={item}
      title="https://my-very-long-domain-name-with-multiple-words-and-dashes-for-testing-purposes.example.com"
    >
      <ListCell.ItemSlot side="right">
        <Badge color="green">Verified</Badge>

        <IconButton size="1">
          <DotsHorizontalIcon />
        </IconButton>
      </ListCell.ItemSlot>
    </ListCell.Item>
  ))}
</ListCell.Root>

Variants

Dashboard

6 variants found

ListCell in Radar List Tabledashboard

size 3 listcell in Pagedashboard

/:environmentId/identity-bridge

size=3

size 3 listcell in Managed Lists Carddashboard

size=3

size 2 listcell in Connected Dialogdashboard

size=2

size 2 listcell in Radar List Tabledashboard

size=2

Context

ListCell.Item

Prop	Type	Default	Required
`title`	`ReactNode`	—	yes
`asChild`	`boolean`	—	no
`description`	`ReactNode`	—	no
`lowContrast`	`boolean`	—	no

ListCell.ItemSlot

Prop	Type	Default	Required
`side`	`"left" \| "right"`	`left`	no

ListCell.Root

Prop	Type	Default	Required
`align`	`Responsive<"center" \| "end" \| "start" \| "baseline" \| "stretch">`	—	no
`alignSelf`	`Responsive<"center" \| "end" \| "start" \| "baseline" \| "stretch">`	—	no
`as`	`"div" \| "span"`	—	no
`asChild`	`boolean`	—	no
`bottom`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9" \| "-1" \| "-2" \| "-3" \| "-4" \| "-5" \| "-6" \| "-7" \| "-8" \| "-9">>`	—	no
`direction`	`Responsive<"row" \| "column" \| "row-reverse" \| "column-reverse">`	—	no
`display`	`Responsive<"none" \| "inline-flex" \| "flex">`	—	no
`flexBasis`	`Responsive<string>`	—	no
`flexGrow`	`Responsive<Union<string, "1" \| "0">>`	—	no
`flexShrink`	`Responsive<Union<string, "1" \| "0">>`	—	no
`gap`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`gapX`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`gapY`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`gridArea`	`Responsive<string>`	—	no
`gridColumn`	`Responsive<string>`	—	no
`gridColumnEnd`	`Responsive<string>`	—	no
`gridColumnStart`	`Responsive<string>`	—	no
`gridRow`	`Responsive<string>`	—	no
`gridRowEnd`	`Responsive<string>`	—	no
`gridRowStart`	`Responsive<string>`	—	no
`height`	`Responsive<string>`	—	no
`inset`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9" \| "-1" \| "-2" \| "-3" \| "-4" \| "-5" \| "-6" \| "-7" \| "-8" \| "-9">>`	—	no
`justify`	`Responsive<"center" \| "end" \| "start" \| "between">`	—	no
`justifySelf`	`Responsive<"center" \| "end" \| "start" \| "baseline" \| "stretch">`	—	no
`left`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9" \| "-1" \| "-2" \| "-3" \| "-4" \| "-5" \| "-6" \| "-7" \| "-8" \| "-9">>`	—	no
`maxHeight`	`Responsive<string>`	—	no
`maxWidth`	`Responsive<string>`	—	no
`minHeight`	`Responsive<string>`	—	no
`minWidth`	`Responsive<string>`	—	no
`overflow`	`Responsive<"hidden" \| "auto" \| "clip" \| "visible" \| "scroll">`	—	no
`overflowX`	`Responsive<"hidden" \| "auto" \| "clip" \| "visible" \| "scroll">`	—	no
`overflowY`	`Responsive<"hidden" \| "auto" \| "clip" \| "visible" \| "scroll">`	—	no
`p`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pb`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pl`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`position`	`Responsive<"fixed" \| "sticky" \| "static" \| "relative" \| "absolute">`	—	no
`pr`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pt`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`px`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`py`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`right`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9" \| "-1" \| "-2" \| "-3" \| "-4" \| "-5" \| "-6" \| "-7" \| "-8" \| "-9">>`	—	no
`size`	`"1" \| "2" \| "3"`	`1`	no
`top`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9" \| "-1" \| "-2" \| "-3" \| "-4" \| "-5" \| "-6" \| "-7" \| "-8" \| "-9">>`	—	no
`width`	`Responsive<string>`	—	no
`wrap`	`Responsive<"wrap" \| "nowrap" \| "wrap-reverse">`	—	no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

Usage

Used 99 times across 1 package

Dashboard

Variant Distribution

side

right

56%

left

44%

size

37%

63%

Where it's used

23 files

packages/dashboard/src/components/radar/configuration-page/protection-card.tsx19

packages/dashboard/src/components/users/connected-accounts.tsx8

packages/dashboard/src/components/organizations/organization/add-user-to-organization-dialog.tsx7

packages/dashboard/src/components/pipes/add-provider-dialog.tsx6

packages/dashboard/src/components/radar/configuration-page/dialogs/radar-list-table.tsx6

packages/dashboard/src/components/configuration/request-oauth.spec.tsx4

packages/dashboard/src/components/configuration/stripe-entitlements/dialogs/connected-dialog.tsx4

packages/dashboard/src/components/emails/providers/email-providers-list.tsx4

/settings/authorized-platforms

packages/dashboard/src/app/(private)/(sidebar)/settings/authorized-platforms/authorized-platforms-client.tsx4

/:environmentId/authentication

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/authentication/authentication-client.tsx3

Show 13 more files

List Cell

Props

ListCell.Item

title

asChild

description

lowContrast

ListCell.ItemSlot

side

ListCell.Root

align

alignSelf

as

asChild

bottom

direction

display

flexBasis

flexGrow

flexShrink

gap

gapX

gapY

gridArea

gridColumn

gridColumnEnd

gridColumnStart

gridRow

gridRowEnd

gridRowStart

height

inset

justify

justifySelf

left

maxHeight

maxWidth

minHeight

minWidth

overflow

overflowX

overflowY

p

pb

pl

position

pr

pt

px

py

right

size

top

width

wrap

Usage

Different sizes

With Badge and Icon

As Links

With Title and Description

Low Contrast Items

Complex Content

With Status Indicators

Inside a CardList

Inside a CardList with Search

With truncated titles

Variants

Dashboard

Context

Full API Reference

Full API Reference

ListCell.Item

ListCell.ItemSlot

ListCell.Root

Usage Statistics

Usage Statistics

Usage

Variant Distribution

Where it's used

`title`

`asChild`

`description`

`lowContrast`

`side`

`align`

`alignSelf`

`as`

`asChild`

`bottom`

`direction`

`display`

`flexBasis`

`flexGrow`

`flexShrink`

`gap`

`gapX`

`gapY`

`gridArea`

`gridColumn`

`gridColumnEnd`

`gridColumnStart`

`gridRow`

`gridRowEnd`

`gridRowStart`

`height`

`inset`

`justify`

`justifySelf`

`left`

`maxHeight`

`maxWidth`

`minHeight`

`minWidth`

`overflow`

`overflowX`

`overflowY`

`p`

`pb`

`pl`

`position`

`pr`

`pt`

`px`

`py`

`right`

`size`

`top`

`width`

`wrap`