Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Blog Archive Timeline Block for Vue

Twenty-three posts in twelve months on a rail under month heads, with dashed rows that say how many days passed without a post and a strip of month bars that jumps the list.

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

See a publishing rhythm and its gaps with this blog archive timeline for Vue with Ark UI. It is written for Publog, a fictional content management tool. A hairline frame with a plus mark on each corner holds a strip of twelve months drawn as bars in four heights for none, one, two or three posts, over a vertical rail of 23 posts, newest first, under month heads. Between two posts more than 14 days apart the rail turns dashed and a row says how long nothing was published, such as "35 days without a post", worked out from the dates; the longest gap is also in the header. Pressing a month in the strip jumps the list to its head and moves focus there. The list scrolls inside its own region, so the panel keeps its height, and a hidden table repeats the counts. It is built from Guides with CSS for the rail and the bars. For publishing calendars, release cadence and any archive where the quiet stretches matter. The posts are invented.

FAQ

How do I change the posts?

Edit POSTS (newest first) and MONTH_KEYS at the top of the file. Month heads, counts, bar heights, the gap rows and the longest gap are derived from the dates. LONG sets how many days count as a gap.

How is a gap worked out?

It is the number of days between a post and the one published before it, from whole day numbers rather than the clock. Only gaps longer than LONG get a dashed row.

What stays in the page?

Where the list is scrolled and which month you last jumped to. Nothing is saved or sent. To make it real, load posts and their dates from your content system and group them by month on the server.

How does the jump work?

The strip button scrolls the list region to that month's head and focuses it without moving the page. With reduced motion on, the scroll is instant instead of smooth.

Is it accessible?

Each month button has its month, year and post count in its name, and a hidden table lists the same counts. The scrolling list is a named region you can reach with the keyboard, and the jump is announced in a polite status line.

How does it look on a phone?

The strip scrolls sideways in its own row and the list keeps the same rail at the start.

All 100 timeline blocks