Stacked List

The StackedList component provides a way to display entities in a vertically stacked list format. Supports flexible item rendering, integration with links or actions, and customizable layouts for presenting structured data consistently.

It is composed of several subcomponents such as StackedList.Root, StackedList.Header, StackedList.Item, StackedList.Field to offer a structured and customizable interface.

Usage

import { StackedList } from '@harnessio/ui/components'

//...

return (
  <StackedList.Root>
    <StackedList.Header>
      <StackedList.Field title="Title" />
    </StackedList.Header>
    <StackedList.Item
      thumbnail={<IconV2 name="connectors" size="xs" />}
      actions={<Button>Action</Button>}
      to="/"
    >
      <StackedList.Field title="Item 1" description="Description 1" />
    </StackedList.Item>

    <StackedList.Item
      thumbnail={<IconV2 name="star" size="xs" />}
      actions={<Button>Action</Button>}
      to="/"
    >
      <StackedList.Field title="Item 2" description="Description 2" />
    </StackedList.Item>

    <StackedList.Item
      thumbnail={<IconV2 name="check" size="xs" />}
      actions={<Button>Action</Button>}
      to="/"
    >
      <StackedList.Field title="Item 3" description="Description 3" />
    </StackedList.Item>
  </StackedList.Root>
)

Anatomy

All parts of the StackedList component can be imported and composed as required.

<StackedList.Root>
    <StackedList.Header>
        <StackedList.Field />
    <StackedList.Header>

    <StackedList.Item>
        <StackedList.Field />
        <StackedList.Field />
    </StackedList.Item>

    <StackedList.Item>
        <StackedList.Field />
    </StackedList.Item>
</StackedList.Root>

Item paddings

The StackedList.Item can receive different paddings through the paddingX and paddingY props to match your design solution.

They support the following values: 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 0.

Linked item

The StackedList.Item accepts the linkProps and to props, which allow you to turn the entire item into a link.

If either of these props is provided, the whole item becomes clickable and navigates according to the link configuration. You can still use links and buttons inside as child elements — they will remain fully functional.

Disable hover

The StackedList.Item accepts the disableHover prop, which allows you to turn off hover affect.

Title and description

The StackedList.Field component accepts optional title and description props.

Both values are rendered directly inside a Text component, ensuring consistent typography and styling.

Title color

The StackedList.Field can receive titleColor prop, which allows you to override the default Title color.

Truncating

By default, both title and description have the truncate property enabled. To disable it, pass the disableTruncate prop to StackedList.Field.

Field position

The StackedList.Field component accepts the right prop, which positions the field on the right side of the Item.

API Reference

Root

Contains StackedList.Item and StackedList.Field components.

Prop	Required	Default	Type
className	false	undefined	string
border	false	undefined	false
rounded	false	undefined	'top'

Header

Contains StackedList.Field components.

All props are the same as in StackedList.Item, except for disableHover (which is already set to true).

Item

Contains StackedList.Field components.

Prop	Required	Default	Type
className	false	undefined	string
thumbnail	false	undefined	ReactNode
actions	false	undefined	ReactNode
asChild	false	undefined	boolean
to	false	undefined	string
linkProps	false	undefined	LinkProps
disableHover	false	false	boolean
paddingX	false	'md'	'4xs' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '0'
paddingY	false	'md'	'4xs' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '0'

Field

Prop	Required	Default	Type
className	false	undefined	string
title	false	undefined	ReactNode
description	false	undefined	ReactNode
titleColor	false	'foreground-1'	'inherit' | 'foreground-1' | 'foreground-2' | 'foreground-3' | 'state-disabled' | 'success' | 'warning' | 'danger'
right	false	undefined	boolean
disableTruncate	false	false	boolean