YuhuanStudioYunUIDocs
Chat

Chat Header

A translucent, backdrop-blurred header shell with left / status / actions slots.

A chat header shell: a translucent, backdrop-blurred bar with left, status and actions slots. Compose a title, a model selector (e.g. YunUI ModelSelect), mode chips or toggles into the slots — or pass children to override the slot layout entirely.

Import

tsx
1import { ChatHeader } from "@yuhuanowo/yunui/chat";

Example

ChatHeader

New chat
gpt-4o

Props

PropTypeDefaultDescription
actionsReactNodeRight cluster — theme toggle, workspace toggle, actions, …
childrenReactNodeOverrides the slot layout entirely when provided.
classNamestring
leftReactNodeLeft cluster — sidebar toggle, title, model selector, …
statusReactNodeCenter status cluster — mode indicator, feature chips, … (optional).

On this page