shadcn.io is not affiliated with official shadcn/ui
Zigzag Story Timeline Testimonials Block for Vue
A zigzag story rail with four stage bands between the page's rails, from Evaluating to Steady state: a centre line with a dot on each rule, and each stage's name and its quote swapping sides row by row on wide screens, stacked on phones. A Shine Button sits in the header.
Installation
Overview
Tell how a customer adopted your product, one stage at a time, with this testimonials block for Vue with Ark UI. A compact header (How Brightwater Clinics moved to Tidewell, a fictional scheduling app) carries a Shine Button at its end. Below it, four stages (Evaluating, Pilot, Rollout and Steady state) are bands between the page's rails, each with its own top rule and + marks. From md a centre line runs down the bands like a split divider with a dot where it meets each rule, and each band's stage name and relative time swap sides with its quote row by row, so the story zigzags across the line. On a phone the line goes away and each band stacks its name above its quote. The bands are built from Badge, Avatar and Guides, and the rail is plain CSS, so every colour comes from your theme's tokens. It has no dates, only relative stages that never go stale. Made for customer stories, adoption timelines, case studies and any page where how the story unfolded is the proof.
FAQ
How do I change the stages, the quotes and the story?
Edit the STAGES array at the top of the file. Each stage has a stage name, a when badge, the quote, and the speaker's name, initials and role. The bands, the dots and the alternating sides follow the array, so you can add a fifth stage or drop one. Keep when relative ("Month 4", not a calendar date), and put the stages in the order they happened: the list is read top to bottom.
How does the zigzag work, and what happens on a phone?
Each stage is a list item and a two-column grid from the md breakpoint: its name and its quote each take one half, and they swap halves every row, so the name sits against the centre line on one side and the quote on the other. The line is one hairline down the middle and each dot sits on the band's top rule. Below md the line and the dots are hidden and each band stacks its name above its quote. It is the same list and the same order at every width.
Is the timeline accessible to screen readers and keyboards?
The stages are an ordered list, so a screen reader announces how many there are and reads them in the order they happened; the order never depends on which side a stage sits on. Each stage has an h3 under the section's h2, and each quote is a figure with a blockquote and a caption. The line, the dots and the + marks are decoration and are hidden from assistive technology. The only control is the Shine Button in the header.
Does it work in right-to-left languages?
Yes. The line, the dots, the padding and the sides all use logical properties, so in a right-to-left page the first stage's name moves to the end side and the zigzag mirrors, with no extra markup. Each quote sits in a bdi, so its quotation marks stay in the right place.