Marker

A labeled marker for separating or annotating content, such as timestamps or section dividers.

10:30 AM

"use client"
import { Marker, MarkerContent, MarkerIcon } from "uilab-core"
import { Clock } from "lucide-react"

export function MarkerPreview() {

Usage

import { Marker, MarkerIcon, MarkerContent } from "uilab-core"

<Marker>
  <MarkerIcon>
    <Clock />
  </MarkerIcon>
  <MarkerContent>10:30 AM</MarkerContent>
</Marker>

Examples

Separator

Use variant="separator" for a horizontal divider with centered label.

Today

"use client"
import { Marker, MarkerContent } from "uilab-core"

export function MarkerSeparatorExample() {
  return (
    <Marker variant="separator">
      <MarkerContent>Today</MarkerContent>
    </Marker>
  )
}

Border

Use variant="border" for a bottom-bordered label.

July 28

"use client"
import { Marker, MarkerContent } from "uilab-core"

export function MarkerBorderExample() {
  return (
    <Marker variant="border">
      <MarkerContent>July 28</MarkerContent>
    </Marker>
  )
}

Loading

Use an animated icon (e.g. animate-spin) to show streaming or thinking state.

Thinking...

"use client"
import { Marker, MarkerIcon, MarkerContent } from "uilab-core"
import { LoaderCircleIcon } from "lucide-react"

export function MarkerLoadingExample() {

Tool activity

Combine variant="separator" with MarkerIcon to show background activity like searches or file reads.

Explored 4 files

"use client"
import { Marker, MarkerIcon, MarkerContent } from "uilab-core"
import { SearchIcon } from "lucide-react"

export function MarkerToolActivityExample() {

Activity feed

Stack multiple markers to build a realistic agent activity feed.

Switched to a new branch