shadcn.io is not affiliated with official shadcn/ui
Ribbon Wave Timeline Features Block for Svelte
A lifecycle drawn as a sine ribbon for a customer-success tool: six stages alternating above and below the wave, all readable at once, with a You are here chip under the stage an account is at.
Installation
Overview
A lifecycle features section for Svelte with Ark UI. A wide, soft ribbon in the shape of a sine wave runs across a band that shares the page's top rule, with a hairline down its middle. Six stages sit on it at the crests and troughs, a glyph in a round node on each, and their text alternates above and below so that all six are readable at once: a time marker, a name and a sentence. The ribbon turns solid up to the stage the account is at, whose node is filled, and a chip reading "You are here" hangs from it. There is nothing to click. Below lg the same six stages become a vertical list down the start side, joined by a line. It's built from Badge and Guides, in server-rendered markup with no state, and it follows your theme. For lifecycles, onboarding paths and any story told in stages that you want read in full.
FAQ
How do I change the stages?
Edit STAGES at the top of the file: each has a name, a sentence, a time marker and an icon. HERE is the index of the stage the account is at. The ribbon and the nodes are laid out for six stages; the wave is drawn across six columns of the band, so a different count means changing the wave's width in WAVE and the column count on the list.
How does the ribbon know where to turn solid?
SOLID draws the same wave only as far as the account's node, in the same box, so the solid part always ends exactly at the node, whatever the width.
How does a screen reader get it?
The stages are an ordered list with a heading for each, so they are read in order with the time marker, the name and the sentence. The ribbon is a drawing and is hidden from assistive technology; "You are here" is text under the stage it belongs to.
What happens below the large breakpoint?
The ribbon would be too cramped for six sentences, so the stages stack in one column with a line joining their nodes down the start side. It is the same list, restyled, so the order and the words are identical.