Marker

Displays status updates, system notes, bordered rows, and labeled separators in conversations.

Powered by

Shadcn UI

Installation

npx shadcn@latest add @redpanda/marker

pnpm dlx shadcn@latest add @redpanda/marker

yarn dlx shadcn@latest add @redpanda/marker

bunx shadcn@latest add @redpanda/marker

nubx shadcn@latest add @redpanda/marker

aube dlx shadcn@latest add @redpanda/marker

Usage

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

<Marker role="status">
  <MarkerIcon><Spinner /></MarkerIcon>
  <MarkerContent className="shimmer">Generating response…</MarkerContent>
</Marker>

Anatomy

Marker
├── MarkerIcon
└── MarkerContent

Variants

• default: inline status, note, or action
• border: row with a bottom divider
• separator: centered label between divider lines

MarkerIcon is decorative and hidden from assistive technology. For progress updates, set role="status" on Marker and keep readable status text in MarkerContent.

Operational conversations

Use a separator marker to show where persisted or reconstructed history begins. Use default or bordered markers for tool activity, connection changes, handoffs, and other agent lifecycle events.

<Marker variant="separator">
  <MarkerContent>Earlier context reconstructed</MarkerContent>
</Marker>

<Marker role="status" variant="border">
  <MarkerIcon><SearchIcon /></MarkerIcon>
  <MarkerContent>Searched 12 resources</MarkerContent>
</Marker>

Reserve role="status" for updates that should be announced. Do not announce static separators or every low-value internal event.

Shimmer

The registry theme includes the full shimmer utility family: direction, duration, spread, angle, color, single-run, and disabled variants. It automatically disables motion when reduced motion is requested.

Polymorphic marker

Marker preserves the Shadcn UI Base render API.

<Marker render={<a aria-label="View activity" href="/activity" />}>
  View activity
</Marker>

Credits

• Based on the Shadcn UI Marker component.