Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Team Achievement Awards Block for React Aria

Three 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.

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

A team awards block for React with React Aria. A start-aligned header with a tally counted from the list ("3 team awards since 2024") sits over three cells set apart, their lines running a little past the corners. Each cell is one award: the title as a heading with the programme and a fixed year, the team that won it, a small group of contributor avatars (initials only, no photographs) with a count of the others ("+4") worked out from the team's size, one line on what the team did, and the teams it shared the award with as outlined chips. Three across from lg, stacked below. The page's rails and top rule come from the Guides spine. It's built from Guides, Avatar, Avatar Group and Badge, with CSS transitions for the entrance. The programme, the teams and the people are made up for the example.

FAQ

How do I change the awards?

Edit ACHIEVEMENTS at the top of the file. Each entry has a title, a fixed year, the team, its teamSize, the crew shown as avatars, a one-line contribution and the teams it was sharedWith. The count on the group ("+4") is the team size minus the avatars shown.

How do screen readers get the contributors?

The avatar group is a drawing hidden from assistive technology. Under it a line visible only to screen readers names the contributors and the number of others: "Contributors: Name, Name, Name and 4 more." The visible text beside the group gives the team's size.

What does Shared with mean?

The other teams that were credited with the same award. They are a real list of outlined chips, not buttons. Leave sharedWith empty and add a line of your own if the award was won by one team alone.

What changes on a phone?

The three cells stack in a single column with room between them for their corner lines. Every cell keeps all of its content, and nothing scrolls sideways at 320 pixels.

Is this the same as a team kudos wall?

No. It shows an award that an outside programme gave to a team, with what the team did to earn it. A wall of thank-yous between colleagues is a different block, in the team category.

Are the teams and the cup real?

No. Crewlist, the Maplebrook Cup and every person are invented. Replace them with your own awards and teams.

All 137 awards blocks