f-ui

Plus Registry

This component ships from registry.plus.json, not the public registry.json. Set up @f-ui-plus on the Installation page, then install @f-ui-plus/marker.

Tracks Shadcn

Layout primitives track shadcn ui/marker. The Plus path @f-ui-plus/marker re-exports those parts for installers.

Marker renders non-message transcript chrome — date separators, “Thinking…”, and other system notes. Use role="status" for live progress so assistive tech announces updates. Wrap markers in Message Scroller MessageScrollerItem like any other row.

When To Use

Date or section separators between turns (variant="separator").
Streaming / progress notes (“Thinking…”) with role="status".
Subtle bordered notes (variant="border").
Prefer Message + Bubble for conversational turns.

Features

Area	Behavior
Default	Inline muted label with optional icon
Border	Bottom border under the label
Separator	Horizontal rules flanking the label
Status	Host sets `role="status"` for live regions
Icon	`MarkerIcon` is `aria-hidden`

Installing

Configure @f-ui-plus and FUI_PLUS_REGISTRY_TOKEN as in Installation — Plus Registry.

FUI_PLUS_REGISTRY_TOKEN=xxx pnpm dlx shadcn@latest add @f-ui-plus/marker

FUI_PLUS_REGISTRY_TOKEN=xxx npx shadcn@latest add @f-ui-plus/marker

FUI_PLUS_REGISTRY_TOKEN=xxx yarn dlx shadcn@latest add @f-ui-plus/marker

FUI_PLUS_REGISTRY_TOKEN=xxx bun x shadcn@latest add @f-ui-plus/marker

registryDependencies: bare shadcn marker. No extra runtime packages.

Usage

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

<Marker variant="separator">
  <MarkerContent>Yesterday</MarkerContent>
</Marker>

<Marker role="status">
  <MarkerIcon>{/* spinner */}</MarkerIcon>
  <MarkerContent>Thinking…</MarkerContent>
</Marker>

Examples

Separator and Status

A date separator, a live status marker, and a bordered note.

Yesterday

Thinking…

Conversation continued

"use client";

import { Loader2 } from "lucide-react";

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

export function MarkerDemo() {
  return (
    <div className="flex flex-col gap-4">
      <Marker variant="separator">
        <MarkerContent>Yesterday</MarkerContent>
      </Marker>
      <Marker role="status" variant="default">
        <MarkerIcon>
          <Loader2 className="size-3.5 animate-spin" />
        </MarkerIcon>
        <MarkerContent>Thinking…</MarkerContent>
      </Marker>
      <Marker variant="border">
        <MarkerContent>Conversation continued</MarkerContent>
      </Marker>
    </div>
  );
}

Composition

Marker
├── MarkerIcon?
└── MarkerContent

API Reference

Props

Prop	Type	Default	Description
`variant`	`"default" \| "border" \| "separator"`	`"default"`	Visual treatment.
`role`	`AriaRole`	—	Use `"status"` for streaming / progress.
`className`	`string`	—	Merged onto the root.
`children`	`ReactNode`	—	Icon + content parts.

Slots

Parts: Marker, MarkerIcon, MarkerContent. Style via each part’s className.

Marker

On this page