Marker

Copy{/* default — inline note, no lines */}
<Marker>User joined</Marker>
 
{/* separator — centered label with rules on both sides */}
<Marker variant="separator">Today</Marker>
 
{/* border — label with a bottom border */}
<Marker variant="border">New messages</Marker>

Copy<Marker>
  <MarkerIcon><InfoIcon /></MarkerIcon>
  <MarkerContent>Conversation started</MarkerContent>
</Marker>

Copy<Marker>
  <MarkerContent className="shimmer" role="status">
    Thinking…
  </MarkerContent>
</Marker>

Copy<Marker asChild>
  <button onClick={handleJump}>Jump to pinned message</button>
</Marker>

Copyimport { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker";
import { BellIcon } from "lucide-react";
 
// Simple separator
<Marker variant="separator">Monday</Marker>
 
// System event with icon
<Marker>
  <MarkerIcon><BellIcon /></MarkerIcon>
  <MarkerContent>Reminder set for 3:00 PM</MarkerContent>
</Marker>
 
// Streaming shimmer
<Marker>
  <MarkerContent className="shimmer" role="status">
    Thinking…
  </MarkerContent>
</Marker>

Copy# Mint — Marker Specs
 
## Component
- name: marker
- file: registry/mint/marker.tsx
- installs to: components/ui/marker.tsx
- dependencies: radix-ui, class-variance-authority
- registryDependencies: none
 
## What is it
An inline status annotation rendered between rows in a conversation thread or
feed. Use it for system events ("User joined"), date separators ("Today"), or
AI status messages ("Thinking…"). Do not use it as a primary navigation
element or interactive CTA — use a Button for actions that change state.
 
## Visual identity
Compact and unobtrusive. Inherits --muted-foreground for text and icon tints,
keeping annotations visually subordinate to message content. The separator
variant adds thin 1px rules (--border) that span available width, giving a
clean horizontal divider feel with no added visual weight.
 
## Design tokens
--muted-foreground: oklch(0.52 0.06 155) / oklch(0.6 0.06 155)  — text and icon tint
--border: oklch(0.88 0.04 155 / 60%) / oklch(0.32 0.05 155 / 40%)          — separator lines and border-b
--foreground: oklch(0.145 0 0) / oklch(0.985 0 0)        — link hover colour ([a]:hover:text-foreground)
 
## Sub-components
- Marker         → root container (div or Slot when asChild); applies markerVariants; sets data-slot="marker" and data-variant
- MarkerIcon     → icon wrapper span; size-4 shrink-0; aria-hidden="true"; sets data-slot="marker-icon"
- MarkerContent  → text span; min-w-0 wrap-break-word; centres text in separator variant via group-data-[variant=separator]; sets data-slot="marker-content"
 
## Variants
- default    → no decoration; short inline system note floating in the thread
- separator  → before/after pseudo-elements as 1px horizontal rules (--border); use for date or section dividers
- border     → bottom border (border-b border-border pb-2); use for section start markers
 
## States
- link inside content: underline + underline-offset-3; hover transitions to --foreground
- shimmer (className): apply to MarkerContent while streaming; remove when complete; pair with role="status"
 
## Conventions
- Keep MarkerContent to a single line — the layout does not accommodate wrapping well in separator variant
- MarkerIcon renders at size-4 (16px); do not override unless intentional — larger icons break the compact line height
- Add role="status" to MarkerContent when used for live/streaming updates
- Use asChild to render Marker as a <button> or <a> for interactive system events (e.g. jump to pinned message)
- Separator variant works best inside a flex-col message list with consistent py-1 row spacing
- Sub-components expose data-slot="marker", data-slot="marker-icon", and data-slot="marker-content" for CSS targeting
- data-variant is set on the root element — use group-data-[variant=…]/marker selectors for child styling (already used by MarkerContent)