Staaarter

Awards List

A ruled, editorial-style list of studio awards, each row pairing the year with the project name and the specific recognition earned. Reads as a clean table without an actual `<table>` element.

By Staaarter Team
Agency
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/awards-list.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/agency/agency15.tsx instead.

Usage

The file also exports agency15Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Agency15, agency15Demo } from "@/components/blocks/agency/agency15";

export default function Page() {
  return <Agency15 {...agency15Demo} />;
}

Props

PropTypeDefaultDescription
headingReactNodenoneSection heading above the list.
descriptionstringundefinedSupporting text under the heading.
awardsAwardItem[]noneAward rows rendered in array order (typically most recent first).
classNamestringnoneExtra classes for the outer section element.

Types

type AwardItem = {
  year: string;
  project: string;
  recognition: string;
};

Behavior notes

  • Fully static server component; the list order is exactly the order of the `awards` array, there is no client-side sorting by year.
  • Rows are laid out with a 3-column CSS grid (`grid-cols-[auto_1fr_auto]`), not a real `<table>`, so the visual alignment is purely presentational and not semantic tabular markup.