Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Onboarding Steps Timeline Block for Svelte

A new hire's first 30 days as eleven dated tasks on a rail, done ones with their date, upcoming ones with a due date in words and one overdue, where ticking an open task dates it today and moves the progress bar and the day count.

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

Keep a record of a new hire's first month, with the dates, rather than a bare checklist, with this onboarding steps timeline for Svelte with Ark UI. It is written for Firstmonth, a fictional onboarding tracker. A hairline frame with a plus mark on each corner holds the first 30 days of a support hire who started on Monday 5 October, now on day 10. A progress band at the top shows "Day 10 of 30, 5 of 11 done" with a bar, and eleven tasks sit on a vertical rail in due order. Done tasks are solid and carry the date they were finished, upcoming ones are dashed with a due date in words such as "Due Fri 16 Oct, in 2 days", and one is late and says "overdue by 2 days". A checkbox on an open task completes it with today's date, "Done Wed 14 Oct", and the bar and the count follow; unticking reopens it. It is built from Checkbox, Progress and Guides, with an entrance only. For onboarding plans, probation periods, course work and any list of tasks where the dates matter. The hire and the tasks are example data.

FAQ

How do I change the tasks and the dates?

Edit TASKS. Each has an id, a title, a line about it, an ISO due date and, for what was done before the page loaded, a doneOn date. The day count, the due words and the overdue line are worked out from STARTED and AS_OF.

How is this different from a checklist?

A checklist is for ticking. This is a record: every task keeps its date on the rail, what is late says so in words, and the tick adds a completion date. Tasks done before the page loaded have no checkbox, because their date is already a fact.

How is a task marked overdue?

By its due date being before the fixed "now", with a warning icon and the words "overdue by 2 days" in the foreground colour, never by colour alone. Ticking it removes the line.

What stays in the page, and how do I wire a real plan?

The ticks are local state and nothing is saved or sent. For a real plan, store the completion date per task on the server and send the completion time in UTC; the page only formats it.

Is it accessible, and does it work in a right-to-left page?

The tasks are an ordered list, each checkbox is named by its task title, the bar has a name, and a polite status line says what changed and the new count. The rail follows the page direction, and the day numbers and dates are kept whole.

All 100 timeline blocks