Marker

Displays an inline status, system note, bordered row, or labeled separator in a conversation.

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-5">

The Marker component displays conversation markers such as status updates, system notes, bordered rows, and labeled separators. Compose it with Message in a conversation thread.

Installation#

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Marker
Copy

Usage#

Copy<Marker>
  <Marker.Icon>
    <Icons.Info />
  </Marker.Icon>
  <Marker.Content>
    {"New messages below"->React.string}
  </Marker.Content>
</Marker>

Composition#

CopyMarker
├── Marker.Icon
└── Marker.Content

Features#

• Inline marker, bordered row, and labeled separator variants
• Decorative icon slot hidden from assistive technology
• Status rows with role="status"
• Shimmer utility support for streaming text
• Custom styling through className on every part

Examples#

Variants#

Use variant to switch between an inline marker, bordered row, and labeled separator.

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-6">

Status#

Set role="status" and include a Spinner for streaming or in-progress markers.

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-5">

Accessibility#

Marker is presentational by default. For progress updates such as “Thinking...” or “Loading earlier messages,” set role="status". Marker.Icon is decorative and hidden with aria-hidden, so Marker.Content should carry the meaning.

API Reference#

Marker#