Does Awards work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Awards

SVG laurels around each award, with the rank, the prize, who gave it and the year.

Type: Social proof section
Styles: Minimal, Dark
Licence: Charcoal UI Pro

About Awards

Awards wraps each prize in a pair of drawn laurels, with the rank, the award, who gave it and the year. It adds weight to a launch without needing badge images from every organiser.

It is a full-width social proof section for React and Tailwind CSS 4, in a minimal and dark style. Preview it at any width above, then install it with one command.

When to use Awards

Product Hunt and app store launches.
Agencies and studios.
Films and festivals.
Hardware and design awards.

How it is built

Laurels are generated SVG leaves in your accent colour, each award rises in on scroll, and awards are rank, title, by and year.

It has no component dependencies beyond the shared utilities, so it is one file to read and change.

Goes well with Awards

Awards is part of 6 full templates, so you can see it in a finished page.

Foundry template: Big agency work, small agency speed.
Northlight template: Showreel first, everything else second.
Plinth template: Buildings, told like stories.
Halo template: One product, every angle.
Manifest template: Turn launch day into a sales day.
Pocket template: Launch an app, get the downloads.
Logo Cloud: A React logo cloud: a muted marquee of customer wordmarks
Stats Counters: A React stats section: four big numbers that roll into place
Stats Chart: A React growth section with stat cards beside an animated bar chart
Logo Wall: A React customer logo grid that reveals each customer's result on hover

Install Awards

npx shadcn@latest add @charcoal/awards

Awards is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Awards work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Awards as Markdown