Date divider

A centered day label to separate message groups by calendar day: Today, Yesterday, a weekday within the last week, then a short date (with the year when it isn't this year). The thread inserts one automatically whenever the day changes.

Today

Yesterday

Sunday

Jul 22, 2025

Installation

npx shadcn@latest add @handset/date-divider

Usage

import { DateDivider, isSameDay } from "@/components/handset/date-divider";

if (!prev || !isSameDay(prev.created_at, m.created_at)) {
  rows.push(<DateDivider key={m.id} date={m.created_at} />);
}

Ships with two helpers: isSameDay(a, b) to decide where a divider goes, and formatDayLabel(date) if you want the label text on its own.

Props

Props
Prop	Type	Default	Description
date	string \| Date	—	The day to label (ISO string or Date).
className	string	—	Merged onto the centered wrapper.