Skip to content

Marker

A short note in a conversation that isn't a message: a day divider, someone joining, context being compacted.

Sourcecomponents/marker.tsx
Today
Ada joined the conversation
Earlier messages were summarized. Show the full history

Usage

Marker usage
import { Marker, MarkerContent } from "@/components/marker";
export function MarkerUsage() {  return (    <Marker variant="separator">      <MarkerContent>Today</MarkerContent>    </Marker>  );}

When to use

Use when

A note inside a conversation that isn't a message: "Today", "Ada joined", "Earlier messages were summarized"

Don’t use when

Section headings on a page (use a heading); dividers outside a conversation (use Separator)