StackList

StackList renders a vertical list of key-value pairs separated by dividers. It's ideal for displaying entity details, metadata, or configuration summaries. Both the key and value cells automatically truncate long text with an ellipsis to prevent layout overflow.

Interactive example#

Stack List · Live example

ProjectStudio foundations

OwnerAlex Chen

StatusIn progress

VisibilityTeam workspace

Change the project’s status and see the metadata list update.

The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.

Import#

TSX

import { StackList, StackListItem } from '@clidey/ux';

Basic usage#

TSX

<StackList>
  <StackListItem item="Name">Jane Doe</StackListItem>
  <StackListItem item="Email">jane@example.com</StackListItem>
  <StackListItem item="Role">Administrator</StackListItem>
  <StackListItem item="Joined">January 15, 2024</StackListItem>
</StackList>

With rich values#

TSX

<StackList>
  <StackListItem item="Status">
    <Badge>Active</Badge>
  </StackListItem>
  <StackListItem item="Plan">
    <div className="flex items-center gap-2">
      <span>Pro</span>
      <Badge variant="outline">Annual</Badge>
    </div>
  </StackListItem>
  <StackListItem item="Storage">
    <div className="flex items-center gap-2">
      <Progress value={73} className="w-24" />
      <span className="text-sm text-muted-foreground">7.3 / 10 GB</span>
    </div>
  </StackListItem>
</StackList>

In a card#

TSX

<Card>
  <CardHeader>
    <CardTitle>User Details</CardTitle>
  </CardHeader>
  <CardContent>
    <StackList>
      <StackListItem item="ID">usr_01HXYZ1234</StackListItem>
      <StackListItem item="Name">Jane Doe</StackListItem>
      <StackListItem item="Email">jane@example.com</StackListItem>
      <StackListItem item="Created">2024-01-15</StackListItem>
    </StackList>
  </CardContent>
</Card>

Custom separator#

TSX

<StackList separatorClassName="w-3/4">
  {/* items */}
</StackList>

Custom key/value styling#

TSX

<StackList>
  <StackListItem
    item="API Key"
    keyClassName="font-mono text-xs"
    valueClassName="font-mono text-xs text-muted-foreground"
  >
    sk_live_xxxxxxxxxxxxxxxxxxxx
  </StackListItem>
</StackList>

Props#

StackList

Prop	Type	Default	Description
`separatorClassName`	`string`	`"w-full"`	CSS classes applied to the `Separator` between items.
`className`	`string`	—	Additional CSS classes on the list container.
`children`	`ReactNode`	—	`StackListItem` elements.

StackListItem

Prop	Type	Description
`item`	`ReactNode`	The key label displayed on the left.
`children`	`ReactNode`	The value displayed on the right.
`keyClassName`	`string`	Additional CSS classes on the key cell.
`valueClassName`	`string`	Additional CSS classes on the value cell.
`rowClassName`	`string`	Additional CSS classes on the row container.
`itemClassName`	`string`	Additional CSS classes on each cell.

Was this page helpful?