Marker for Ark UI

Branch changes and running tasks show up as short lines in a transcript.

Use it for that one system note, in the same column as the messages. A rule with no words is a Separator. In React, Ark UI renders that row, so keep the note to one line.

Installation

Anatomy

Marker
├── MarkerIcon
└── MarkerContent

Usage

import { CheckIcon } from "lucide-react";
import {
  Marker, MarkerContent, MarkerIcon,
} from "@/components/ui/marker";

<Marker className="max-w-full min-w-0">
  <MarkerIcon>
    <CheckIcon aria-hidden="true" className="size-4" />
  </MarkerIcon>
  <MarkerContent>Explored 4 files</MarkerContent>
</Marker>

Demos

Variants

Three values of variant, with no icons, so the shape is the only difference: default is an inline note, separator is a labeled rule, and border is a bordered row. Use default inside a transcript, separator for a break such as Today, and border when the notes are a short log you scan as separate items. The root sets data-variant if a style needs to target one.

Status

role is status because the text changes on its own. A spinner sits in MarkerIcon for a compacting line, and again on a separator row while tests run. Use the role for a live task so assistive tech can announce the update, and skip it on a note that never changes. The icon stays decorative, and the sentence is what gets read.

Shimmer

The words carry the motion: MarkerContent uses the shimmer class, on a plain status line and on a separator, for Thinking and for Reading 4 files. Use that class when a spinner would be one icon too many and the label itself should look in progress. It is not another variant, and the text still has to say what is happening. Motion with an empty label is just decoration.

Separator

Three separator rows, with no icons, mark breaks in a transcript: Today, a duration, and conversation compacted. variant set to separator draws a rule with the label in it. If there is nothing to say, use a Separator and skip Marker. Keep the label short, because MarkerContent is one inline span, not a paragraph.

Border

Three bordered rows, each with an icon: a branch switch, files reviewed, notes opened. The gap is tight so they read as a log rather than three unrelated sentences. Use variant border for completed events someone might scan later, where an inline note would disappear into the prose. It is still one note per marker, and it does not line up columns the way a table would.

Icon

MarkerIcon holds the graphic and MarkerContent holds the words. One row is inline, one is a separator, and one is stacked with flex-col so the icon sits above the label. Icons are hidden from assistive tech, and the text is the name of the row. Add an icon when it helps a log be scanned, and leave it off when the words are the whole point.

Links and Buttons

The marker is the control, not a wrapper around one. The first row is a link to the pull request, and the second is a button that reverts the change and shows a toast. Use a link when the row navigates, and a button when it performs an action. Do not nest an anchor inside MarkerContent, because the content text is the accessible name and the icon stays decorative.

FAQ

API Reference