shadcn.io is not affiliated with official shadcn/ui
Kudos Composer Feed Awards Block for Svelte
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 Svelte with Ark 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.