Marker

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download marker -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Marker, MarkerContent } from "@/components/ui/marker";
<Marker variant="default" className="w-80">
  <MarkerContent>Conversation updated</MarkerContent>
</Marker>;

Examples

Default

import { Marker, MarkerIcon, MarkerContent } from "@/components/ui/marker";
import { Icon } from "@/components/ui/icon";
import { Spinner } from "@/components/ui/spinner";
<div className="flex w-[380px] max-w-[calc(100vw-2rem)] flex-col gap-8 py-12">
  <Marker>
    <MarkerIcon>
      <Icon name="GitBranch" />
    </MarkerIcon>
    <MarkerContent>Switched to a new branch</MarkerContent>
  </Marker>
  <Marker role="status">
    <MarkerIcon>
      <Spinner />
    </MarkerIcon>
    <MarkerContent>Thinking...</MarkerContent>
  </Marker>
  <Marker variant="separator">
    <MarkerContent>Conversation compacted</MarkerContent>
  </Marker>
  <Marker>
    <MarkerIcon>
      <Icon name="Search" />
    </MarkerIcon>
    <MarkerContent>Explored 4 files</MarkerContent>
  </Marker>
</div>;

Variants

import { Marker, MarkerContent } from "@/components/ui/marker";
<div className="flex w-[380px] max-w-[calc(100vw-2rem)] flex-col gap-8 py-12">
  {(["default", "separator", "border"] as const).map((variant) => (
    <Marker key={variant} variant={variant}>
      <MarkerContent>{variant}</MarkerContent>
    </Marker>
  ))}
</div>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.