ChatHeader

PreviousNext

The intro header of a chat panel — a title and a logo or AI-assistant button, on a decorative curved background.

Ask me a question

'use client';

import { ChatHeader } from '@/ui/ChatHeader';

export function ChatHeaderDemo() {
  return (
    <div className="w-380">
      <ChatHeader title="Ask me a question" />
    </div>
  );
}

Installation

npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/chat-header.json

Usage

import { ChatHeader } from '@/ui/ChatHeader';
 
export function Component() {
  return <ChatHeader title="Ask me a question" />;
}

ChatHeader is typically composed alongside ChatBody and ChatInput — see the ChatWindow docs for the full composable pattern.

Pass logo to replace the default Sparkles icon button — for example with your brand mark.

import { ChatHeader } from '@/ui/ChatHeader';
import { Icon } from '@clubmed/trident-icons';
 
export function Component() {
  return (
    <ChatHeader
      title="Ask me a question"
      logo={
        <div className="flex items-center justify-center size-48 rounded-full bg-white">
          <Icon name="Brand" width="24px" />
        </div>
      }
    />
  );
}

API Reference

ChatHeader

PropTypeDefaultDescription
titlestring"Ask me a question"Heading text displayed in the header
logoReactNodeundefinedCustom logo node; defaults to a Sparkles icon button

Notes

  • Purely presentational — no internal state, no imperative handle.
  • Used as the top section inside ChatWindow, or standalone when composing your own chat panel.