shadcn.io is not affiliated with official shadcn/ui
Awards Table Team Block for Svelte
A table of eight awards for a field-notes app: the winner, the category with a small drawn mark, the company year, and a button that opens the citation in place under the row.
Installation
Overview
A recognition table for Svelte with Ark UI, written for Fieldwren, a fictional field-notes app for researchers. A start-aligned header says "Thank-yous that stuck at Fieldwren" and, at its end, a tally counted from the list ("8 awards in 5 categories") beside a small drawn medal. Under it a table runs from rail to rail and ends the block. Each row names the winner (an initials avatar, a name and a specific role), the category with its own drawn mark (a cup, a rosette, a shield, a medal or a seal), the company year it was given ("Year 3", never a calendar year) and a Citation button. The button opens the citation in place under the row: the first one starts open and opening another folds it. On a phone the category and year move under the winner's name and the button keeps only its icon. It is built from Avatar, Button's variants and Guides with your theme's tokens. The people and their citations are made up for the example.
FAQ
How do I change the awards?
Edit AWARDS at the top of the file: each award has a category, a winner's name and role, a year (a number of the company's years), a citation and the shape of its mark. The tally in the header is counted from the list, so it stays right when you add or remove one. Awards are listed newest first, in the order you write them.
How does the citation open?
Each row's button has aria-expanded and aria-controls, and its name includes the winner ("Citation for Jun Watanabe"). The citation sits in a second row of the same table body. It folds to nothing and is unreachable (inert, hidden) until its button opens it, so keyboard and screen reader users never land in a closed citation. With reduced motion it opens without the height transition.
Why a plain table and not the catalog's Table?
A recognition table needs a caption, column headers with scope and a second row that spans every column. A plain table gives all of that on every base, and it is the same markup on Ark UI and on the others. The winner's cell is the row header, so a screen reader announces the winner with each cell.
What are the small marks?
Drawings, made of a few paths each in the foreground tone, and hidden from assistive technology: the category is written in text. Categories are told apart by shape and by their words, never by a metal colour, so the table looks right in every theme.