Marker

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

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

pnpm exec frontfriend download marker -f vue --primitive reka

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

Usage

<script setup lang="ts">
import { Marker } from "@/components/ui/marker";
import { MarkerContent } from "@/components/ui/marker";

const args = {
  "variant": "default",
  "text": "Conversation updated",
} satisfies Partial<
  InstanceType<typeof Marker> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { variant?: "default" | "separator" };
</script>

<template>
  <Marker :variant="args.variant"
    ><MarkerContent>{{ args.text }}</MarkerContent></Marker
  >
</template>

Examples

Default

<script setup lang="ts">
import { Marker } from "@/components/ui/marker";
import { MarkerIcon } from "@/components/ui/marker";
import { Icon } from "@/components/ui/icon";
import { MarkerContent } from "@/components/ui/marker";
import { Spinner } from "@/components/ui/spinner";

const args = {

} satisfies Partial<
  InstanceType<typeof Marker> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="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>
</template>

Variants

<script setup lang="ts">
import { Marker } from "@/components/ui/marker";
import { MarkerContent } from "@/components/ui/marker";

const args = {

} satisfies Partial<
  InstanceType<typeof Marker> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const variants = ["default", "separator", "border"];
</script>

<template>
  <div class="flex w-[380px] max-w-[calc(100vw-2rem)] flex-col gap-8 py-12">
    <Marker v-for="variant in variants" :key="variant" :variant="variant">
      <MarkerContent>{{ variant }}</MarkerContent>
    </Marker>
  </div>
</template>

API reference

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

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`
`variant`	`MarkerVariants["variant"]`	`—`

MarkerContent

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

MarkerIcon

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

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