shadcn.io is not affiliated with official shadcn/ui
Sticky Note Wall Features Block for Radix UI
A wall of note cards on a field of dots with a kind filter, an add field that really adds a note, and an upvote toggle on each card.
Installation
Overview
A note-wall feature section for React with Radix UI. A centred header says "A wall your whole team writes on" and holds the controls: a toggle group (All, Ideas, To do) and an "Add a note" field with a button, and a chip at the top of the wall says how many of its eight places are used. Six notes sit on a field of dots that fades toward the foot, each turned a degree or two: a kind badge, a title, a line, the author's initials and an upvote toggle with its count. Choosing a kind tints the notes of the other kind; adding a note puts a real one first on the wall, up to eight. On a phone the notes stack in one column and stand straight. It's built from Toggle Group, Toggle, Input Group, Avatar, Badge and Dot Pattern, with your theme's tokens for every colour. For team notes, feedback boards and idea walls.
FAQ
Does adding a note really work?
Yes. Type a title and press Enter or Add and a note goes first on the wall, under your name, as an Idea, or as a To do when the To do filter is chosen. Empty titles are ignored. At eight notes the wall is full: the status line says so and the button ignores presses. The notes live in the block's state, so connect add to your own store.
How does the filter work?
It is a toggle group in multiple-selection mode, so each button is a real toggle button that reports whether it is pressed. A small handler keeps exactly one pressed. The notes of the other kind take a solid tint but stay in place, so the wall never reflows, and every note keeps its kind badge, so the tint is never the only signal.
On Radix the group is type="multiple".
How is the vote count worked out?
Each note stores the votes from everyone else, and the toggle adds yours: pressed shows one more, released shows the stored number. The toggle's name is "Upvote" and the note's title, so a screen reader hears which note you are voting on, and its pressed state.