shadcn.io is not affiliated with official shadcn/ui
New Feature Notification Block for React Aria
A new-feature spotlight for a design tool: a New badge, three short lines, a Try it button and a quiet Learn more beside a drawn layers panel, with a Before and After toggle that adds a checkbox column and a bulk-edit bar to the same rows.
Installation
Overview
Show what a new feature changes instead of describing it, with this new-feature spotlight for React with React Aria. It is Canvasbird, a design tool, in one hairline frame with a plus mark on each corner and a divider between two halves. The copy comes first in the page: a "New" Badge, "Bulk edit", three short lines, the one Shine Button, Try it, and a quiet Learn more. On a wide screen the drawn sketch sits at the start side: a layers panel built from rows, with a Toggle Group that flips Before and After. After adds a checkbox column, tints the three picked layers and shows a bulk-edit bar; Try it moves the sketch to After. A sentence under it says what the view shows. Guides draw the lines. For product launches, release notes and in-app tours.
FAQ
Does Try it install anything?
No. It switches the sketch to After and says "Bulk edit is not installed in this demo". Learn more is not linked here. In your app Try it would open the feature or start a tour, and Learn more would link to your docs.
Is the sketch a screenshot?
No. It is rows of plain boxes and text, hidden from assistive technology, in the page's own colours, so it follows the theme and never goes out of date with a picture. The facts it shows are in the sentence under it. Change LAYERS and CHIPS to draw your own product.
How does the Before and After toggle behave?
It is a single-choice toggle group that is never empty: pressing the chosen one does nothing, and the other swaps the view. The sketch keeps its size, because the checkbox column and the bar are always there and only hidden in Before.
Why is the copy first in the page but the sketch first on screen?
Reading order follows the copy, so a screen reader and the keyboard meet the message and the primary first; the sketch is placed at the start side with the grid. On a phone they stack with the copy on top.