Marker

import { IconGitBranch, IconSearch } from "@tabler/icons-react"

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/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#

pnpmnpmyarnbun
bunx --bun shadcn@latest add @ondo-ui/marker
Copy

Usage#

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

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

Composition#

Use the following composition to build a marker:

CopyMarker
├── MarkerIcon
└── MarkerContent

Examples#

Variants#

Use variant to switch between an inline marker, bordered row, and labeled separator.

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

export default function MarkerVariants() {

Status#

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

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

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.

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

export default function MarkerShimmer() {

Separator#

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

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

export default function MarkerSeparator() {

Border#

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

import { IconFileDescription, IconGitBranch, IconSearch } from "@tabler/icons-react"

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

With Icon#

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

import { IconBook, IconGitBranch, IconSearch } from "@tabler/icons-react"

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

Links and Buttons#

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

"use client"

import { IconArrowBackUp, IconGitBranch } from "@tabler/icons-react"

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.