Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Kanban Stages Awards Block for React

Three board columns, Entered, Shortlisted and Won, with count headers, an arrow showing the path and award cards that carry a drawn mark and a dated badge.

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 kanban of awards for React with Base UI. A start-aligned header sums the stages ("4 won, 3 shortlisted and 4 entered"). Three columns share their hairlines rail to rail on a faint tint, each headed by the stage name and a count, with an arrow after the first two that shows the path. In each column the award cards: a small drawn mark, the award, its programme and an outline badge with a fixed date (Entered, Results or Won, then the day). The stage also shows in the card's edge: dashed for Entered, solid for Shortlisted, heavier for Won, so it doesn't depend on position alone. The board is static; nothing drags. On a phone the columns are a keyboard-focusable row that snaps, the next column peeking. The awards and programmes are made up for the example: replace them with the recognition your product has actually received.

FAQ

How do I change the cards or the stages?

Edit STAGES: each has an id, a label, the word its badge shows (dated), an edge class and its cards; each card has a title, a programme, a shape for the mark and a fixed ISO date. The counts in the header and the column badges come from the cards.

Can I drag cards between columns?

No. This block shows where entries stand, it doesn't manage them, so the cards are plain list items. If you want a working board, keep this layout and add your own drag handling.

What happens on a phone?

The three columns become one row that scrolls sideways and snaps to each column, with the next one peeking from the edge. The row is focusable, so the arrow keys scroll it from the keyboard.

What do screen readers hear?

A list named "Awards by stage" with one item per column, each a heading ("Won, 5 of 12 awards") and a list of cards; each card's award is a heading and its badge reads the step and the date. The arrows and marks are decorative and hidden.

Does the path flip on a right-to-left page?

Yes. The arrows after Entered and Shortlisted mirror, and the columns follow the page's direction, so the path still reads in the order entries move.

Are these real awards?

No. Every programme, award and product here is made up for the example, and the dates are fixed in the data; the results dates are in early 2026, so nothing is computed from today.

  • Pro

    Status Radio Toggle Awards

    Filters and search

    A radio group styled as a pill switch with a sliding thumb filters awards by status, with an icon and a word on every row and a live count.

  • Pro

    Filterable Award List

    Filters and search

    Eighteen awards in two columns narrowed by category chips and a year group, with a live count, a Clear filters button and an empty state.

  • Pro

    Sortable Table Awards

    Lists and tables

    A sortable table of awards with buttons in the column heads, aria-sort, status badges with an icon and a word, a sticky first column and a count in the foot.

  • Pro

    Year Rail Timeline Awards

    Timelines

    A vertical rail of awards by year for a planning tool, a node for each year on a solid hairline with its awards as rows, and the older years behind a View earlier years Collapsible.

  • Pro

    Milestone Lanes Awards

    Timelines

    Two lanes on one quarter axis for a roadmap tool: company milestones above, awards below, a stepped hairline from each award to the milestone before it and the gap counted in months.

  • Pro

    Gantt Roadmap About

    Timelines

    A Now, Next and Later roadmap for planning software: three horizon columns, three lanes, and initiatives as bars that span the columns they cover, each with a progress fill.

All 137 awards blocks