# ThreadListPrimitive
URL: /docs/api-reference/primitives/thread-list

Display and manage multiple conversation threads with create and archive actions.

Displays a list of conversation threads.

Anatomy \[#anatomy]

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

const ThreadList = () => (
  <ThreadListPrimitive.Root>
    <ThreadListPrimitive.New />
    <ThreadListPrimitive.Items>
      {() => <MyThreadListItem />}
    </ThreadListPrimitive.Items>
  </ThreadListPrimitive.Root>
);
```

API Reference \[#api-reference]

Root \[#root]

Contains all parts of the thread list.

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

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

New \[#new]

A button to create a new thread.

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

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

Items \[#items]

Renders all items in the thread list.

<ParametersTable
  type="ThreadListPrimitive.Items.Props"
  parameters="[
{
name: &#x22;archived&#x22;,
type: &#x22;boolean&#x22;,
default: &#x22;false&#x22;,
description: &#x22;Whether to show archived threads instead of active threads.&#x22;,
},
{
name: &#x22;components&#x22;,
type: &#x22;ThreadListItemComponents&#x22;,
required: true,
description: &#x22;The components to render for each thread list item.&#x22;,
children: [
{
type: &#x22;ThreadListItemComponents&#x22;,
parameters: [
{
name: &#x22;ThreadListItem&#x22;,
type: &#x22;ComponentType&#x22;,
required: true,
description: &#x22;The component to render for each thread in the list.&#x22;,
},
],
},
],
},
]"
/>

ItemByIndex \[#itembyindex]

Renders a single thread list item at the specified index.

```tsx
<ThreadListPrimitive.ItemByIndex
  index={0}
  components={{
    ThreadListItem: MyThreadListItem
  }}
/>
```

<ParametersTable
  type="ThreadListPrimitive.ItemByIndex.Props"
  parameters="[
{
name: &#x22;index&#x22;,
type: &#x22;number&#x22;,
required: true,
description: &#x22;The index of the thread list item to render.&#x22;,
},
{
name: &#x22;archived&#x22;,
type: &#x22;boolean&#x22;,
default: &#x22;false&#x22;,
description: &#x22;Whether to render from archived threads instead of active threads.&#x22;,
},
{
name: &#x22;components&#x22;,
type: &#x22;ThreadListItemComponents&#x22;,
required: true,
description: &#x22;The components to render for the thread list item.&#x22;,
},
]"
/>