shadcn.io is not affiliated with official shadcn/ui
Announcement Notification Block for React Aria
A 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.
Installation
Overview
Tell people what shipped, with this announcement card for React with React Aria. It's the what's new card of Heraldwick, a product analytics app, in a hairline frame with a plus mark on each corner: three updates in the catalog Carousel, each a small greyscale drawing (a share link, a funnel, a weekly digest) over its title and one sentence. Previous and Next step through them with the place in words ("Update 1 of 3"), the arrow keys and a swipe work too, and nothing advances by itself. The foot band holds a Checkbox "Don't show this again" and Dismiss, which folds the card into a short note in the same space with a Bring it back button. It's built from Carousel, Checkbox, Button, Empty and Guides, with CSS motion only. For release notes, product tours and any app that has news but not a page for it.
FAQ
How do I put my own updates in?
Edit UPDATES. Each has an id, a title, a sentence in text (keep it to about three lines, since the slide holds that much room) and a picture that picks one of three drawings; add your own drawing component for more. COUNT and the place line follow the list, so the pager and the status say the right numbers.
How does the carousel move?
setApi callback and listens for its select event, so Previous, Next, the arrow keys and a swipe all end in the same place. Embla's own arrow keys follow the physical direction, so the block adds its own handler that follows the page direction on the two buttons.Previous and Next are quiet and refuse politely at the ends ("This is the first update") instead of wrapping round, and nothing plays by itself, so there is no timer to pause.What do Dismiss and the checkbox do?
Dismiss folds the card into a note: "The updates are hidden", and whether you chose to see them again or not ("You chose not to see them again" or "They will show again next time"), with a Bring it back button. Nothing is stored in this demo, so a reload shows the card again. In your app, save the checkbox's answer (with the version of the news it applies to) in your own storage and skip rendering the card when it is set.
Does the card change size when it folds?
No. The slides and the folded note share one grid cell, and the one that isn't showing is unseen and inert, so the card keeps the height of the slides and the page under it never moves. Focus moves to Bring it back when the card folds and back to Dismiss when it returns.
Is it accessible?
The card is a carousel with a name, each slide is named with its title and where it is in the set, and the pager says the same ("Update 2 of 3: Funnels remember their filters") in a polite status message when you change slide. Previous and Next are real buttons, the checkbox has a visible label, and the drawings are hidden from screen readers since the sentences say the same. With reduced motion nothing slides but the slide change itself.