import { ThreadListSample } from "@/components/docs/samples/threadlist";
import { PreviewCode } from "@/components/docs/preview-code.server";
import { ThreadListSidebarSample } from "@/components/docs/samples/thread-list/sidebar-composition";
import { ThreadListActiveSample } from "@/components/docs/samples/thread-list/active-threads";
import { ThreadListNewSample } from "@/components/docs/samples/thread-list/new-thread";
import { ThreadListArchiveSample } from "@/components/docs/samples/thread-list/archive-thread";

Getting Started#

Add the component#

Use threadlist-sidebar for a complete sidebar layout or thread-list for custom layouts.

ThreadListSidebar#

<InstallCommand shadcn={["threadlist-sidebar"]} />

ThreadList#

<InstallCommand shadcn={["thread-list"]} />

Use in your application#

<Tabs items={["With Sidebar", "Without Sidebar"]}>

```tsx title="/app/assistant.tsx"
import { Thread } from "@/components/assistant-ui/thread";
import { ThreadListSidebar } from "@/components/assistant-ui/threadlist-sidebar";
import {
SidebarProvider,
SidebarInset,
SidebarTrigger
} from "@/components/ui/sidebar";

export default function Assistant() {
  return (
    <SidebarProvider>
      <div className="flex h-dvh w-full">
        <ThreadListSidebar />
        <SidebarInset>
          {/* Add sidebar trigger, location can be customized */}
          <SidebarTrigger className="absolute top-4 left-4" />
          <Thread />
        </SidebarInset>
      </div>
    </SidebarProvider>
  );
}
```

