Feedback board
ProA feature request board with a submit form that finds similar requests, upvotes, top and new sorting, status filters, and comments.
Live block · sample data
- A public or in app board where customers suggest and vote on features.
- Beta programs that need a lightweight place for requests and team replies.
- One to one support conversations; use support-conversation or support-widget.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this to collect and rank feature requests. Save new requests with onSubmit, votes with onVote and comments with onComment, and set each status from your own admin tools.
example.tsx
import { FeedbackBoard } from "@/components/arc/blocks/feedback-board/feedback-board"; export function FeedbackPage({ requests, user }) { return ( <FeedbackBoard defaultRequests={requests} currentUser={{ name: user.name, avatar: user.avatar }} onSubmit={draft => createRequest(draft)} onVote={(id, voted) => vote(id, voted)} onComment={(id, text) => comment(id, text)} /> );}API reference
2 parts. The first is the root.
FeedbackBoard
A feature request board: post an idea, upvote with a rolling count, sort by top or new, filter by status, and expand a request in place to read and add comments. While a title is typed, similar requests appear so people vote instead of posting duplicates.
PropTypeDefaultDescription
requestsFeedbackRequest[]–Controlled requests. Pair with onRequestsChange.defaultRequestsFeedbackRequest[]sample requestsInitial requests when uncontrolled.onRequestsChange(requests: FeedbackRequest[]) => void–Called with the full list after a vote, a new request, or a comment.onVote(id: string, voted: boolean) => void–Called after a vote is added or removed.onSubmit(draft: { title, details, category }) => void–Called with a new request once the title passes validation. The author's vote is added automatically.onComment(id: string, text: string) => void–Called when a comment is posted.statuses{ id: FeedbackStatus; name: string }[]Under review, Planned, In progress, CompleteStatus names for filters and tags.categoriesstring[]["Feature", "Integration", "Improvement"]Category choices in the form.currentUser{ name: string; avatar?: string }{ name: "You" }Author of new requests and comments.defaultSort"top" | "new""top"Initial sort.titlestring"Feedback"Page heading.classNamestring–Extra class on the root.FeedbackRequest
PropTypeDefaultDescription
id, title, details, categoryRequiredstring–Request content.statusRequired"review" | "planned" | "progress" | "done"–Shown as a dot and label; filterable.votesRequirednumber–Vote count.votedboolean–Whether the current visitor voted.authorRequired{ name, avatar? }–Who posted it.at, createdRequiredstring, number–Display time and a sort key for New (higher is newer).commentsRequired{ id, author, text, at, team? }[]–Comments. team marks replies from your team with a Team tag.- Tab
- Move through New request, status filters, sort, and each request's vote and title.
- EnterorSpace
- Toggle a vote, expand a request, or pick a filter.
- Arrow leftorArrow right
- Switch between Top and New.
- Escape
- Close the new request form.
- The form validates on submit with an inline error tied to the title through aria-describedby and aria-invalid.
- Votes are toggle buttons with aria-pressed and a label that names the request and count; changes and posts are announced.
- Request titles are buttons with aria-expanded that reveal details and comments in place.
- Status always pairs a dot with its name; filters and sort are radiogroups.
- Voting hops the arrow and rolls the count. Rows keep their place while you vote and only re-rank when you change sort or filter, so nothing moves under the pointer.
- Sort and filter changes glide rows to their new order. A posted request lands at the top with a brief tint.
- The form, similar requests, errors, and expanded details open on a critically damped height spring.
- Reduced motion removes travel and height springs and keeps short fades.
- Content sits in a centered 820px column under a frosted sticky header.
- Below 640px the toolbar stacks: status filters scroll sideways above the sort switch, and the form's category chips sit above a full width Post button.
- Vote boxes shrink slightly and the relative time hides on phones.
- Sorting and filtering are memoized per change; only rows that move animate.
- The header blur is one backdrop filter; it falls back to a solid surface when transparency is reduced.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use to collect and rank feature requests from customers. Keep the admin side (status changes, merging) in your own tools and pass the result in.
- The similar requests check is a simple word match on the client. Swap it for server search when the board grows.
- Record votes per signed in user; the board tracks only the current visitor's vote.
The full library index for assistants is at /llms.txt.
