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

```tsx
'use client';

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

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

## Installation

Using the CLI:

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

Or manually, copy the following code into `/ui/ChatHeader.tsx`:

```tsx
import type { ReactNode } from 'react';
import { Icon } from '@clubmed/trident-icons';

export interface ChatHeaderProps {
  title?: string;
  logo?: ReactNode;
}

const headerCurve = (
  <svg
    className="absolute top-full inset-x-[50%] -translate-x-1/2"
    width="118"
    height="27"
    viewBox="0 0 118 27"
  >
    <path
      d="M0 0C10.8283 0 21.1946 5.40419 28.7327 13.2062L30.2673 14.7945C45.991 31.0685 72.009 31.0685 87.7327 14.7945L89.2673 13.2062C96.8054 5.40419 107.172 0 118 0C118 0 80.6853 0 0 0Z"
      fill="#F6EFE7"
    />
  </svg>
);

export function ChatHeader({ title = 'Ask me a question', logo }: ChatHeaderProps) {
  return (
    <div className="relative flex flex-col items-center shrink-0 pt-4 px-4 h-118 overflow-hidden">
      <div className="absolute inset-x-4 top-4 h-87 bg-lightSand rounded-[24px]">{headerCurve}</div>
      <div className="relative flex flex-col flex-1 items-center justify-end pb-8 w-full z-10">
        <div className="flex items-center justify-center px-12 py-8 w-full">
          <p className="font-serif font-bold italic text-h5 text-center text-black line-clamp-2">
            {title}
          </p>
        </div>
        {logo ?? (
          <button
            type="button"
            aria-label="AI assistant"
            className="chat-border flex items-center justify-center size-48 rounded-full bg-white outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2"
          >
            <Icon name="Sparkles" width="24px" />
          </button>
        )}
      </div>
    </div>
  );
}
```

## Usage

```tsx showLineNumbers
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/components/chat-window#composable-recommended) docs for the full
composable pattern.

## Custom Logo

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

```tsx showLineNumbers
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

| Prop    | Type        | Default                 | Description                                          |
| ------- | ----------- | ------------------------ | ------------------------------------------------------ |
| `title` | `string`    | `"Ask me a question"`   | Heading text displayed in the header                    |
| `logo`  | `ReactNode` | `undefined`              | Custom 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.