export default function Assistant() {
  return (
    <div className="grid h-full grid-cols-[200px_1fr]">
      <ThreadList />
      <Thread />
    </div>
  );
}
```

Anatomy#

The ThreadList component is built with the following primitives:

import { ThreadListPrimitive, ThreadListItemPrimitive } from "@assistant-ui/react";

<ThreadListPrimitive.Root>
  <ThreadListPrimitive.New />
  <ThreadListPrimitive.Items>
    {() => (
      <ThreadListItemPrimitive.Root>
        <ThreadListItemPrimitive.Trigger>
          <ThreadListItemPrimitive.Title />
        </ThreadListItemPrimitive.Trigger>
        <ThreadListItemPrimitive.Archive />
        <ThreadListItemPrimitive.Delete />
      </ThreadListItemPrimitive.Root>
    )}
  </ThreadListPrimitive.Items>
</ThreadListPrimitive.Root>

Examples#

Active Threads#

Select a different seeded conversation, or use the search field to filter the threads by title.

New Thread#

The list starts empty, thus only the New Thread button shows. Click New Thread to make an active thread. The search field shows when a thread exists.

Sidebar Composition#

ThreadListSidebar wraps the same ThreadList in a complete sidebar shell.

Archive a Thread#

Open the More menu of the active thread, then select Archive. The onArchive callback moves the thread to the archived list. Select Restore (ThreadListItemPrimitive.Unarchive) to move the thread back to the regular list.

API Reference#

ThreadListPrimitive.Root#

Container for the thread list.

<ParametersTable
type="ThreadListPrimitiveRootProps"
parameters={[
{
name: "asChild",
type: "boolean",
default: "false",
description: "Merge props with child element instead of rendering a wrapper div.",
},
]}
/>

ThreadListPrimitive.Items#

Renders all threads in the list.

<ParametersTable
type="ThreadListPrimitiveItemsProps"
parameters={[
{
name: "archived",
type: "boolean",
description: "When true, renders archived threads instead of active threads.",
},
{
name: "components",
type: "object",
required: true,
description: "Component configuration.",
children: [
{
type: "Components",
parameters: [
{
name: "ThreadListItem",
type: "ComponentType",
required: true,
description: "Component to render for each thread item.",
},
],
},
],
},
]}
/>

ThreadListPrimitive.New#

A button to create a new thread.

<ParametersTable
type="ThreadListPrimitiveNewProps"
parameters={[
{
name: "asChild",
type: "boolean",
default: "false",
description: "Merge props with child element instead of rendering a wrapper button.",
},
]}
/>

ThreadListPrimitive.LoadMore#

A button that appends the next page of threads. See the LoadMore primitive reference for usage and Threads concepts for the adapter contract.

<ParametersTable
type="ThreadListPrimitiveLoadMoreProps"
parameters={[
{
name: "asChild",
type: "boolean",
default: "false",
description: "Merge props with child element instead of rendering a wrapper button.",
},
]}
/>

ThreadListItemPrimitive.Root#

Container for a single thread item. Automatically sets data-active and aria-current when this is the current thread.

<ParametersTable
type="ThreadListItemPrimitiveRootProps"
parameters={[
{
name: "asChild",
type: "boolean",
default: "false",
description: "Merge props with child element instead of rendering a wrapper div.",
},
]}
/>

ThreadListItemPrimitive.Trigger#

A button that switches to this thread when clicked.

<ParametersTable
type="ThreadListItemPrimitiveTriggerProps"
parameters={[
{
name: "asChild",
type: "boolean",
default: "false",
description: "Merge props with child element instead of rendering a wrapper button.",
},
]}
/>

ThreadListItemPrimitive.Title#

Renders the thread's title.

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

ThreadListItemPrimitive.Archive#

A button to archive the thread.

<ParametersTable
type="ThreadListItemPrimitiveArchiveProps"
parameters={[
{
name: "asChild",
type: "boolean",
default: "false",
description: "Merge props with child element instead of rendering a wrapper button.",
},
]}
/>

ThreadListItemPrimitive.Unarchive#

A button to restore an archived thread.

<ParametersTable
type="ThreadListItemPrimitiveUnarchiveProps"
parameters={[
{
name: "asChild",
type: "boolean",
default: "false",
description: "Merge props with child element instead of rendering a wrapper button.",
},
]}
/>

ThreadListItemPrimitive.Delete#

A button to permanently delete the thread.

<ParametersTable
type="ThreadListItemPrimitiveDeleteProps"
parameters={[
{
name: "asChild",
type: "boolean",
default: "false",
description: "Merge props with child element instead of rendering a wrapper button.",
},
]}
/>

ThreadListItemMorePrimitive#

A dropdown menu for additional thread actions, built on Radix UI DropdownMenu.

ThreadListItemMorePrimitive.Root#

Menu container that manages dropdown state.

<ParametersTable
type="ThreadListItemMorePrimitiveRootProps"
parameters={[
{
name: "asChild",
type: "boolean",
default: "false",
description: "Merge props with child element instead of rendering a wrapper div.",
},
]}
/>

ThreadListItemMorePrimitive.Trigger#

Button to open the menu.

<ParametersTable
type="ThreadListItemMorePrimitiveTriggerProps"
parameters={[
{
name: "asChild",
type: "boolean",
default: "false",
description: "Merge props with child element instead of rendering a wrapper button.",
},
]}
/>

ThreadListItemMorePrimitive.Content#

Menu content container.

<ParametersTable
type="ThreadListItemMorePrimitiveContentProps"
parameters={[
{
name: "asChild",
type: "boolean",
default: "false",
description: "Merge props with child element instead of rendering a wrapper div.",
},
]}
/>

ThreadListItemMorePrimitive.Item#

Individual menu item.

<ParametersTable
type="ThreadListItemMorePrimitiveItemProps"
parameters={[
{
name: "asChild",
type: "boolean",
default: "false",
description: "Merge props with child element instead of rendering a wrapper div.",
},
]}
/>

ThreadListItemMorePrimitive.Separator#

Visual separator between items.

<ParametersTable
type="ThreadListItemMorePrimitiveSeparatorProps"
parameters={[
{
name: "asChild",
type: "boolean",
default: "false",
description: "Merge props with child element instead of rendering a wrapper div.",
},
]}
/>

Related Components#

• Thread - The main chat interface displayed alongside the list