Awards blocks for every framework.

137 sections that show recognition on a marketing page: badge walls, laurels, trophy cases, certificates, rankings, timelines, press coverage and year-in-review tallies. The gallery sorts them into 13 groups: One featured award, Badges and seals, Cards and grids, Lists and tables, Strips and banners, Themed formats, Charts and figures, Rankings and scores, Timelines, People and teams, Press and quotes, Filters and search, Reveal and browse.

For a wall of badges use Dense Badge Wall Awards, and for one slim line Compact Badge Strip Awards or Rating and Laurels Trust Bar Awards. For awards over time use Year Rail Timeline Awards, for a list readers can narrow Filterable Award List, and for the proof behind a claim Evidence Table Awards. Certificate Awards tells one award at full size.

The badges, laurels, seals and trophies are drawn in markup (inline SVG and CSS), not image files, and they are hidden from assistive technology. The award's name, programme and year are real text next to each drawing, so a screen reader reads the award, not the picture.

No. The companies, programmes and awards are invented for each example, so no block claims a recognition that anyone has won. Put in only awards you have actually received, with the programme's name and the year.

Edit the typed array at the top of the file: most blocks hold an AWARDS list, where each entry is a plain object with the award's title, programme, year and, in some blocks, a category, and the press ledger holds STORIES. In Filterable Award List the totals in the header, the category counts and the year choices are all counted from that list, so you only change the data.

Filterable Award List keeps its categories in a CATEGORIES array (id, label and the drawn mark's shape) and a Category type. Add the id to the type and one entry to the array, then give your awards that id. The chips, counts and the "Showing 7 of 18 awards" line follow from the list.

Replace the drawn mark with an image of the logo the award body gave you, using next/image or an img element with alt text, and keep the award's name as text beside it. Check the programme's rules for how its badge may be shown; the blocks draw generic shapes so they never copy anyone's mark.

Coverage Ledger Press Awards makes each headline a link that covers its row, but the href is a placeholder # in the markup: add a url to each story in STORIES and use it there. Certificate Awards has an outline Verify link that points to a placeholder # until you set it to your verification page. In other blocks add an href field to the award object and render the title as a link.

Certificate Awards works its status from a fixed AS_OF day (2026-10-14) against the certificate's validUntil date, so the preview never goes stale. In your app set AS_OF from the current date on the server, and the days to go and the Valid state follow.

This page lists 137 of the category's 137 awards blocks for React on Base UI. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The awards blocks here are written on Base UI primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/awards-accordion.json). The other bases are one picker away from /awards-block.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on Base UI. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/awards-accordion.json for Accordion Awards. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Accordion Awards brings Accordion, Data List and Guides, installed before it. Nothing else changes in your project.

Use the filters above the grid: 13 kinds of awards block, led by charts and figures (19), lists and tables (17), cards and grids (16) and rankings and scores (12), and sort by popular or name. A good first look: Accordion Awards, Animated Reveal Awards and Annual Report Awards. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a awards block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the layouts, what it shows and interaction kinds.

Open its page and use the full-screen viewer (/view/awards/accordion) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each awards block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Base UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the awards blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 137 awards blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a awards block, read it with get_block and install it on your React on Base UI stack.

Pass `category: "awards"` to search_blocks to search only the 137 awards blocks, or to list_blocks for the 13 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "awards", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.