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

bunx --bun shadcn@latest add @sui/marker

Install with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.

Usage

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

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

Composition

Use the following composition to build a marker:

Marker
├── 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.

Status

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

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.

Separator

Use the separator variant for labeled dividers, such as dates or section breaks, in a conversation.

Border

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

With Icon

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

Links and Buttons

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

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

export function MarkerLinkDemo() {
  return (
    <Marker render={<a 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.

<Marker role="status">
  <MarkerIcon>
    <Loader size="sm" />
  </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.

<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.

<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.

<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.

<Marker render={<a 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.