Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Inline Timeline Block for Svelte

A recruiting pipeline of six candidates in which every row carries its own small five-stop rail, filled up to the current stop, with the stage and days derived from today, and a Sort by select for days in stage, stage or name that keeps the height.

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

Put progress inside the list instead of beside it, with this inline timeline for Svelte with Ark UI. It is written for Hireloop, a fictional recruiting pipeline. A hairline frame with a plus mark on each corner holds a table of six open candidates. Each row has an initials avatar, a name and role, a small rail of five stops, Applied, Screen, Interview, Offer and Hired, filled up to the stop the person has reached, and the stage with the days they have been there, counted from 14 Oct. A "Sort by" Native Select in the header orders the rows by days in stage, by how far along they are or by name, and the panel keeps its height whichever you choose. The footer names the longest wait. On a phone the rail drops under the name and the stage moves to the end of the first line, so each row stays two lines. It is built from Native Select, Avatar and Guides, with an entrance only. For hiring, onboarding, approvals and any list where each item is somewhere along the same path. The people are example data.

FAQ

How do I change the candidates or the stages?

Edit CANDIDATES (an id, a name, a role, the stop index and the ISO date they reached it) and STOPS. The rail fills to the stop, the days are derived from AS_OF, and the sorts and the footer are computed from the same list.

How do the sorts work?

Days in stage puts the longest wait first, Stage puts the furthest along first and breaks ties by days, and Name is A to Z. The sort is a pure function of the chosen key, so rows are re-ordered and never added or removed.

Why is the rail not announced?

It is decoration. Each row's rail cell carries a hidden sentence, "Stop 3 of 5: Interview", and the stage and days are plain text beside it, so nothing depends on seeing the dots.

What stays in the page, and how do I use a real pipeline?

The chosen sort is local state and nothing is saved or sent. For a real pipeline, pass your candidates in the same shape and keep AS_OF as the date of the data.

Is it accessible?

It is a table with column heads on wider screens and row heads for the names; on a phone the heads are hidden visually but stay in the page. The select has a visible label, and a polite status line, hidden visually and there from load, says how the rows are sorted after a change.

All 100 timeline blocks