Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Timeline Evolution Story Features Block for Vue

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.

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 features section for Vue with Ark UI, told as a timeline. A rail under a centred header holds Year 1 to Year 5 as five tabs on one hairline, each with a node that fills in as the story reaches it. Two cells share a divider under the rail: at the start what shipped that year in three short entries, and at the end the year's median cold start in rolling digits with the figure it replaced, beside a five-bar history of regions where the chosen year's bar is solid. The years are "Year 1" to "Year 5", not calendar years, so the section never goes stale. It's built from Tabs, Sliding Number, Badge and the Guides line kit, with your theme's tokens for every colour and no button. For platforms, open-source projects and any product whose story is easiest to follow in order.

FAQ

How do I change the years and their figures?

Edit the five year objects at the top of the file. Each has a theme, three shipped entries (a title and a line), the cold start at the start and at the end of the year, and the regions live at the end. The rolling number, the "was" badge, the five bars and the header's "from 680 ms to 12 ms" line all read from those values, so they can't disagree.

Is the bar history accessible?

The bars are one image whose label lists every year's regions in words ("3 in year 1, 9 in year 2, ...") and says which year is highlighted; the numbers are also printed above the bars. They are drawn with CSS, not a chart library, and keep their order in a right-to-left layout.

How does it work from the keyboard?

Tab enters the rail on the open year, the Left and Right arrows move between years and open each as they go, and Tab again moves into the open year's entries. Home and End jump to the first and last year.

What moves, and what happens with reduced motion?

The header and the rail fade up once on load, the entries fade up as a year opens, and the cold start rolls to its new value. With reduced motion the fades are off and the digits change at once.

Does the page jump when I switch year?

No. The entries of every year are also drawn once, unseen, in the same grid cell as the open year's, so the cell is as tall as the tallest year; the figures cell has a fixed layout. Those copies are hidden from assistive technology and can't be focused.

How does it fit on a phone?

The rail scrolls sideways when the five years don't fit, the two cells stack with a rule between them, and the bar history keeps its five columns. Nothing scrolls the page sideways at 320 pixels.

All 170 features blocks