Marker

Add status updates, system notes, bordered rows, and labeled dividers to a conversation. Pair with Message to build a thread.

Switched to a new branch

Thinking…

Conversation compacted

Explored 4 files

tsx

1import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"23function GitBranchIcon({ className }: { className?: string }) {4  return (5    <svg6      viewBox="0 0 24 24"7      fill="none"8      stroke="currentColor"9      strokeWidth="2"10      strokeLinecap="round"11      strokeLinejoin="round"12      aria-hidden="true"13      className={className}14    >15      <path d="M6 3v12" />16      <circle cx="18" cy="6" r="3" />17      <circle cx="6" cy="18" r="3" />18      <path d="M18 9a9 9 0 0 1-9 9" />19    </svg>20  )21}2223function SearchIcon({ className }: { className?: string }) {24  return (25    <svg26      viewBox="0 0 24 24"27      fill="none"28      stroke="currentColor"29      strokeWidth="2"30      strokeLinecap="round"31      strokeLinejoin="round"32      aria-hidden="true"33      className={className}34    >35      <circle cx="11" cy="11" r="8" />36      <path d="m21 21-4.3-4.3" />37    </svg>38  )39}4041export function Example() {42  return (43    <div className="flex flex-col gap-3">44      <Marker>45        <MarkerIcon>46          <GitBranchIcon />47        </MarkerIcon>48        <MarkerContent>Switched to a new branch</MarkerContent>49      </Marker>50      <Marker>51        <MarkerContent className="shimmer">Thinking…</MarkerContent>52      </Marker>53      <Marker variant="separator">54        <MarkerContent>Conversation compacted</MarkerContent>55      </Marker>56      <Marker>57        <MarkerIcon>58          <SearchIcon />59        </MarkerIcon>60        <MarkerContent>Explored 4 files</MarkerContent>61      </Marker>62    </div>63  )64}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add marker

Usage

1import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"

1<Marker>2  <MarkerIcon>3    <CheckIcon />4  </MarkerIcon>5  <MarkerContent>Explored 4 files</MarkerContent>6</Marker>

Composition

Marker
├── MarkerIcon
└── MarkerContent

Variants

Use variant to choose an inline, bordered, or separator layout.

Inline note

Section

Row boundary

tsx

1import { Marker, MarkerContent } from "@/components/ui/marker"23export function Example() {4  return (5    <div className="flex flex-col gap-6">6      <Marker>7        <MarkerContent>Inline note</MarkerContent>8      </Marker>9      <Marker variant="separator">10        <MarkerContent>Section</MarkerContent>11      </Marker>12      <Marker variant="border">13        <MarkerContent>Row boundary</MarkerContent>14      </Marker>15    </div>16  )17}

| Variant | Description | | --- | --- | | default | Inline marker for status, notes, and actions. | | border | Default alignment with a bottom border under the row. | | separator | Centered label with divider lines on each side. |

Status

For in-progress markers, set role="status" and pair with Spinner so assistive technology announces updates.

Compacting conversation

Running tests

tsx

1import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"2import { Spinner } from "@/components/ui/spinner"34export function Example() {5  return (6    <div className="flex flex-col gap-3">7      <Marker role="status">8        <MarkerIcon>9          <Spinner aria-hidden="true" role="presentation" aria-label="" />10        </MarkerIcon>11        <MarkerContent>Compacting conversation</MarkerContent>12      </Marker>13      <Marker role="status">14        <MarkerIcon>15          <Spinner aria-hidden="true" role="presentation" aria-label="" />16        </MarkerIcon>17        <MarkerContent>Running tests</MarkerContent>18      </Marker>19    </div>20  )21}

Shimmer

Add the shimmer class to MarkerContent for a streaming text effect. Pair it with a spinner or icon in MarkerIcon while work is in progress.

Thinking…

Reading 4 files

tsx

