Conversation Sidebar

React chat history sidebar with a New chat button and a scrolling list of conversations showing title and relative time. Highlights the active chat.

src/registry/ui/conversation-sidebar.tsx/r/conversation-sidebar.json

Installation#

bash

npx shadcn@latest add @minidev/conversation-sidebar

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/conversation-sidebar.json

Usage#

tsx

import { ConversationSidebar } from "@/components/ui/conversation-sidebar"

export function Example() {
  return (
    <ConversationSidebar
      activeId={active}
      onSelect={setActive}
      onNew={() => {}}
      items={[
        { id: "1", title: "Hairline audit plan", updatedAt: new Date(Date.now() - 3600000).toISOString() },
        { id: "2", title: "Premium hero copy", updatedAt: new Date(Date.now() - 86400000).toISOString() },
      ]}
    />
  )
}

API reference#

ConversationSidebar props
Prop	Type	Default
`items`	`Conv[]`	`-`
`activeId`	`string`	`-`
`defaultActiveId`	`string`	`SAMPLE[0].id`
`onSelect`	`(id: string) => void`	`-`
`onNew`	`() => void`	`-`
`className`	`string`	`-`