Thread divider

Free · MIT

A rule across the thread with a label in the middle: a day ("Today", "Yesterday", "5 Nov 2026") or a chapter of the conversation ("Drafting", "Review"). Read by screen readers as a separator with that label. Dates wait for the browser's clock and time zone, like every time in Candor, so server and browser render the same thing.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/thread-divider

Brings in: locale, relative-time, utils

Usage

TSX · The example above

"use client"

import { ThreadDivider } from "@/components/thread-divider"

const daysAgo = (d: number) => new Date(Date.now() - d * 86_400_000)

export default function Example() {
  return (
    <div className="flex max-w-xl flex-col gap-4">
      <ThreadDivider date={daysAgo(9)} />
      <ThreadDivider date={daysAgo(1)} />
      <ThreadDivider date={daysAgo(0)} />
      <ThreadDivider label="Review" />
      <ThreadDivider />
    </div>
  )
}

<ThreadDivider>

Prop	Type	Default	Description
date	`Date \| string \| undefined`	—	A day to mark, shown as Today, Yesterday or the date in the locale. With neither this nor `label`, a plain rule.
label	`string \| undefined`	—	A chapter or any other label; wins over `date`.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under threadDivider in <LocaleProvider strings={{ … }}>; the table is exported as threadDividerStrings.

Key	English
today	Today
yesterday	Yesterday