Display

Marker

Inline feed divider — a date, an unread line, or a section label as a plain, separator, or bordered row.

Examples

Variants

default is a plain label; separator centers it between two rules; border draws a bottom line for a section break.

A default marker for inline notes.

A separator marker

A border marker for row boundaries.

17 lines

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

export function MarkerVariants() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8">
      <Marker>
        <MarkerContent>A default marker for inline notes.</MarkerContent>
      </Marker>
      <Marker variant="separator">
        <MarkerContent>A separator marker</MarkerContent>
      </Marker>
      <Marker variant="border">
        <MarkerContent>A border marker for row boundaries.</MarkerContent>
      </Marker>
    </div>
  );
}

Separator

Center a short label between two rules to divide a transcript by day or phase.

Today

Worked for 42s

Conversation compacted

17 lines

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

export function MarkerSeparator() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8">
      <Marker variant="separator">
        <MarkerContent>Today</MarkerContent>
      </Marker>
      <Marker variant="separator">
        <MarkerContent>Worked for 42s</MarkerContent>
      </Marker>
      <Marker variant="separator">
        <MarkerContent>Conversation compacted</MarkerContent>
      </Marker>
    </div>
  );
}

Border

A bottom-bordered row per marker for a denser list of section breaks.

Switched to release-candidate

Reviewed 8 related files

Opened implementation notes

27 lines

import { Marker, MarkerContent, MarkerIcon } from "@codefast/ui/marker";
import { FileTextIcon, GitBranchIcon, SearchIcon } from "lucide-react";

export function MarkerBorder() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Marker variant="border">
        <MarkerIcon>
          <GitBranchIcon />
        </MarkerIcon>
        <MarkerContent>Switched to release-candidate</MarkerContent>
      </Marker>
      <Marker variant="border">
        <MarkerIcon>
          <SearchIcon />
        </MarkerIcon>
        <MarkerContent>Reviewed 8 related files</MarkerContent>
      </Marker>
      <Marker variant="border">
        <MarkerIcon>
          <FileTextIcon />
        </MarkerIcon>
        <MarkerContent>Opened implementation notes</MarkerContent>
      </Marker>
    </div>
  );
}

With icon

Add a decorative MarkerIcon before the content; it is aria-hidden by default.

Switched to a new branch

Explored 4 files

Syncing completed

27 lines

import { Marker, MarkerContent, MarkerIcon } from "@codefast/ui/marker";
import { BookOpenCheckIcon, GitBranchIcon, SearchIcon } from "lucide-react";

export function MarkerIconExample() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-12">
      <Marker>
        <MarkerIcon>
          <GitBranchIcon />
        </MarkerIcon>
        <MarkerContent>Switched to a new branch</MarkerContent>
      </Marker>
      <Marker variant="separator">
        <MarkerIcon>
          <SearchIcon />
        </MarkerIcon>
        <MarkerContent>Explored 4 files</MarkerContent>
      </Marker>
      <Marker className="flex-col">
        <MarkerIcon>
          <BookOpenCheckIcon />
        </MarkerIcon>
        <MarkerContent>Syncing completed</MarkerContent>
      </Marker>
    </div>
  );
}

Status

Pair a Spinner with role='status' for a live progress line inside a transcript.

Compacting conversation

Running tests

21 lines

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

export function MarkerStatus() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8">
      <Marker role="status">
        <MarkerIcon>
          <Spinner />
        </MarkerIcon>
        <MarkerContent>Compacting conversation</MarkerContent>
      </Marker>
      <Marker role="status" variant="separator">
        <MarkerIcon>
          <Spinner />
        </MarkerIcon>
        <MarkerContent>Running tests</MarkerContent>
      </Marker>
    </div>
  );
}

Shimmer

Apply the shimmer utility to MarkerContent for an animated thinking line.

Thinking…

Reading 4 files

14 lines

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

export function MarkerShimmer() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8">
      <Marker role="status">
        <MarkerContent className="shimmer">Thinking…</MarkerContent>
      </Marker>
      <Marker role="status" variant="separator">
        <MarkerContent className="shimmer">Reading 4 files</MarkerContent>
      </Marker>
    </div>
  );
}

Link and button

Use asChild to render the marker as an anchor or a button while keeping the layout.

View the pull request

32 lines

import { Marker, MarkerContent, MarkerIcon } from "@codefast/ui/marker";
import { toast } from "@codefast/ui/sonner";
import { GitBranchIcon, RotateCcwIcon } from "lucide-react";

export function MarkerLinkButton() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8">
      <Marker asChild>
        <a href="#links-and-buttons">
          <MarkerIcon>
            <GitBranchIcon />
          </MarkerIcon>
          <MarkerContent>View the pull request</MarkerContent>
        </a>
      </Marker>
      <Marker asChild>
        <button
          className="transition-colors hover:text-foreground"
          type="button"
          onClick={() => {
            toast("You clicked the revert button");
          }}
        >
          <MarkerIcon>
            <RotateCcwIcon />
          </MarkerIcon>
          <MarkerContent>Revert this change</MarkerContent>
        </button>
      </Marker>
    </div>
  );
}

Usage

The minimal import and composition — see Examples below for styled, real-world variants.

9 lines

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

export function MarkerUsage() {
  return (
    <Marker>
      <MarkerContent>Today</MarkerContent>
    </Marker>
  );
}

Anatomy

How the parts nest — every slot the component exposes, in composition order.

Marker

├── MarkerIcon

└── MarkerContent

Features

Three variants — default (plain label), separator (centered between two rules), border (bottom-bordered section break).
asChild renders the marker as a real heading, link, or button while keeping its layout, for a semantic section break or a clickable jump-to-date marker.
Pairs with a Spinner (role="status") for a live "thinking" line in a transcript.

API reference

Props for each part of the component. All native element props are also forwarded.

Marker

The divider row.

variant"default" | "separator" | "border"

Plain label, centered rule-flanked label, or bottom-bordered section break.

Default"default"

asChildboolean

Render as the child element (e.g. a heading) instead of a div.

Defaultfalse

MarkerIcon

Decorative leading icon; rendered aria-hidden.

childrenReactNode: An icon element.

MarkerContent

The label; centers between the rules in the separator variant.

childrenReactNode: Label text or a link.

Accessibility

Built to be keyboard-navigable and screen-reader friendly out of the box.

MarkerIcon is aria-hidden — never put meaning only in the icon.
For a semantic section break, use asChild with a real heading that fits the document outline.
The separator rules and spacing mirror automatically under a DirectionProvider (RTL).

Guidelines

Conventions that keep usage consistent across an app.

Use markers to group a transcript by day or to flag the unread line.
Keep the label short — a date, a count, or a couple of words.

Don’t

Don’t use a marker as the only heading for a whole page.
Don’t stack multiple bordered markers in a row.

Explore further

Ready to integrate?

Follow the Getting Started guide to install @codefast/ui, or browse the full component gallery.

Getting Started Browse all components

Examples

Variants

Separator

Border

With icon

Status

Shimmer

Link and button

Usage

Anatomy

Features

API reference

Marker

MarkerIcon

MarkerContent

Accessibility

Guidelines

Related