Skip to content
shadcn.io

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.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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.

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.

  • Pro

    Deprecation Notices Changelog

    APIs and integrations

    Four 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

    A 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 integrations

    A 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 timelines

    Four 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 integrations

    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.

  • Pro

    Release Countdown Changelog

    Spotlights and media

    A 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.