Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Team Achievement Awards Block for React

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 Base UI. 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.

  • Pro

    Film Credits Awards

    People and teams

    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.

  • Pro

    Top Performer Awards

    People and teams

    Three award winners on shared hairlines, each with initials, a name, the award taken and two figures set against a team median, with the difference in words and a small bar.

  • Pro

    Department Rate Table Awards

    Lists and tables

    A 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

    Awards Table Team

    Recognition

    A 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

    Recognition

    Four 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

    Class Plaques Hall of Fame Awards

    People and teams

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

All 137 awards blocks