1import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"2import { Spinner } from "@/components/ui/spinner"34function SearchIcon({ className }: { className?: string }) {5  return (6    <svg7      viewBox="0 0 24 24"8      fill="none"9      stroke="currentColor"10      strokeWidth="2"11      strokeLinecap="round"12      strokeLinejoin="round"13      aria-hidden="true"14      className={className}15    >16      <circle cx="11" cy="11" r="8" />17      <path d="m21 21-4.3-4.3" />18    </svg>19  )20}2122export function Example() {23  return (24    <div className="flex flex-col gap-3">25      <Marker>26        <MarkerContent className="shimmer">Thinking…</MarkerContent>27      </Marker>28      <Marker role="status">29        <MarkerIcon>30          <Spinner aria-hidden="true" role="presentation" aria-label="" />31        </MarkerIcon>32        <MarkerContent className="shimmer">Thinking…</MarkerContent>33      </Marker>34      <Marker role="status">35        <MarkerIcon>36          <SearchIcon />37        </MarkerIcon>38        <MarkerContent className="shimmer">Reading 4 files</MarkerContent>39      </Marker>40    </div>41  )42}

Separator

Use variant="separator" for dates or section dividers in a thread.

Today

Worked for 42s

Conversation compacted

tsx

1import { Marker, MarkerContent } from "@/components/ui/marker"23export function Example() {4  return (5    <div className="flex flex-col gap-3">6      <Marker variant="separator">7        <MarkerContent>Today</MarkerContent>8      </Marker>9      <Marker variant="separator">10        <MarkerContent>Worked for 42s</MarkerContent>11      </Marker>12      <Marker variant="separator">13        <MarkerContent>Conversation compacted</MarkerContent>14      </Marker>15    </div>16  )17}

Border

Use variant="border" to keep the default alignment and separate the next row.

Switched to release-candidate

Reviewed 8 related files

Opened implementation notes

tsx

1import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"23function GitBranchIcon({ className }: { className?: string }) {4  return (5    <svg6      viewBox="0 0 24 24"7      fill="none"8      stroke="currentColor"9      strokeWidth="2"10      strokeLinecap="round"11      strokeLinejoin="round"12      aria-hidden="true"13      className={className}14    >15      <path d="M6 3v12" />16      <circle cx="18" cy="6" r="3" />17      <circle cx="6" cy="18" r="3" />18      <path d="M18 9a9 9 0 0 1-9 9" />19    </svg>20  )21}2223function SearchIcon({ className }: { className?: string }) {24  return (25    <svg26      viewBox="0 0 24 24"27      fill="none"28      stroke="currentColor"29      strokeWidth="2"30      strokeLinecap="round"31      strokeLinejoin="round"32      aria-hidden="true"33      className={className}34    >35      <circle cx="11" cy="11" r="8" />36      <path d="m21 21-4.3-4.3" />37    </svg>38  )39}4041function FileTextIcon({ className }: { className?: string }) {42  return (43    <svg44      viewBox="0 0 24 24"45      fill="none"46      stroke="currentColor"47      strokeWidth="2"48      strokeLinecap="round"49      strokeLinejoin="round"50      aria-hidden="true"51      className={className}52    >53      <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />54      <path d="M14 2v4a2 2 0 0 0 2 2h4" />55      <path d="M10 9H8" />56      <path d="M16 13H8" />57      <path d="M16 17H8" />58    </svg>59  )60}6162export function Example() {63  return (64    <div className="flex flex-col gap-3">65      <Marker variant="border">66        <MarkerIcon>67          <GitBranchIcon />68        </MarkerIcon>69        <MarkerContent>Switched to release-candidate</MarkerContent>70      </Marker>71      <Marker variant="border">72        <MarkerIcon>73          <SearchIcon />74        </MarkerIcon>75        <MarkerContent>Reviewed 8 related files</MarkerContent>76      </Marker>77      <Marker variant="border">78        <MarkerIcon>79          <FileTextIcon />80        </MarkerIcon>81        <MarkerContent>Opened implementation notes</MarkerContent>82      </Marker>83    </div>84  )85}

With icon

MarkerIcon sits beside the content on one row.

Switched to a new branch

Explored 4 files

Syncing completed

tsx

