Marker
AIA quiet line inside a conversation for dates, system events and state changes such as a stopped response.
npx prodular-ui add markerSeparators
Day breaks and context summaries between messages.
Yesterday
Earlier messages were summarized to save context
October close
import { Marker, MarkerContent } from "@/components/ui/marker"
export default function MarkerSeparators() { return ( <div className="flex w-full max-w-xl flex-col gap-6"> <Marker variant="separator"> <MarkerContent>Yesterday</MarkerContent> </Marker> <Marker variant="separator"> <MarkerContent>Earlier messages were summarized to save context</MarkerContent> </Marker> <Marker variant="border"> <MarkerContent>October close</MarkerContent> </Marker> </div> )}Events
Things that happened in the thread that nobody wrote.
import { ArchiveIcon, CircleStopIcon, UserPlusIcon } from "lucide-react"
import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"
export default function MarkerEvents() { return ( <div className="flex w-full max-w-xl flex-col gap-4"> <Marker> <MarkerIcon> <UserPlusIcon /> </MarkerIcon> <MarkerContent>Priya Shah added Daniel Ortiz to the conversation</MarkerContent> </Marker> <Marker> <MarkerIcon> <CircleStopIcon /> </MarkerIcon> <MarkerContent>You stopped this response</MarkerContent> </Marker> <Marker> <MarkerIcon> <ArchiveIcon /> </MarkerIcon> <MarkerContent> Moved to <a href="#close">October close</a> </MarkerContent> </Marker> </div> )}Anatomy
<Marker variant="separator"> <MarkerContent>Yesterday</MarkerContent></Marker>Guidance
Use it when
- For dates, people joining, context being summarized, a response that was stopped or a conversation that moved.
- The separator variant between groups of messages.
Avoid
- Errors that need action. Use an Alert with a retry button.
- Assistant text. Markers are for the system, not the model.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Write markers as one short sentence in sentence case without a full stop when it is a label (Yesterday) and with one when it is an event sentence.
- Render a Marker with You stopped this response after a Response that was stopped by the user.
- Use variant="separator" for date breaks, the default variant with MarkerIcon for events.
API
Marker
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "separator" | "border" | "default" | Plain line, centered between rules, or with a bottom border. |
| render | ReactElement | Render as another element, such as a list item. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add marker# or, with the registry in components.jsonnpx shadcn@latest add @prodular/marker