Components / Marker

Marker

A transcript aside: status updates, tool activity, system notes, date breaks, and labelled separators. Presentational by default; set role="status" with a spinner and the shimmer utility for live status text.

Examples

A labelled separator, a system note, and a live status row. Do not use role="separator" on a labelled divider, it hides the visible text from assistive tech.

Today

Rocky has joined the chat

Thinking…

razor

<ZitsMarker Variant="separator">
    <ZitsMarkerContent>Today</ZitsMarkerContent>
</ZitsMarker>

<ZitsMarker role="status">
    <ZitsMarkerIcon><ZitsSpinner /></ZitsMarkerIcon>
    <ZitsMarkerContent class="shimmer">Thinking&hellip;</ZitsMarkerContent>
</ZitsMarker>

Installation

Terminal bash

navius add chat

API reference

ZitsMarker (root):

Prop	Type	Default
Variant	string	"default"

Parts

Prop	Type	Default
ZitsMarker	root	default \| border \| separator
ZitsMarkerIcon	slot	decorative icon, hard-coded aria-hidden
ZitsMarkerContent	slot	the text; pair with the shimmer utility for streaming status