shadcn.io is not affiliated with official shadcn/ui
Feature Sunset Changelog Block for React
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.
Installation
Overview
A feature-sunset changelog for React with Base 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.
Related
- Pro
Deprecation Notices Changelog
APIs and integrationsFour deprecation notices, each a window bar from the day it was announced to the day it sunsets, filled to an as-of day with a tick, with the days counted and the replacement named.
- Pro
API Deprecation Timeline Changelog
APIs and integrationsA v2 API retired in four phases as read-only Steps in cells that share their hairlines, then a framed table of the five deprecated endpoints with a Copy button on each replacement.
- $Pro
Breaking Changes Changelog
APIs and integrationsA framed table of four breaking calls: the old call in a del row, the new in an ins row, who it affects and the day to migrate by, with a codemod command in a terminal strip and a Copy button.
- Pro
Expandable Release Entries
Lists and timelinesFour release rows that each open to a sentence and a copyable migration snippet in a focusable code region; the newest is open on load and any number can be open.
- Pro
Migration Guide Changelog
APIs and integrationsA 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.
- Pro
Release Countdown Changelog
Spotlights and mediaA countdown to the next release of a launch scheduler, in a split: a framed live countdown, the three scheduled changes as a numbered list with type tags, and a Remind me button that turns to Reminder set and back.