Marker

import { GitBranchIcon, SearchIcon } from "lucide-react"

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"

The Marker component displays inline conversation markers such as status updates, system notes, bordered rows, and labeled separators. Compose it with Message in a conversation thread.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @dots/marker
Copy

Usage#

Copyimport { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"

Copy<Marker>
  <MarkerIcon>
    <CheckIcon />
  </MarkerIcon>
  <MarkerContent>Explored 4 files</MarkerContent>
</Marker>

Composition#

Use the following composition to build a marker:

CopyMarker
├── MarkerIcon
└── MarkerContent

Features#

• Inline marker, bordered row, and labeled separator variants
• Decorative icon slot that is hidden from assistive tech
• Polymorphic root via render for link and button markers
• Pairs with the shimmer utility for streaming status text
• Customizable styling through the className prop on every part

Variants#

Use variant to switch between an inline marker, bordered row, and labeled separator.

import { Marker, MarkerContent } from "@/components/ui/marker"

export function MarkerVariantsDemo() {

Status#

Set role="status" and include a Spinner for streaming or in-progress markers so updates are announced.

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"
import { Spinner } from "@/components/ui/spinner"

Shimmer#

Add the shimmer utility class to MarkerContent for an animated streaming-text effect. The utility ships with the shadcn package — see the shimmer docs for installation.

import { Marker, MarkerContent } from "@/components/ui/marker"

export function MarkerShimmerDemo() {

Separator#

Use the separator variant for labeled dividers, such as dates or section breaks, in a conversation. A Checkpoint is a separator with a button that restores the thread to that point.

import { Marker, MarkerContent } from "@/components/ui/marker"

export function MarkerSeparatorDemo() {

Border#

Use the border variant for status rows that should keep the default marker alignment while separating the next row.

import { FileTextIcon, GitBranchIcon, SearchIcon } from "lucide-react"

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"

With Icon#

Use MarkerIcon to render an icon alongside the content. Use flex-col to stack the icon above the content.

import { BookOpenCheck, GitBranchIcon, SearchIcon } from "lucide-react"

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"

Links and Buttons#

Turn a marker into a link or button with the render prop on Marker.

"use client"

import { GitBranchIcon, RotateCcwIcon } from "lucide-react"

Copyimport { Marker, MarkerContent } from "@/components/ui/marker"
 
export function MarkerLinkDemo() {
  return (
    <Marker render={(props) => <a {...props} href="#" />}>
      <MarkerContent>View the pull request</MarkerContent>
    </Marker>
  )
}

Accessibility#

Marker is presentational by default. The correct semantics depend on how you use it, so choose the role based on intent rather than relying on a single default.

Status and Progress#

For streaming or progress markers such as "Thinking..." or a running tool, set role="status" so assistive tech announces the update as it appears. Marker forwards role to the underlying element.

Copy<Marker role="status">
  <MarkerIcon>
    <Spinner />
  </MarkerIcon>
  <MarkerContent>Compacting conversation</MarkerContent>
</Marker>

Labeled Separators#

A separator that carries text, such as a date or a section label, needs no role. The divider lines are decorative CSS pseudo-elements, and the text is announced as ordinary content.

Copy<Marker variant="separator">
  <MarkerContent>Today</MarkerContent>
</Marker>

Bordered Markers#

A bordered marker keeps the same semantics as the default marker. The bottom border is decorative, so choose role="status", render, or no role based on the marker's purpose.

Copy<Marker variant="border">
  <MarkerIcon>
    <FileTextIcon />
  </MarkerIcon>
  <MarkerContent>Opened implementation notes</MarkerContent>
</Marker>

Decorative Icons#

MarkerIcon is decorative and hidden from assistive tech with aria-hidden, so the adjacent MarkerContent carries the meaning. For an icon-only marker, provide an aria-label or visible text so it is not announced as empty.

Copy<Marker aria-label="Synced">
  <MarkerIcon>
    <CheckIcon />
  </MarkerIcon>
</Marker>

Interactive Markers#

When a marker links or triggers an action, render it as a real <button> or <a> with the render prop so it is focusable and exposes the correct role. The accessible name comes from the marker text.

Copy<Marker render={(props) => <a {...props} href="/files" />}>
  <MarkerIcon>
    <FileTextIcon />
  </MarkerIcon>
  <MarkerContent>Explored 4 files</MarkerContent>
</Marker>

API Reference#

Marker#

The root marker element. The file also exports markerVariants for composing the marker styles into custom components.

MarkerIcon#

A decorative icon slot. Hidden from assistive tech with aria-hidden.

MarkerContent#

The marker text content.