shadcn.io is not affiliated with official shadcn/ui
Deprecation Notices Changelog Block for Vue
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 Vue with Ark 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.