shadcn.io is not affiliated with official shadcn/ui
Guestbook Customer Wall Block for React Aria
A customer wall as a guestbook: five dated notes from shop owners, newest first, beside a framed form that adds your note to the top of the list for this visit.
Installation
Overview
A customer wall for React with React Aria, written for Guestbookly, a fictional feedback widget that puts a guestbook on any website. At the start of a split, five notes from shop owners are listed newest first, each with the writer's initials, name, role and city, one line and when it was left. At the end, behind the divider, a framed form asks for a name, an optional role and city and a note of up to 140 characters with a live counter, and a Shine Button leaves it. A valid note is added to the top of the list straight away, marked "Only on this page", and a status line says what happened: the note is kept in this page's memory for this visit, nothing is sent anywhere, and a refresh clears it. Each field checks itself when you leave it, and submitting checks the rest and moves focus to the first problem. In the page order the form comes before the notes, so on a phone it is the first thing under the heading. It's built from Guides, Frame, Field, Input, Textarea, Avatar, Badge and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For about pages and customer pages that invite a reply. The people and notes are example data, and nothing you type leaves the page.
FAQ
Where does a note go when I leave it?
Nowhere but this page's state. The submit handler prepends the note to a list held in React state (or the framework's equivalent) and tells you so in a status line. A refresh clears it. To keep notes, send details to your own endpoint where the comment in submit says, and render what comes back.
How do I change the notes and the limits?
NOTES holds the five seed notes, newest first, each with a name, where, text and when. LIMIT is the longest note and SHORTEST the least that says anything. A note's initials are made from its name, so no photographs are needed.
How does validation work?
A field is checked when you leave it (an empty one waits until you submit), and once an error shows it re-checks as you type. Submitting checks both required fields, the name and the note, and moves focus to the first one with a problem. Each error is text with an icon, linked to its field with aria-describedby.
How is a new note announced?
A status line under the button changes to "Added to the top of the wall for this visit. It wasn't sent anywhere." The line is re-created on each note, so a screen reader reads it every time. The new note is a normal list item with its "Only on this page" badge.