1import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"23function GitBranchIcon({ className }: { className?: string }) {4  return (5    <svg6      viewBox="0 0 24 24"7      fill="none"8      stroke="currentColor"9      strokeWidth="2"10      strokeLinecap="round"11      strokeLinejoin="round"12      aria-hidden="true"13      className={className}14    >15      <path d="M6 3v12" />16      <circle cx="18" cy="6" r="3" />17      <circle cx="6" cy="18" r="3" />18      <path d="M18 9a9 9 0 0 1-9 9" />19    </svg>20  )21}2223function SearchIcon({ className }: { className?: string }) {24  return (25    <svg26      viewBox="0 0 24 24"27      fill="none"28      stroke="currentColor"29      strokeWidth="2"30      strokeLinecap="round"31      strokeLinejoin="round"32      aria-hidden="true"33      className={className}34    >35      <circle cx="11" cy="11" r="8" />36      <path d="m21 21-4.3-4.3" />37    </svg>38  )39}4041function CheckIcon({ className }: { className?: string }) {42  return (43    <svg44      viewBox="0 0 24 24"45      fill="none"46      stroke="currentColor"47      strokeWidth="2"48      strokeLinecap="round"49      strokeLinejoin="round"50      aria-hidden="true"51      className={className}52    >53      <path d="M5 13l4 4L19 7" />54    </svg>55  )56}5758export function Example() {59  return (60    <div className="flex flex-col gap-3">61      <Marker>62        <MarkerIcon>63          <GitBranchIcon />64        </MarkerIcon>65        <MarkerContent>Switched to a new branch</MarkerContent>66      </Marker>67      <Marker>68        <MarkerIcon>69          <SearchIcon />70        </MarkerIcon>71        <MarkerContent>Explored 4 files</MarkerContent>72      </Marker>73      <Marker>74        <MarkerIcon>75          <CheckIcon />76        </MarkerIcon>77        <MarkerContent>Syncing completed</MarkerContent>78      </Marker>79    </div>80  )81}

Links and buttons

Pass render to turn the root into a real <a> or <button>.

View the pull request

tsx

1"use client"23import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"45function GitBranchIcon({ className }: { className?: string }) {6  return (7    <svg8      viewBox="0 0 24 24"9      fill="none"10      stroke="currentColor"11      strokeWidth="2"12      strokeLinecap="round"13      strokeLinejoin="round"14      aria-hidden="true"15      className={className}16    >17      <path d="M6 3v12" />18      <circle cx="18" cy="6" r="3" />19      <circle cx="6" cy="18" r="3" />20      <path d="M18 9a9 9 0 0 1-9 9" />21    </svg>22  )23}2425function RotateCcwIcon({ className }: { className?: string }) {26  return (27    <svg28      viewBox="0 0 24 24"29      fill="none"30      stroke="currentColor"31      strokeWidth="2"32      strokeLinecap="round"33      strokeLinejoin="round"34      aria-hidden="true"35      className={className}36    >37      <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />38      <path d="M3 3v5h5" />39    </svg>40  )41}4243export function Example() {44  return (45    <div className="flex flex-col gap-3">46      <Marker render={<a href="#" />}>47        <MarkerIcon>48          <GitBranchIcon />49        </MarkerIcon>50        <MarkerContent>View the pull request</MarkerContent>51      </Marker>52      <Marker render={<button type="button" />} onClick={() => undefined}>53        <MarkerIcon>54          <RotateCcwIcon />55        </MarkerIcon>56        <MarkerContent>Revert this change</MarkerContent>57      </Marker>58    </div>59  )60}

1<Marker render={<a href="/pr/42" />}>2  <MarkerContent>View the pull request</MarkerContent>3</Marker>

Accessibility

Markers are presentational by default. Choose semantics based on their purpose.

Status — for streaming or progress, set role="status" so assistive tech announces the update. Hide decorative spinners inside MarkerIcon.

Separators — labeled dividers need no role. Divider lines are decorative CSS. Do not put role="separator" on a labeled marker; that role ignores text content and takes its name from aria-label.

Icons — MarkerIcon is aria-hidden. For icon-only markers, add aria-label (or visible text).

Interactive — use render with a real link or button so the control is reachable and correctly named by its content.

API Reference

Root element. markerVariants is also exported for composing styles. Standard HTML attributes such as role, onClick, and aria-label pass through to the root or the element provided through render.

Prop	Type	Default
variant	"default" \| "border" \| "separator"	"default"
render	ReactElement	—
className	string	—

1<Marker>2  <MarkerContent>Explored 4 files</MarkerContent>3</Marker>

MarkerIcon

Decorative icon slot. Always aria-hidden. Accepts native span props.

Prop	Type	Default
className	string	—

1<MarkerIcon>2  <CheckIcon />3</MarkerIcon>

MarkerContent

Text content for the marker. Accepts native span props. Use className="shimmer" for the streaming text effect.

Prop	Type	Default
className	string	—

1<MarkerContent>Explored 4 files</MarkerContent>