Marker

An inline marker with icon and content for annotating UI, such as status notes, highlights, and callouts inside text.

TSX
"use client";

import { CheckCheckIcon, UserPlusIcon } from "lucide-react";

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

export default function MarkerDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Marker>
        <MarkerIcon>
          <UserPlusIcon />
        </MarkerIcon>
        <MarkerContent>Alex joined the conversation</MarkerContent>
      </Marker>
      <Marker role="status">
        <MarkerIcon>
          <CheckCheckIcon />
        </MarkerIcon>
        <MarkerContent>
          All messages read · <a href="#history">View history</a>
        </MarkerContent>
      </Marker>
    </div>
  );
}

Installation

Bash
Package manager:npmpnpmyarnbun
npx shadcn@latest add @sevenui/markerpnpm dlx shadcn@latest add @sevenui/markeryarn dlx shadcn@latest add @sevenui/markerbunx --bun shadcn@latest add @sevenui/marker

Usage

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

export function JoinedNote() {
  return (
    <Marker>
      <MarkerIcon>
        <UserPlusIcon />
      </MarkerIcon>
      <MarkerContent>Alex joined the conversation</MarkerContent>
    </Marker>
  );
}

Markers annotate flows — typically conversation threads next to Message — with inline status notes, date separators, or row boundaries. Add role="status" when the marker announces progress; links and buttons work inside the content.

Examples

Variants

separator centers the label between divider lines (date breaks); border underlines the row (for example an unread boundary).

TSX
"use client";

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

export default function MarkerVariants() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <Marker>
        <MarkerContent>Default — inline status note</MarkerContent>
      </Marker>
      <Marker variant="separator">
        <MarkerContent>Today</MarkerContent>
      </Marker>
      <Marker variant="border">
        <MarkerContent>Unread messages below</MarkerContent>
      </Marker>
    </div>
  );
}

API reference

Marker

Renders a div by default; swap the element with the Base UI render prop to make the whole marker a link or button.

MarkerIcon and MarkerContent

Extend span. MarkerIcon is decorative (aria-hidden) — give the marker an aria-label if it would otherwise be icon-only. markerVariants is also exported for styling custom elements.