Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Migration Guide Changelog Block for Svelte

A split: a deadline tag and a running progress count at the start, four migration steps at the end, each with a Done checkbox and a copyable config snippet in a collapsible.

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

A migration guide for Svelte with Ark UI, written for Movewright, a fictional API gateway, as a split whose hairline divider meets the top rule at a +. At the start sit the title, a sentence, a deadline tag ("Removed on Nov 30, 2026", a fixed time) and a running count, "2 of 4 steps done", with a progress bar that follows it. At the end, an ordered list of four steps runs rail to rail: each has its title, a sentence with the file or key in inline code, a Done checkbox and, for three of them, a Snippet button that opens the config in a labelled, focusable region with a Copy button. Ticking a step moves the count and the bar; Copy fills the clipboard and tells screen readers so. Nothing is saved: it is the demo's own state. On a phone the deadline and the count come first and the steps follow. It's built from Guides, Checkbox, Collapsible, Copy Button, Progress and Badge, with CSS transitions for the entrance and your theme's tokens for every colour. For API and platform migrations with a hard end date. The steps and files are example data.

FAQ

How do I change the steps?

Edit STEPS at the top of the file. A step has an id, a title, a detail (the sentence as parts: every second part is shown as inline code), a file name, a snippet (empty for a step with none) and startsDone. Change DEADLINE for the date in the tag. The count and the bar come from the list.

Are the ticks saved?

No. They are state in the page and reset on reload; two steps start ticked so both states are on view. To keep them, store the ticked ids or send them to your server from tick.

How is progress told to a screen reader?

The count ("2 of 4 steps done") sits in a polite status, so each tick is announced. The bar is decoration and hidden from assistive technology, because the sentence says the same thing. Each checkbox is named "Done" followed by its step's title.

What does Copy do?

It copies the snippet of that step exactly as shown and says "Copied the snippet for Switch to the v2 route table" in a polite status line, or that it couldn't copy. Nothing runs and no file is written.

How does it work with a keyboard?

Tab reaches each step's Snippet button and its Done checkbox in turn. Enter or Space opens a snippet or ticks a step. A closed snippet is out of the tab order; an open one adds its Copy button and a code region that scrolls with the arrow keys.

How does it fit on a phone and in a right-to-left layout?

The deadline and the count come first, then the steps one under another with the Done checkbox below each sentence. Files, keys and snippets keep their left-to-right reading order in a right-to-left layout while the rest mirrors.

All 200 changelog blocks