Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Feedback Wall Carousel Block for Radix UI

Twelve feedback notes in four columns of three that scroll together as one wall, each with initials, a mood, a category, three lines and a local upvote 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

Page through a lot of short notes without a long list, with this feedback wall carousel for React with Radix UI. Notemoor, a product-feedback inbox, shows twelve notes in a track of four columns, each column three notes tall on shared hairlines, so the three rows move together. A note has initials, a mood as a glyph and a word (glad, mixed or upset), a category Badge, three lines of text and an upvote button with its count. Two and a bit columns show from the medium breakpoint and a phone shows one with the next peeking. Under the track a foot holds the counter ("Columns 1–2 of 4"), a dot for each position and Previous and Next Buttons. It's built from Carousel, Badge, Button and Guides. The notes are made up; upvotes count in the page only.

FAQ

How do I use my own notes?

Edit NOTES: an id, initials, a mood (glad, mixed or upset), a category, the text and the starting votes. Notes fill the columns three at a time in reading order, so keep the count a multiple of three. Keep each note to three lines so the rows stay level.

Why do the three rows move together?

Each slide is a whole column of three notes, not one note. The track pages by column, so the rows can never drift apart, and the reading order in the page is column by column.

How does it work with a keyboard?

Tab reaches each upvote button in view, then the dots, Previous and Next. With focus inside the carousel, the arrow keys move one column (mirrored in a right-to-left layout) and Home and End go to the first and last position. Columns out of view are hidden from the tab order and from screen readers.

What is announced when it moves?

The foot's status line is the one polite live region: "Columns 2–3 of 4" after a move and "Voted in this demo." after an upvote. Each upvote button is a toggle with its count in the name.

What stays local in the demo?

Upvotes. A vote adds one to the count shown and a second press takes it back; nothing is saved or sent. To wire it for real, send the vote from vote to your API and set the count from its answer.

How does it look on a phone?

One column of three notes shows with the next peeking at the edge, the counter and buttons share the first line of the foot, and the dots sit on a line of their own.

All 100 carousel blocks