Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Agenda Hour Timeline Features Block for React

A day view for a team planner: three features as a numbered list beside a framed 9 to 5 day with events placed by time and a Now line with a pulsing dot.

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

A day-view features section for React with Base UI. At the start of a split divider, a heading and three numbered features; at the end, a framed day from 9 AM to 5 PM drawn on a CSS grid, its events placed by their start and length, with a Now line and a pulsing dot. Hover or focus a feature and its event in the day is outlined, so the list and the picture explain each other. The day is a drawing: the list says each event and its times in text. On a phone the day sits under the list and shows six hours. It's built from Badge, Status and Guides, with CSS for the grid, and it follows your theme. For planners, schedulers, calendars and any product that works on a person's day.

FAQ

How do I change the events and times?

Edit FEATURES and OTHER at the top of the file. An event is a slot: start in hours after 9 AM, hours for its length, a title and the time in words for the list. The grid places each one with two CSS variables, so a half hour is 0.5. The Now line is NOW, also in hours after 9.

What do hover and focus do?

Each feature title is a button. Pointing at it or tabbing to it numbers it in the text colour and outlines its event in the day; the first feature is active on load. The picture doesn't change layout: only the outline and the number move.

What does the pulsing dot do, and can I stop it?

It marks the Now line with a Status dot and a ring that pings. The ring is turned off under reduced motion; the dot and the line stay.

Is the day view accessible?

The day is hidden from assistive technology, because every event that matters is in the list as text, with its title and its times ("Focus block, 9:30 to 11:00 AM"). The list's titles are real buttons with a visible focus ring.

How does it fit on a phone?

The list comes first and the framed day under it, cut to six hours (9 AM to 3 PM) to keep the block short; from sm it shows all eight. Events later than three o'clock are simply clipped on a phone.

Does the day mirror in right-to-left languages?

The day keeps its direction (dir="ltr"), as a clock face does. The list beside it follows the page.

  • Pro

    Timeline Evolution Story Features

    Timelines and steps

    A features section that tells five years of an edge runtime as year tabs on one rail: what shipped, a cold start before and after in rolling digits, and a five-bar history of regions.

  • Pro

    Roadmap Kanban Columns Features

    Timelines and steps

    A public roadmap in three lanes on shared hairlines, where the Considering lane sorts itself by votes as people press a vote toggle and a field takes one new suggestion.

  • Pro

    Metro Line Journey Diagram Features

    Diagrams and maps

    A two-line transit map for a customer-journey tool: six stations, one interchange where the Setup and Team lines meet, and a popover on every station.

  • Pro

    Split Calendar Booking Hero

    Interactive demos

    A reverse split hero for a scheduling tool: a working booking page in a hairline frame with plus marks on its corners (step through weeks, pick a day and a time) beside a headline, a Shine Button and three ticks.

  • Pro

    Bento Grid Features

    Bentos

    A bento of five features for an issue tracker, each cell drawn as the product at work: a live board with teammates' cursors, a pull request, a burndown, a triage rule and a typed SDK, in cells that share their hairlines.

  • Pro

    Changelog Features

    Timelines and steps

    A release feed for a changelog tool that presents its features as release entries: a New, Improved and Fixed filter with counts, a version rail, and a collapsible What changed list on each.

All 170 features blocks