Conversation List

Navigation 16

About

A date-grouped conversation sidebar for chat/AI apps that lets users switch between threads and pin favorites.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Conversation List to your project and fits it to your theme.

Code

How Conversation List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  ConversationList,
  type ConversationEntry,
} from "@/components/ui/conversation-list";

const conversations: ConversationEntry[] = [
  { id: "1", title: "Roadmap brainstorm", group: "Today", pinned: true },
  { id: "2", title: "Bug triage notes", group: "Today" },
  { id: "3", title: "Marketing copy draft", group: "Yesterday" },
  { id: "4", title: "Onboarding flow ideas", group: "Yesterday" },
  { id: "5", title: "Pricing page rewrite", group: "Previous 7 Days" },
  { id: "6", title: "API design discussion", group: "Previous 7 Days" },
];

export default function ConversationListDemo() {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <ConversationList conversations={conversations} />
    </div>
  );
}