ShadcnStore

Appearance

Shadcn Marker ​

The shadcn/ui Marker displays an inline status, system note, or labeled separator inside a conversation thread, styled with Tailwind CSS v4. Use it for lightweight, non-message events like "Thinking...", "Conversation compacted", or a day divider, without rendering a full chat bubble. Markers are new shadcn primitives for building AI-chat interfaces.

Key features ​

  • Three variants: default (icon + text), separator (centered text between two rules), and border (bottom-bordered row).
  • MarkerIcon and MarkerContent subcomponents for consistent icon-to-text spacing.
  • Works as a live status line with role="status" and a Spinner.
  • Polymorphic via render, so it can become a link or any other element.
  • Themed for light and dark.

Installation ​

bash
npx shadcn@latest add marker

Usage ​

tsx
import { Marker, MarkerIcon, MarkerContent } from "@/components/ui/marker"
import { GitBranch } from "lucide-react"

export function Example() {
  return (
    <Marker>
      <MarkerIcon>
        <GitBranch />
      </MarkerIcon>
      <MarkerContent>Switched to a new branch</MarkerContent>
    </Marker>
  )
}

Variants ​

Set the variant prop for a separator or bordered row instead of the default icon-plus-text layout.

tsx
<Marker variant="separator">
  <MarkerContent>Conversation compacted</MarkerContent>
</Marker>

<Marker variant="border">
  <MarkerIcon><Search /></MarkerIcon>
  <MarkerContent>Explored 4 files</MarkerContent>
</Marker>

Status with a spinner ​

Set role="status" and render a Spinner in MarkerIcon for a live, in-progress note.

tsx
<Marker role="status">
  <MarkerIcon>
    <Spinner />
  </MarkerIcon>
  <MarkerContent>Thinking...</MarkerContent>
</Marker>

Accessibility ​

  • Use role="status" on markers that report a live, changing state so assistive tech announces updates.
  • Keep marker text short and specific ("Compacting conversation", not just "Loading").
  • Marker is decorative structure, not a message; it should not carry conversational content that needs a sender/avatar — use Message for that.

When to use the Marker ​

Use a Marker for system-level events inside a conversation: status updates, day separators, or "conversation compacted" notes. For an actual chat turn from a user or assistant, use Message instead.

Used in these blocks ​

Marker ships with ShadcnStore's upcoming AI-Chat blocks (next release), for conversation status lines, in-progress indicators, and message separators. This section will link to the real blocks once they're live.

A Marker often sits between Message turns in a conversation thread; pair a live marker with a Spinner for in-progress status, and use Separator for a plain visual divider outside of chat contexts.

FAQ ​

What is the shadcn marker used for? ​

Marker displays an inline status, system note, or labeled separator inside a conversation thread, such as "Thinking...", "Conversation compacted", or a day divider.

What is the difference between Marker and Message? ​

Message renders a chat participant's turn with an avatar and content. Marker renders a system-level note or separator between messages, not tied to a participant.

How do I show a loading status with Marker? ​

Set role="status" on Marker and render a Spinner inside MarkerIcon next to the status text.

Yes. Pass a link element to render on Marker to render as that element while keeping Marker's styling:

tsx
<Marker render={<a href="/details" />}>View details</Marker>

Copyright © 2025-2026 ShadcnStore