Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Agenda Hour Timeline Features Block for Ark UI

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 Ark 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.

All 170 features blocks