shadcn.io is not affiliated with official shadcn/ui
Beta Features Changelog Block for React
Four early-access programmes for a notes app on shared hairlines, each with a stage tag, the release it first shipped in and a real switch to join, under a header that counts how many betas you are in.
Installation
Overview
An early-access changelog for React with Base UI, written for Trialcove, a fictional notes app. A start-aligned header carries the title and one sentence, with a count at its end that reads "You're in 2 of 4 betas". Under a rule with + marks, four programmes sit in a 2 by 2 grid on shared hairlines. Each cell has a stage tag with an icon and a word (Experimental, Beta, Stable soon), the version and day it first shipped, a short description and a switch to join. Turning one on updates the count in a polite live region and shows one honest line under the switch: it takes effect on the next launch, and in this demo the choice stays on the page. On a phone the cells stack in one column. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Switch, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour; a switch that is on is the text colour, so the page's primary stays on its one call to action. For settings pages, release notes and early-access hubs. The programmes are example data.
FAQ
How do I change the programmes?
Edit PROGRAMMES at the top of the file, newest first. Each has an id, a name, a description, a stage (EXPERIMENTAL, BETA or SOON, each an icon and a word), the version it first shipped in and its date as an ISO day. JOINED_AT_START lists the ids the visitor is in when the page loads; empty it to start with none. The count in the header is derived from the same list, so it can't disagree with the switches.
Does joining do anything?
In this demo, no: the switches change what the page shows and counts, and the line under an "on" switch says so. To make it real, send the programme's id from toggle to your own API or feature-flag service, and keep the same line only if the change really waits for the next launch.
How do the switches work with a keyboard and a screen reader?
Each is a real switch with its own name ("Join the beta: Voice capture"), so a screen reader says what it joins, not just "Join the beta". Tab moves from switch to switch and Space turns one on or off. The count in the header is a polite live region, so each change is announced as, for example, "You're in 3 of 4 betas". The note under a switch that is off is laid out but hidden, so it is neither read nor does it move the cell.
How is a stage told apart without colour?
Each stage tag is an outline badge with an icon and the words Experimental, Beta or Stable soon, so it reads in greyscale, in any theme and to a screen reader, which hears the word and skips the icon.
What moves, and what happens with reduced motion?
The header and the grid fade up once on load, with CSS transitions, and a switch's thumb slides across. With reduced motion the entrances are off and the block simply appears.
How does it fit on a phone?
Below the sm breakpoint the grid is one column, the count sits under the title, and the stage tag and the version and date wrap onto two lines if they need to. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the cells and switches mirror while the version numbers stay left to right.
Related
- Pro
Feature Flag History Changelog
Deploys and rolloutsA 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.
- Pro
Flag Environment Matrix Changelog
Deploys and rolloutsA flag by environment table with a rollout share, a shape and a word in each cell, and a user id field that buckets the user and marks where they are in or out.
- Pro
Feature Adoption Curves Changelog
Metrics and chartsA reverse split with adoption curves aligned by weeks since ship, four features as buttons with their 28-day adoption and 7-day retention, the chosen curve bold.
- Pro
Feature Request Board Changelog
Roadmap and customersAn idea board in a split: a Suggest a feature form beside status tabs with counts and a list of ideas with once-only upvote toggles and comment counts; a submitted idea joins the list locally.
- Pro
Roadmap Kanban Columns Features
Timelines and stepsA public roadmap in three lanes on shared hairlines, where the Considering lane sorts itself by votes as people press a vote toggle and a field takes one new suggestion.
- Pro
Release Timeline Changelog
Lists and timelinesA release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.