Shadcn Marker

A marker is a quiet full-width row in a conversation — status, a system note, or a labeled date. It is presentational by default. Add role="status" when the text updates, or render when it is a link or button.

Usage

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

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

variant is default, border, or separator. render turns the marker into a link or button.

Composition

Variants

variant is the layout: inline, a bottom border, or a centered label with lines.

Status

role="status" plus a Spinner so a live update is announced.

Shimmer

className="shimmer" on MarkerContent for streaming text. Pair it with role="status".

Separator

variant="separator" for a date or section break. The lines are CSS — leave the role off.

Border

variant="border" keeps left-aligned text and draws a rule under the row.

With Icon

MarkerIcon sits beside the text. flex-col stacks the icon above.

Links and Buttons

render={<a />} or render={<button />} so the root is a real control. The name comes from MarkerContent.

API

MarkerIcon is aria-hidden. MarkerContent is the text. The file also exports markerVariants.

Notes

MarkerIcon is hidden from assistive tech. An icon-only marker needs aria-label.

With other components

Questions

Related