Chat Components

Chat Navbar

Thin top bar with a truncating title and left/right slots for whatever your app needs there.

Open in

Streaming markdown bugs

Conversation goes here.

Installation

npx shadcn@latest add miskibin/chat-components/chat-navbar

Usage

import { ChatNavbar } from "@/components/ui/chat-navbar"
import { ThemeToggle } from "@/components/ui/theme-toggle"

export function Header({ title }: { title: string }) {
  return <ChatNavbar title={title} right={<ThemeToggle floating={false} />} />
}

Examples

Taller, quieter, or compact

Layout classes merge last, so height, background, and border are all replaceable from the call site — and the title has its own slot when you need a different type scale.

Streaming markdown bugs

Compact variant

API reference

ChatNavbar

titleReact.ReactNode
A string is wrapped in a truncating h1; any other node renders as-is.
leftReact.ReactNode
Before the title — a sidebar toggle on small screens, usually.
rightReact.ReactNode
Actions pinned to the right edge.
classNamestring
Merged last. The bar is h-12 with a bottom border by default.

Data slots

Every part below is addressable from a parent, so you can restyle internals without forking the component.

chat-navbarchat-navbar-leftchat-navbar-titlechat-navbar-right