Marker
A note in the run of a conversation that nobody said: someone joined, a date, a reconnection. Small, quiet and leaning.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/markerExamples
A date, an event, an archive line
Tonight
Mara joined the channel
Earlier messages are archived
import { InfoIcon } from "@/components/zero/icons";import { Marker, MarkerContent, MarkerIcon } from "@/components/zero/marker";export default function MarkerKinds() { return ( <div className="grid w-full max-w-md gap-5"> <Marker variant="separator"> <MarkerContent>Tonight</MarkerContent> </Marker> <Marker> <MarkerIcon> <InfoIcon /> </MarkerIcon> <MarkerContent>Mara joined the channel</MarkerContent> </Marker> <Marker variant="border"> <MarkerContent>Earlier messages are archived</MarkerContent> </Marker> </div> );}Behaviour
separator sets it between two quiet lines across the width; border puts a line under it. MarkerIcon puts an icon before it.
Props
Marker
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "separator" | "border" | "default" | Plain, between lines, or over one. |
| render | ReactElement | — | The element to render as. |