shadcn.io is not affiliated with official shadcn/ui
Film Credits Awards Block for React
The end credits for a video-editing suite: three teams as hairline bands, each with the award it helped win as an outlined badge and a centred list of roles and names set like film credits.
Installation
Overview
Film credits for React with Base UI. A centred header with a tally counted from the list ("10 people, 3 teams, 3 awards") sits over three bands, one per team, each opened by its own hairline with + marks. A band is set like the end credits of a film: the team's name beside the award it helped win as an outlined badge, then a centred description list with each role small and muted at the end of its row and the person's name larger at the start, the two meeting in the middle. There are no avatars and no pictures. The last band ends the block and the same layout holds on a phone. The page's rails and top rule come from the Guides spine. It's built from Guides, Badge and Data List, with CSS transitions for the entrance. The guild, the awards and the people are made up for the example.
FAQ
How do I change the teams and the credits?
Edit TEAMS at the top of the file. Each team has a name, the award it helped win and a list of credits, each a role and a name. The tally in the header is counted from the list, so adding a person or a team updates it.
Why are the roles at the end and the names at the start?
It follows how credits are set on screen: the role right-aligned and the name left-aligned around a shared middle. In a right-to-left layout the two sides swap, since the classes are logical (text-start, text-end). Under the layout it is a description list, so a screen reader hears each role with its name.
What does the badge say?
That the team contributed to an award, with the year: "Contributed to Best Craft, 2025". It is an outlined badge, not a button, so nothing in the block is clickable. Years are fixed text, never computed from today.
What changes on a phone?
Nothing about the structure. The bands stay stacked and the two columns of each list stay, a little narrower, with long names wrapping inside their column. At 320 pixels nothing scrolls sideways.
Related
- Pro
Team Achievement Awards
People and teamsThree team award cells set apart with overshoot corners: the award, the team, a group of initials avatars with a count of the rest, one line on what the team did and the teams it shared the award with.
- Pro
Department Rate Table Awards
Lists and tablesA ruled table of eight departments with their headcount, awards won and awards per ten people, drawn as a bar beside the number, sorted from the highest rate down with a foot row for the whole company.
- Pro
Class Plaques Hall of Fame Awards
People and teamsA hall of fame of seven open-source contributors in three inducted classes, each an engraved plaque with an oval monogram medallion, a one-line contribution and its class year.
- Pro
Awards Table Team
RecognitionA table of eight awards for a field-notes app: the winner, the category with a small drawn mark, the company year, and a button that opens the citation in place under the row.
- Pro
Counted Award Cells Team
RecognitionFour award categories as cells apart with overshoot: a drawn mark, a count that rolls up once, who gives the award, and the latest winner under a hairline.
- Pro
Details Awards
Cards and gridsThree award data sheets for a monitoring tool: a drawn mark and the award's name over a description list of result, programme, category, entries judged, announcement date and prize.