Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Terminal Log Awards Block for React

Awards printed by a command-line toolkit in a terminal window, with a toggle group of three commands that swaps the output without moving the page.

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 terminal window for React with Base UI. A toggle group of three commands (awards list, awards show 2025, awards stats) chooses what the window prints: the full list as a table, the details of the latest year, or a bar per year with the totals. All three outputs are in the page, stacked in one cell, so the window never changes height; the two not shown are hidden from sight and from assistive technology. Every line is built from one typed list, so the counts always agree. The window is dark in either theme, like a real terminal, and sits in a frame beside the copy (under it on phones). The awards and programmes are made up for the example.

FAQ

Where do the outputs come from?

From AWARDS: listLines, showLines and statsLines format the same list into the three outputs, with padded columns and one block character per half award for the bars. Change the list and every output follows.

How do I use it from the keyboard?

The commands are a toggle group with one choice always on. Tab enters it, the arrow keys move between commands and choose. A second Tab stop reaches the output, a scrollable region you can scroll with the arrow keys.

Why is the window dark in a light theme?

A terminal is dark by nature, so the window takes the dark scope and its controls and text follow. The rest of the block follows the page theme.

Does the output type itself out?

No. It is printed at once and nothing moves, so there is nothing to pause and nothing that waits for an animation.

What happens on a right-to-left page?

The output keeps its left-to-right direction, as code should, while the block around it mirrors.

Are these real awards?

No. The toolkit, the programmes and every award are made up for the example, and the years are fixed in the data.

  • Pro

    Receipt Slip Awards

    Themed formats

    Awards printed as a thermal receipt: a torn-edge slip with mono line items, dotted leaders, a derived subtotal, a verified stamp and a drawn barcode.

  • Pro

    Command Search Awards

    Filters and search

    An inline command window that searches twelve awards and six programmes by name, programme, category or year, with matches marked and a live result count.

  • Pro

    Category Tabs Awards

    Filters and search

    Underline tabs by award category, each with a count, over a two-column grid of awards with a drawn mark in a frame, beside a split divider.

  • Pro

    Count By Year Awards

    Charts and figures

    A split for a flood-risk analytics tool: a header and a toggle at the start and, at the end, a ruled list of years from 2019 to 2025, each a horizontal bar and its count, counting either awards or programmes.

  • 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

    Playlist Format Awards

    Themed formats

    Awards as a tracklist: a now playing card with a drawn record, an ordered list of seven tracks chosen by arrow keys, and a Shuffle toggle. No audio.

All 137 awards blocks