Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chat blocks

Pro

Chat Date Dividers Block for React

A messenger thread grouped by day under sticky labels with counts such as Today, 4 messages, beside a month of October 2026 where only days with messages can be pressed, which scrolls the log to that day's label.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a long conversation that you can move through by day with these chat date dividers for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Daystead, a messenger, with the thread and a month at the end. The log is grouped by day: each day is its own list under a centred label that sticks to the top while its day scrolls and carries a count ("Today, 4 messages", "Yesterday, 2 messages", "Fri 9 Oct, 4 messages"), above Message and Bubble rows. The month is October 2026 drawn as a fixed grid where only the five days with messages can be pressed. Choosing a day scrolls the log to its label, puts focus on the label and says "Jumped to Fri 9 Oct, 4 messages"; scrolling the log selects the day in the month. "Jump to today" is the ghost button above it. The Shine Button sends, and Guides rule the frame. For a messenger, a case history or any thread long enough to need a map of days.

FAQ

How does jumping to a day work?

Each day's list carries its date, and pressing a day sets the log's own scroll position to that list's top (the page never moves), then focuses the day's label and speaks "Jumped to Fri 9 Oct, 4 messages" through the polite status line. Days without messages are disabled buttons, so they can't be reached.

How does the month follow the log?

The log's scroll handler selects the last day whose list has reached the top, and the month marks that day as current with a filled square. Scrolling by wheel, keyboard or a jump all keep them in step.

What stays in the page, and how do I make it real?

Everything. The dates are fixed (today is Monday 12 October 2026, so the demo reads the same on every visit), the month is a typed grid and the replies come from a short script; nothing is sent. To wire it for real, group your messages by local day, build the month from the days that have any, and let the month move to the previous or next one.

How are the labels built?

From the day and its count: "Today" and "Yesterday" for the two newest days, then weekday, number and month ("Fri 9 Oct"), and a count that a new message raises. They are sticky inside their own day's list, so each is pushed away by the next.

Is it usable with a keyboard and a screen reader?

The log is a focusable region announced as a log, each label is a time element, and the month is a real table whose pressable days read as "Fri 9 Oct, 4 messages". Focus moves to the label after a jump so reading continues from the right place.

How does it look on a phone?

A two-view choice, Chat and Calendar, sits above the window and shows one pane at a time; choosing a day returns to the chat at that day. The window keeps its height and only the panes scroll.

All 200 chat blocks