shadcn.io is not affiliated with official shadcn/ui
Deprecation Notices Changelog Block for React
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.
Installation
Overview
A deprecation-notices block for React with Base UI, written for Taperline, a fictional platform API. A header gives the "as of" day, then four cells that share their hairlines (two across from lg) each draw one deprecation as a window: a bar from the day the notice was announced to the day the feature sunsets, filled up to the as-of day with a tick on it. Under it are the two dates and the count in words ("Day 57 of 90, ends in 33 days"), and each notice names what replaces it. The notices run nearest end first, and the one that ends first has the heaviest bar and an "Ends first" badge, so weight rather than colour says which to read first. It's built from Guides and Badge, with CSS transitions for the entrance and your theme's tokens for every colour. For APIs, platforms and apps that retire features on a schedule. The notices are example data.
FAQ
How do I change the notices and the as-of day?
Edit NOTICES and AS_OF at the top of the file. A notice has an announced and a sunset day as ISO dates, a title, a summary and the replacement. The window's length, the day it is on, the days left and the bar's fill are all computed from those dates, so the text and the bar always agree.
Why a fixed as-of day instead of today?
The block never reads the clock, so the server and every browser render the same counts and nothing shifts after load. The header says the day the counts are as of. To count from today, replace AS_OF with a date you pass in from your page.
Is the bar accessible?
The bar and its tick are decoration, hidden from assistive technology. The same facts are text: both dates in time elements, "Day 57 of 90" and "ends in 33 days". Nearest is marked by the badge and the heavier bar, never by colour alone.
How is the order decided?
Nearest sunset first. The list is written in that order; if you add a notice, put it where its sunset day falls.
How does it fit on a phone and in a right-to-left layout?
On a phone the four cells stack, each with its title, its replacement, then the bar and its dates. In a right-to-left layout the text and the arrow mirror, while the bar keeps its time axis and always reads from the announcement to the sunset in the same direction.
Related
- Pro
Feature Sunset Changelog
Roadmap and customersFour 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.
- 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
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.
- Pro
API Changes Changelog
APIs and integrationsA band of ruled rows listing changed API endpoints, each with its method, path, one line on what changed, a kind (Added, Changed, Removed) and its version, filtered by HTTP method with a toggle group that sums up what is showing.