# Awards 1 - Awards table with linked rows

> A section with a large heading and a full-width table of award name, description, and year, with each name linked externally.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/awards1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/awards1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/awards1-light-8639d1f1a23763f6.png
- Registry item: https://shadcnblocks.com/r/awards1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/awards1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `cn`

## Files

### `block/awards1/awards1.tsx`

```tsx
import React from "react";
import { cn } from "cn";

interface Awards1Props {
  className?: string;
}

const Awards1 = ({ className }: Awards1Props) => {
  const awards = [
    {
      name: "CSS Design Awards Winner",
      description: "Recognized for excellence in web design and functionality.",
      year: "2024",
      url: "#",
    },
    {
      name: "Awwwards Site of the Day",
      description:
        "Featured for outstanding creativity and innovation in web development.",
      year: "2023",
      url: "#",
    },
    {
      name: "Shadcnblocks UI Blocks",
      description:
        "Awarded for exceptional user experience and interface design.",
      year: "2023",
      url: "https://www.shadcnblocks.com",
    },
    {
      name: "Web Design Excellence",
      description:
        "Honored for superior design quality and technical implementation.",
      year: "2022",
      url: "#",
    },
  ];

  return (
    <section className={cn("py-32", className)}>
      <div className="container space-y-10 lg:space-y-12">
        <h1 className="max-w-md text-5xl tracking-tighter lg:text-7xl">
          Awards
        </h1>
        <table className="w-full border-collapse">
          <thead>
            <tr className="h-12 border-b text-left text-sm text-foreground/80">
              <th className="font-semibold">Award</th>
              <th className="font-semibold">Description</th>
              <th className="text-right font-semibold">Year</th>
            </tr>
          </thead>
          <tbody>
            {awards.map((award, index) => (
              <tr
                key={index}
                className="h-20 border-b text-left text-sm text-foreground/40"
              >
                <td className="text-lg font-light tracking-tight text-foreground lg:text-xl">
                  <a
                    href={award.url}
                    target="_blank"
                    className="hover:underline"
                    title={award.name}
                  >
                    {award.name}
                  </a>
                </td>
                <td>{award.description}</td>
                <td className="text-right text-foreground">{award.year}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
};

export { Awards1 };
```