Marker

A labeled divider row — a date in a message list, a section label in a feed.

Today

Yesterday

<div className="flex w-full max-w-sm flex-col gap-6">
  <Marker variant="separator">
    <MarkerContent>Today</MarkerContent>
  </Marker>
  <Marker variant="separator">
    <MarkerContent>Yesterday</MarkerContent>
  </Marker>
</div>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/marker

Usage

import { Marker, MarkerContent } from "@/ui/marker"

<Marker variant="separator">
  <MarkerContent>Today</MarkerContent>
</Marker>

Anatomy

Marker is the row; variant picks its treatment — separator centers the content between two hairlines, border underlines the row, and the default renders it plain. MarkerIcon holds an optional leading icon, hidden from assistive technology.

import { Marker, MarkerContent, MarkerIcon } from "@/ui/marker"

<Marker>
  <MarkerIcon>
    <BellIcon />
  </MarkerIcon>
  <MarkerContent>3 unread messages</MarkerContent>
</Marker>

Examples

Basic

3 unread messages

Separator

December 12

Border

Earlier this week

API Reference

Marker

A labeled divider row — a date in a message list, a section label in a feed — rendered inline with the content it annotates.

Supports all div attributes.

Prop	Type	Default
	`"border" \| "default" \| "separator"`	`'default'`

MarkerIcon

The marker's leading icon. Hidden from assistive technology.

Supports all span attributes.

Prop	Type	Default

MarkerContent

The marker's text content.

Supports all span attributes.

Prop	Type	Default

Last updated on 8/31/2026