# ThreadListItemPrimitive
URL: /docs/api-reference/primitives/thread-list-item

Individual thread item with title, archive, and delete controls.

A single thread item within a thread list.

Anatomy \[#anatomy]

```tsx
import { ThreadListItemPrimitive } from "@assistant-ui/react";

const ThreadListItem = () => (
  <ThreadListItemPrimitive.Root>
    <ThreadListItemPrimitive.Trigger>
      <ThreadListItemPrimitive.Title />
    </ThreadListItemPrimitive.Trigger>
    <ThreadListItemPrimitive.Archive />
    <ThreadListItemPrimitive.Unarchive />
    <ThreadListItemPrimitive.Delete />
  </ThreadListItemPrimitive.Root>
);
```

API Reference \[#api-reference]

Root \[#root]

Contains all parts of the thread list item.

This primitive renders a `<div>` element unless `asChild` is set. It automatically adds `data-active="true"` and `aria-current="true"` attributes when the thread is the currently active thread.

<ParametersTable
  type="ThreadListItemPrimitiveRootProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
]"
/>

Trigger \[#trigger]

A button that switches to the thread when clicked.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="ThreadListItemPrimitiveTriggerProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
]"
/>

Title \[#title]

Displays the title of the thread.

This primitive renders as a React Fragment with no wrapper DOM element. It outputs the thread's title text directly, or the `fallback` content if no title is available.

<ParametersTable
  type="ThreadListItemPrimitiveTitleProps"
  parameters="[
{
name: &#x22;fallback&#x22;,
type: &#x22;ReactNode&#x22;,
description: &#x22;Content to display when the thread has no title.&#x22;,
},
]"
/>

Archive \[#archive]

A button to archive the thread. Only shown for non-archived threads.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="ThreadListItemPrimitiveArchiveProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
]"
/>

Unarchive \[#unarchive]

A button to unarchive the thread. Only shown for archived threads.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="ThreadListItemPrimitiveUnarchiveProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
]"
/>

Delete \[#delete]

A button to permanently delete the thread.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="ThreadListItemPrimitiveDeleteProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
]"
/>

Examples \[#examples]

Basic Thread List Item \[#basic-thread-list-item]

```tsx
const MyThreadListItem = () => {
  return (
    <ThreadListItemPrimitive.Root className="thread-item">
      <ThreadListItemPrimitive.Trigger className="thread-trigger">
        <ThreadListItemPrimitive.Title />
      </ThreadListItemPrimitive.Trigger>
      <div className="thread-actions">
        <ThreadListItemPrimitive.Archive>
          Archive
        </ThreadListItemPrimitive.Archive>
        <ThreadListItemPrimitive.Delete>
          Delete
        </ThreadListItemPrimitive.Delete>
      </div>
    </ThreadListItemPrimitive.Root>
  );
};
```

Archived Thread List Item \[#archived-thread-list-item]

```tsx
const ArchivedThreadListItem = () => {
  return (
    <ThreadListItemPrimitive.Root className="archived-thread-item">
      <ThreadListItemPrimitive.Trigger>
        <ThreadListItemPrimitive.Title />
      </ThreadListItemPrimitive.Trigger>
      <ThreadListItemPrimitive.Unarchive>
        Restore
      </ThreadListItemPrimitive.Unarchive>
      <ThreadListItemPrimitive.Delete>
        Delete Permanently
      </ThreadListItemPrimitive.Delete>
    </ThreadListItemPrimitive.Root>
  );
};
```