shadcn.io is not affiliated with official shadcn/ui
Issue Status Change Notification Block for React Aria
A narrow card for one issue that moved: the key and title, Before and After cells with a glyph and a word each and an arrow between them, who moved it and when, a three-line history, and a Watching switch whose sentence says what you will and will not hear.
Installation
Overview
Say what moved and what it means for you, with this status change notification for React with React Aria. It is Ticketlark, an issue tracker, as a narrow card in a framed panel with a plus mark on each corner: the issue's key and title, the move drawn as two cells, Before and After, each a Badge holding a glyph and a word with an arrow across the seam, who made it and when, and a three-line history of the issue. Under it a Switch says Watching and a sentence beside it says what you will hear (status changes, comments that mention you, reassignments) and what you will not (edits to the description or labels), changing when the switch does. Lines come from Guides. For issue trackers, support desks and any item that moves through states.
FAQ
How do I use my own issue and statuses?
Edit KEY and TITLE, and the three steps (LATEST, BEFORE and the one under them) with a status (open, progress, review or done), a who and an ISO at in UTC. The sentence, both cells and the history are worked out from those steps, and AS_OF is the page's fixed now, so a time reads "09:12 UTC" or "Yesterday 16:40 UTC".
Does the move rely on colour?
No. Each status is a glyph and a word (Done, In review, In progress, Open), the After cell is heavier and has a foreground border, and the arrow points from Before to After and turns round for right-to-left layouts. The block uses no status colour, so it reads the same in every theme.
What does the Watching switch do, and what stays local?
It flips in the page: the sentence beside it changes between what you will hear and a note that you will not hear about the issue, and the status line says so. Nothing is subscribed or unsubscribed. In your app save the change from the switch's handler and keep the two sentences, so people know the consequence before they leave a thread.
Why is the history only three lines?
The notification is about one move, so the history shows the last few as context and no more; a full trail belongs in the activity feed or the audit log. Each line has the status as a glyph and a word, who made it and when; on a phone the time moves under the name so nothing is cut.
How does it look on a phone?
The two cells sit side by side with the arrow across the seam, the history lines become two lines tall with the time under the name, and the switch and its sentence keep their place. The sentence reserves its height for the longer wording so flipping the switch never moves the page.