Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Film Credits Awards Block for Radix UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Film credits for React with Radix 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.

Is this a place for internal thank-yous?

No. It credits the people behind awards that an outside programme gave, which is why each team carries the award it contributed to. For internal kudos, the team blocks are a better fit.

Are the guild and the people real?

No. Rowena, the Willowley Guild and every person are invented. Replace them with your own crew and awards.

All 137 awards blocks