Marker

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

10:30 AM

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

export function MarkerPreview() {
  return (

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

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

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...

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

export function MarkerLoadingExample() {
  return (

Tool activity

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

Explored 4 files

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

export function MarkerToolActivityExample() {
  return (

Activity feed

Stack multiple markers to build a realistic agent activity feed.

Switched to a new branch

Thinking...

Conversation archived

4 files explored

import { Marker, MarkerIcon, MarkerContent } from "uilab-core"
import { GitBranchIcon, LoaderCircleIcon, SearchIcon } from "lucide-react"

export function MarkerFeedExample() {
  return (

Marker

UsageCopy Anchor Link

ExamplesCopy Anchor Link

SeparatorCopy Anchor Link

BorderCopy Anchor Link

LoadingCopy Anchor Link

Tool activityCopy Anchor Link

Activity feedCopy Anchor Link