Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Product Timeline Storefront Block for Vue

A launch timeline for a synthesiser: five dated stages on a vertical rail, the current one worked out from the dates, a detail that opens on each, and a Remind me toggle on the stages still to come.

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

Tell shoppers where a launch is and what comes next, with this product timeline for Vue with Ark UI. A header names the K8 from Kiln Tone. A hairline frame with a plus mark on each corner holds five stages on a vertical rail: Announced, Pre-orders open, Production, Shipping and Limited edition, each with a typed date. Which stage is under way is worked out from those dates and a fixed day, 9 October 2026, so earlier stages read Done, the last one that has started reads In progress and the rest read Due, with a filled, ringed or hollow marker as well as the word. Each stage is a Collapsible that opens to a sentence of detail, with the current one open on load. The stages still to come have a Toggle named Remind me. A status line says what changed. It's built from Collapsible, Toggle, Guides and a plain ordered list, with a CSS entrance only. For a pre-order page, a limited drop or a product roadmap.

FAQ

How do I fill it with my stages?

Edit STAGES: each has an id, a title, a detail and a from date as an ISO day. The stage in progress is the last one whose date is on or before AS_OF. Keep the stages in date order.

Why is today a fixed date?

So the page reads the same on the server and in every browser, and so the example never goes out of date. In your own page, pass the real day to NOW_AT instead of the constant.

What stays local, and how do I wire reminders?

Remind me only marks the toggle and says that no message will be sent, and the choice is lost on reload. To wire it, save the stage id with the shopper's address in the remind handler, and send the message from your own service on the stage's date.

How does it look on a phone?

The rail stays on the left, each title wraps and Remind me keeps its column on the right. Opening a stage only grows that row.

Is it accessible?

The stages are an ordered list, each title is a heading with a button that opens its detail, a closed detail cannot be focused, and the state is a word, not just a marker. Remind me is a pressed toggle with a name, and its result is announced in a polite status line.

Does it work right to left?

Yes. The rail, the markers and the toggle column use logical sides, so the timeline sits on the right in right-to-left languages, and the dates are isolated runs.

All 100 storefront blocks