shadcn.io is not affiliated with official shadcn/ui
Centered Award Badge Hero Block for React
A compact centered hero led by an award plaque in a hairline frame, with a headline, a Shine Button and an outline button, then one band of three more recognitions.
Installation
Overview
A compact centered hero that leads with recognition. A small plaque, framed by hairlines with + marks on its corners, shows a trophy, the rank and the award with where it was won. Then come a headline, a sentence, a Shine Button as the one primary action and an outline button. Under them, one band runs from rail to rail with three cells, each an icon, an event and a result, split by hairlines that end at the rails; on a phone the cells stack as rows. It's built from Guides, Shine Button and Button with Lucide icons and a CSS entrance that brings each part in one after another and stays still under reduced motion. The fictional product is Quillwork, a planning tool. For product launches, newly funded startups and any team whose recent recognition is its strongest argument.
FAQ
How do I put my own awards in the hero?
Edit FEATURED at the top of the file for the plaque: the rank, the award in detail and the platform that gave it. The band comes from RECOGNITIONS, each with a label, a detail and a Lucide icon. Three cells fill the band; with two or four, change sm:grid-cols-3 to match. Only list awards you won, under the names their organizers use.
Can I show the platforms' official badges instead?
Yes. Many launch platforms and review sites offer an embeddable badge image. Swap the plaque or a cell for that image with a descriptive alt (Product of the Day on Launchyard), and link it to your page on the platform if their terms ask for it. Keep the text versions if you want the row to follow your theme in light and dark.
How do screen readers read the plaque and the band?
Everything is text. The plaque reads as number one, Product of the Day, Launchyard, and the band is a list named More recognition, each item read as its event and result. The trophy and the cells' icons are hidden from assistive technology, and so are the frame's lines and marks. The headline is the page's one h1, and both calls to action are links named by their text.
Where do the buttons link to?
Start planning free and Read the reviews are links to #: point them at your sign-up page and your reviews or press page.
On Base UI, each button renders its link with render={<a href="/signup" />} and nativeButton={false}.
How does the hero fit on a phone?
The plaque stays centered at its natural width, the headline steps down to text-4xl and wraps in balanced lines, and the two buttons wrap onto two centered rows. The band's three cells stack as rows with their hairlines between them, so nothing scrolls sideways down to 320px, and the Shine Button is on the first screen.
When should I use an award hero instead of a simpler centered hero?
Use it in the months after a launch or a win, while the recognition is fresh and means something to your visitors. Once it's old news, move the awards lower down the page and lead with numbers that keep growing, such as customers, reviews or usage.
Related
- Pro
Centered Launch Badge Hero
Logos and social proofA centered launch-day hero with a rank badge that links to the launch page, a Shine Button and three launch metrics in separate cells whose hairlines overshoot their corners.
- Pro
Centered Feature Badges Row Hero
Features and tablesA centered showcase hero for a deploy platform: a headline, a Shine Button and a second action, a hairline band of four feature badges and a framed sketch of a production deployment with its build log.
- Pro
Centered Star Rating Hero
TestimonialsA showcase centered hero led by its review score, with five stars and the average, a Shine Button, review-site badges and three reviews below in cells whose hairlines overshoot their corners.
- Pro
Left-Aligned Social Proof Bar Hero
Logos and social proofA compact start-aligned hero closed by a three-cell social proof bar on its own rule: an avatar stack with the user count, a five-star rating with the review count and a compliance mark.
- Pro
Reverse Split News List Hero
Updates and timelinesA reverse split hero on drafting lines for a team docs workspace: a greyscale product illustration beside an announcement pill, the headline, a ruled list of the latest updates as links, a Shine Button and a second action.
- Pro
Hero With Stats
Stats and live dataA split hero with a headline, a Shine Button and a second action beside a rail of four key figures on shared hairlines, each with its period and a small bar trend.