Thread List Item

Recent

Yesterday

Installation

pnpm dlx shadcn@latest add @paneui/thread-list-item

Usage

import { ThreadList, ThreadListGroup, ThreadListItem } from "@/components/ui/thread-list-item"

<ThreadList>
  <ThreadListGroup label="Recent">
    <ThreadListItem
      title="Fix broken chat dragging"
      icon={<ApertureIcon />}
      repo="workspace"
      pr={{ number: 1526, status: "open" }}
      branch="feat/fix-chat-dragging"
      active
    />
  </ThreadListGroup>
</ThreadList>

Composition

ThreadList
└── ThreadListGroup
    └── ThreadListItem

Examples

Pull Request States

Use in coding-agent sidebars where threads map to pull requests.

Description and Actions

Use for chat lists with a subtitle, a time and a row menu.

Minimal

Truncation

Title, repo and branch truncate independently; the branch gives way first so the PR number stays readable in a narrow sidebar.

Actions

With actions the item is a list item holding the row button and the actions side by side, so a menu button never nests inside the row and its clicks don't reach the row. The actions show on hover, keyboard focus, while the row is active and while a menu they opened is open; on touch screens they always show and meta moves left of them. Then className, id, style and data-* go to the list item, and everything else (onClick, aria-*, disabled) to the row button; buttonProps reaches the button directly. Without actions the button is the item and takes everything.

API Reference

ThreadList

Also accepts every prop of div.

ThreadListGroup

Also accepts every prop of div.

label*: ReactNode; Section heading.
action: ReactNode; Control on the heading row.

Prop	Type	Default	Description
label*	ReactNode	—	Section heading.
action	ReactNode	—	Control on the heading row.

ThreadListItem

Also accepts every prop of button.

title*: ReactNode; Thread title.
icon: ReactNode; Provider or agent glyph.
repo: string; Repository or project.
pr: { number: number; status: "open" | "draft" | "merged" | "closed" }; Linked pull request. The number takes the status colour (open success, draft muted, merged purple, closed destructive).
branch: string; Git branch.
active= false: boolean; Selected row.
running= false: boolean; Replace the icon with a spinner.
unread= false: boolean; Primary dot after the title.
description: ReactNode; Free second line; truncates. Shown above repo / pr / branch.
meta: ReactNode; Quiet text at the end of the title line, such as a relative time. actions replace it on hover.
actions: ReactNode; Row controls, placed over the end of the row outside its button.
buttonProps: React.ComponentProps<"button">; Props for the row button, including its className. Merged last, so they win over the rest.
trailing: ReactNode; Non-interactive content at the end of the title line, inside the row button.

Prop	Type	Default	Description
title*	ReactNode	—	Thread title.
icon	ReactNode	—	Provider or agent glyph.
repo	string	—	Repository or project.
pr	{ number: number; status: "open" \| "draft" \| "merged" \| "closed" }	—	Linked pull request. The number takes the status colour (open success, draft muted, merged purple, closed destructive).
branch	string	—	Git branch.
active	boolean	false	Selected row.
running	boolean	false	Replace the icon with a spinner.
unread	boolean	false	Primary dot after the title.
description	ReactNode	—	Free second line; truncates. Shown above `repo` / `pr` / `branch`.
meta	ReactNode	—	Quiet text at the end of the title line, such as a relative time. `actions` replace it on hover.
actions	ReactNode	—	Row controls, placed over the end of the row outside its button.
buttonProps	React.ComponentProps<"button">	—	Props for the row button, including its `className`. Merged last, so they win over the rest.
trailing	ReactNode	—	Non-interactive content at the end of the title line, inside the row button.

data-active: Present when active.
data-running: Present while running.

Data attribute	Description
data-active	Present when active.
data-running	Present while running.