Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Timeline View Calendar Block for Radix UI

A day drawn as a horizontal track from 07:00 to 19:00 with events at their real length in lanes, a Now line, a 1x or 2x width switch, a Jump to now button and a detail line.

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

Lay a day out along a track with this timeline view for React with Radix UI. A stage 18 rem high holds one day of Tuesday 13 to Thursday 15 October 2026 as a horizontal track from 07:00 to 19:00, scrolling sideways. Each event is a button sitting at its start and its real length, events that overlap drop into their own lane, and a line marks 09:30 on Wednesday, the fixed now. A ToggleGroup switches the track between 1x and 2x width so short events can be read, Jump to now scrolls the stage to the line, and pressing an event reads its title, time, length, place and category in the line under the stage. Previous and next Buttons move the day. Categories are marks with words, never colors, and the track keeps its left to right order in right-to-left languages. The stage is a named, focusable region. It's built from Button, ToggleGroup and Guides, with a CSS entrance only.

FAQ

How do I fill it with my events?

Edit LINES_DATA. Each line is date|start|end|kind|title|place with an ISO date and wall-clock times, and a kind of meeting, break, deadline, travel or focus. List the days in DAYS. The lanes, the positions and the lengths are worked out from the times; the track runs from OPEN to CLOSE.

What does 2x do?

It doubles the track's width from 72 rem to 144 rem, which is 96 px and then 192 px for an hour. The events keep their place as a share of the track, so nothing moves in time, and a 30-minute event gets wide enough to show its title. The stage scrolls sideways at both widths.

What does Jump to now do?

On the day that holds the fixed now it scrolls the stage so the Now line is in the middle, and it respects reduced motion by jumping instead of gliding. On other days it says in the status line that now is on another day. It sets the scroll position of the stage and never moves the page.

How do I use it with the keyboard?

The stage is a focusable region you can scroll with the arrow keys, and every event is a button in time order. Enter or Space on an event reads it out under the stage and again to clear it.

What stays local, and how do I wire it up?

Everything. Choosing events, zooming and paging only change state in the page. To make it real, load the visible day from your own API when index changes and keep the track as it is.

How does it look on a phone?

Scrolling sideways is the design: the stage keeps its height and the track keeps its width, so you swipe along the day. The controls wrap above it and the detail line sits under it.

All 100 calendar blocks