shadcn.io is not affiliated with official shadcn/ui
Kudos Composer Feed Awards Block for React
A team-chat kudos feed in a split: a composer with a value select, a recipient field, a message and a Send kudos button at the start, and the latest six kudos at the end, with each new one added at the top.
Installation
Overview
A kudos feed for React with Base UI. At the start of a split sit a compact header and a composer: a select for the value the kudos is for, a field for who it is for, a message, and a Send kudos button. At the end, behind a divider that meets the top rule with a plus mark, is the latest kudos as a list, each with the sender as an initials avatar, "sender to recipient", the message, the monthly prize's value and the date. Sending checks every field, shows each problem under its field and moves focus to the first one; a good kudos is added to the top of the list and announced, the oldest drops off so the list always shows six, and the block keeps its size. It's built from Select, Input, Textarea, Field, Shine Button, Avatar, Guides and your theme's tokens. The Duneford Cup, Huzzah and the people are made up for the example.
FAQ
Does Send kudos send anything?
No. It adds the kudos to the list on this page and says so ("Recorded in this demo only: nothing was sent"); it is gone when you leave. Where the code says "Send details to your chat service here", replace the local update with a request.
What does it check?
A value must be chosen, a recipient named, and the message needs at least 12 characters. Each problem shows under its field in a space that is always reserved, so nothing moves when it appears, and focus goes to the first problem. The sample people and kudos at the top of the file are SAMPLES; change the values in CUP_VALUES.
How is a new kudos announced?
A polite status line under the button says who the kudos is for and that it was recorded in this demo only. The new item appears at the top of the list and focus stays on the button, so you can send another.
Why does the list always show six?
So the block never grows without limit: a new kudos pushes the oldest one off. Change SHOWN to show more. Sample dates are fixed in the data and a kudos sent here shows "Sent in this demo" instead of a date.
Related
- Pro
Kudos Wall Team
RecognitionTwelve kudos notes in hairline cells with a Thanks, Shipped and Helped picker that dims the rest, and a cheer button on each note that adds one to its count and takes it back.
- Pro
Nomination Form Awards
People and teamsA nomination form for an internal recognition programme: a category radio group, a searchable colleague list, a reason with a live character count and a confirmation that says it is only recorded in the demo.
- Pro
Kudos Tally Matrix Awards
People and teamsA peer-recognition tally for a team-culture programme: five people by four values as a ruled table, each count in a cell that gets heavier as the count grows, with a total for every person and every value.
- Pro
Values Columns Wall Awards
People and teamsA wall of thank-you notes in five columns, one per company value, each opening with a drawn glyph and holding three notes with their sender, receiver and month, turning into a swipe row on a phone.
- Pro
Notification Inbox Awards
Themed formatsAn awards inbox in two groups, This week and Earlier, each row an event (Won, Shortlisted, Entered or Renewed) with a drawn mark and a word, an unread dot with the word Unread, and a Mark all as read button.
- Pro
Star Rating Feedback Contact
Support and feedbackA product feedback form for a roadmap tool in a card in card: five named stars with a word that follows the choice, switch-on topic chips and a message, ending in a confirmation that lists what was chosen.