Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Feature Flag History Changelog Block for React Aria

A framed table of flag changes with each state drawn as a switch and a word, a rollout bar with its share in words, and the audience rule in a popover.

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

Overview

A feature-flag history for React with React Aria, written for Togglewick, a fictional feature-flag service. A start-aligned header counts from the data how many flags went live and how many were rolled back, and under it an inset frame with + marks on its corners holds one table. A row per flag change, newest first: the key in mono with the audience under it as a button that opens a popover with the targeting rule in inline code, the change drawn as two small switches with a word each (Off to On, or On to Off), the rollout as a bar with its share in words ("50% of Pro users"), and who changed it and when. A state is always a drawn switch and a word, never colour alone. It's built from Guides, Popover and Progress, with CSS transitions for the entrance and your theme's tokens for every colour. For release notes, flag dashboards and audit pages. The flags, rules and people are example data.

FAQ

How do I change the flags?

Edit FLAGS at the top of the file. A flag has a key, the state before and after (OFF or ON), the share of its audience that has it, the audience's name, the rule as written in your service, who changed it and the day. The headline count and every rollout sentence are computed from the list.

What does the audience button do?

It opens a small popover with the targeting rule in a code block and a line that says how many of every hundred matching users have the flag. Escape closes it and focus goes back to the button. The popover only reads: nothing here changes a real flag.

How is a state told apart without colour?

Each state is a small drawn switch (filled with the thumb at the end for On, a plain outline with the thumb at the start for Off) and the word beside it. Screen readers hear "Changed from Off to On" and the rollout bar is named with the key and the share.

Is it a real table?

Yes: a native table with a caption, scope on every header and the flag key as the row header. The region around it has a name and takes focus, so the keyboard can scroll it sideways.

How does it fit on a phone and in a right-to-left layout?

Below sm the table scrolls sideways in its own region and the flag column stays in view, so the audience button always sits under its key. In a right-to-left layout the table mirrors and the arrows flip, while keys and rules keep their reading order.

What moves, and what happens with reduced motion?

The header and the frame fade up once on load, with CSS transitions. With reduced motion they are off, and the popover opens without its animation.

All 200 changelog blocks