A date-grouped conversation sidebar for chat/AI apps that lets users switch between threads and pin favorites.
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>
);
}
Part of Spectrum UI — browse the full library on 21st.dev.