Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Feature Sunset Changelog Block for Svelte

Four retiring features as ruled Collapsible rows with a four-square phase meter; each opens to its four phases, who is affected and its replacement, and a toggle group filters by area.

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 feature-sunset changelog for Svelte with Ark UI, written for Fadewick, a fictional SaaS suite. A header with a toggle group (All, API, UI, Integration, Workflow) sits over four ruled rows rail to rail, each a Collapsible. A closed row is the feature's name and area, a four-square meter with the phase it has reached (Announced, Deprecated, Migration deadline or Removed) and its removal day. Opened, it lays the four phases out as an ordered list with a fixed day each, a check and "Done" for the ones reached by the as-of day and "Next" or "Later" for the rest, then who is affected and what replaces it. The toggle group filters the rows, a polite line says how many are showing, and a copy of every closed row, unseen, holds the block's height. It's built from Guides, Collapsible and Toggle Group, with CSS transitions for the entrance and your theme's tokens for every colour. For SaaS suites and APIs that retire features in phases. The features and days are example data.

FAQ

How do I change the features and the phases?

Edit FEATURES at the top of the file. A feature has a name, an area, four days in the order of the phases (as ISO dates), the affected sentence and the replacement. The phase it has reached comes from comparing its days with AS_OF, so the meter, the word and the Done, Next and Later marks are never typed by hand.

Does the filter move the page?

No. A copy of every closed row sits, unseen and inert, in the same grid cell as the visible list, so the block keeps the height of the full list whichever area is chosen. Opening a row is yours to choose and does grow the block, as any disclosure does. Pressing the chosen filter again does nothing, so the list is never empty.

Can the keyboard reach a closed row's details?

No. A closed row's content is inert, so its phases are out of the tab order on every base.

Why a meter of squares instead of a colour?

Four squares, one for each phase, filled as the feature reaches them, with the phase's name in words beside them and a visually hidden "Phase 2 of 4". It reads the same in greyscale and to a screen reader.

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

On a phone each closed row stacks its name, its phase and its removal day, and an opened row lists its four phases one per line. In a right-to-left layout the text mirrors, while the squares and dates keep their reading order.

What moves, and what happens with reduced motion?

The header and the list fade up once on load, and a row's chevron turns as it opens; reduced motion turns that off. Changing the filter swaps the rows at once.

All 200 changelog blocks