---
title: Marker
description: Displays status updates, system notes, bordered rows, and labeled separators in conversations.
icon: milestone
author:
  name: shadcn
  url: https://github.com/shadcn
sidebar:
  badge: New
---

<ComponentPreview name="marker-demo" />

<PoweredBy packages={[
  { name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/base/marker' },
]} />

## Installation

```package-install
npx shadcn@latest add @redpanda/marker
```

## Usage

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

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

## Anatomy

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

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

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

## Credits

- Based on the [Shadcn UI Marker](https://ui.shadcn.com/docs/components/base/marker) component.