shadcn.io is not affiliated with official shadcn/ui
Skill Progression Timeline Block for Vue
Five skills drawn as five-cell level bars and a rail of ten dated achievements, scrubbed by a range control through six snapshots from Jan to Oct 2026, so the levels move and later achievements turn dashed.
Installation
Overview
Watch skills grow as of any date with this skill progression timeline for Vue with Ark UI. It is written for Skillrise, a fictional learning platform. A hairline frame with a plus mark on each corner holds a range control, "As of", with six snapshot months from Jan to Oct 2026. Below it, at the start of the panel, five skills are drawn as bars of five cells (Rust, SQL, Kubernetes, Accessibility, Technical writing), and at the end a rail lists ten dated achievements. Scrubbing to a snapshot moves the bars to that snapshot's levels, shows what each skill gained since January ("Level 1 to 3 since Jan"), and draws the achievements up to that date solid and the later ones dashed with the words "After this date". The status line gives the total level, the gain since January and the achievement count. The time control stays left to right in right-to-left pages. For learning platforms, training plans and performance reviews. The skills, levels and courses are example data.
FAQ
How do I change the skills and snapshots?
Edit SKILLS and SNAPSHOTS at the top of the file. Each skill has a levels array with one level from 0 to 5 per snapshot, and SNAPSHOTS holds the snapshot days. Add a snapshot by adding a day and one level to every skill. The totals, the gains and the achievement states are derived.
How are achievements matched to a date?
An achievement is done when its day is on or before the snapshot's day, which compares two ISO strings. ACHIEVEMENTS is typed separately from the levels, so keep them consistent: a level should rise in the first snapshot after the achievement that earned it.
What is the control?
A native range input with one step per snapshot and the month names under it. It works with the arrow keys, Home and End and a touch drag, and it is left to right in every language because time should not mirror.
What stays in the page?
The chosen snapshot, as local state. Nothing is requested or saved. To use real data, load a level per skill per snapshot from your learning records and keep the same shapes.
Is it accessible?
The control has a visible label and a visible value. The bars are decoration; each skill also states "Level 3 of 5" in text. The achievements are an ordered list and the ones after the chosen date say "After this date" in words, so state never rests on dash style alone. The status line is a polite live region.