Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Notifications Carousel Block for React Aria

Ten notifications in three day slides with a label that follows the day in view, rows that mark themselves read when pressed and a Mark all read button.

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

Group an activity feed by day without a long list, with this notifications carousel for React with React Aria. Toastmoor, a team activity feed, shows ten notifications in three day slides (Today, Yesterday and This week) as ruled rows: initials in an Avatar, a sentence, a fixed time and an unread dot drawn in foreground weight. A label band above the track names the day in view and counts its notifications and how many are unread. Pressing a row marks it read, and the header's one control, "Mark all read", clears every dot; all counts are derived from the rows. The foot holds "Day 2 of 3", a dot for each day and Previous and Next Buttons. The ruled bands come from Guides. The people and events are made up.

FAQ

How do I use my own notifications?

Edit DAYS. Each day has a label and its notes; each note has a person, initials, a sentence, a fixed time and whether it starts unread. Counts and the label band are derived from them.

What marks a notification read?

Pressing its row, or "Mark all read" in the header. The dot goes hollow, the row loses its weight and the counts update. When nothing is unread the button is marked unavailable and says so if pressed.

How does it work with a keyboard?

Tab reaches the controls, Previous, the dots and Next. With focus inside the track, the arrow keys move it (mirrored in a right-to-left layout) and Home and End jump to the first and last position. Previous and Next stay in the tab order at the ends and are marked unavailable instead of disabled, so focus never disappears. Slides out of view are hidden from the tab order and from screen readers.

What moves the track?

Previous and Next move one day; the dots go to a day. The label above the track follows the day in view. The track is an Embla carousel; the block listens for its select event and re-counts the snaps when the layout changes.

What stays local in the demo?

Read state lives in the page and is lost on reload; the status line says "Marked 6 read in this demo". To wire it for real, send the read ids to your API from markOne and markAll and load the days from it.

How does it look on a phone?

One day shows at a time, rows are full width, and the dots sit on a line under the counter and buttons.

All 100 carousel blocks