shadcn.io is not affiliated with official shadcn/ui
New Feature Notification Block for React
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 Base UI. 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.
Related
- Pro
Announcement Notification
Floating cardsA what's new card for a product analytics app: three updates in a carousel with Previous, Next and the place in words, a Don't show this again box, and a Dismiss that folds the card.
- Pro
Update Available Notification
Floating cardsA desktop app's update card at the top end of its window: highlights, one Update now button that runs a simulated download with a real progress bar, then Restart to finish, and Later with a Remind me choice.
- Pro
A what-is-new widget for a product changelog: four area chips set what you want to hear about, eight dated entries narrow to those areas with a New, Improved or Fixed word, unseen dots and a Mark all seen button, in a scroll region of fixed height.
- Pro
New Feature Top Bar Banner
Top barsA top bar for a collaborative editor with an outline New chip, one line of news and a See it button that opens a popover preview of the feature, with a close at the end.
- Pro
Feature Spotlight Changelog
Spotlights and mediaOne release with its headline feature in the spotlight: a drawn greyscale editor with two named cursors beside the title and why it matters, and a band of four smaller changes underneath.
- Pro
Before After Changelog
Spotlights and mediaA compare slider for a design-handoff tool's release: one drawn editor window, its fourteen cramped toolbar icons before and three labelled groups after, under a draggable divider that also answers the arrow keys, with a short table of what changed.