# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/feature274. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Feature](/blocks/feature)
5. /
6. Archive By Year Columns

# Archive By Year Columns[PRO](/pricing)

One column per year on a hairline, each stating the year as a figure with its published count beside it, a sentence on what that year was about, and the pieces that defined it.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/feature274`

## Feature274: Archive By Year Columns

One column per year on a hairline, each stating the year as a figure with its published count beside it, a sentence on what that year was about, and the pieces that defined it.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/feature274?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/feature274?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

This installs the block to `components/beste/block/feature274.tsx` and the `badge6` component it uses for the eyebrow (installed to `components/beste/component/badge6.tsx`).

### Quick start

The installed file exports `feature274Demo` alongside the block: the exact props behind the preview above. Spread it to get a working year index in one line.

tsxCopy

```
import { Feature274, feature274Demo } from "@/components/beste/block/feature274";

export default function ArchivePage() {
  return <Feature274 {...feature274Demo} />;
}
```

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsxCopy

```
import { Feature274 } from "@/components/beste/block/feature274";

export default function ArchivePage() {
  return (
    <Feature274
      eyebrow="The archive"
      heading="Four years, read backwards"
      countLabel="pieces"
      years={[
        {
          year: "2026",
          count: "18",
          summary: "The year we published our prices.",
          posts: [
            { title: "The estimate is design work", href: "/essays/estimate" },
            { title: "The quote we lost on purpose", href: "/letters/042" },
          ],
        },
      ]}
    />
  );
}
```

### Props

| Prop       | Type           | Default | Description                                 |
| ---------- | -------------- | ------- | ------------------------------------------- |
| eyebrow    | string         | –       | Badge6 label above the hairline rule        |
| heading    | string         | –       | Section heading under the rule              |
| countLabel | string         | –       | Noun after each year's count, e.g. "pieces" |
| years      | YearColumn\[\] | \[\]    | One column per year, newest first           |
| className  | string         | –       | Extra classes for the outer section         |

tsCopy

```
type YearColumn = {
  year: string;
  count: string;
  summary: string;
  posts: YearPost[];
};

type YearPost = {
  title: string;
  href: string;
};
```

### Behavior notes

* `year` and `count` are strings, not numbers, so a column can read "2023" or "Before 2023" without the block trying to do arithmetic on it.
* Both carry `tabular-nums`, which keeps the figures aligned across columns even in a proportional typeface.
* Order comes from the array. The block does not sort, so a newest-first archive is a newest-first array.
* Columns are two across at `md` and four at `lg`, each on its own hairline, so a year with one post does not stretch to match its neighbour.

## More Feature blocks

[View all Feature](/blocks/feature)

[](/block/feature34)

FREE

feature34

### Numbered Reasons List

Two-column grid of numbered items (01, 02, etc.) with circular badges, titles, and descriptions. Perfect for why-choose-us sections, benefits lists, or key differentiators.

[](/block/feature162)

PRO

feature162

### Numbered Steps Grid

3-column grid of numbered steps with titles and descriptions. Ideal for onboarding flows, process overviews, and how-it-works sections.

[](/block/feature254)

PRO

feature254

### Photographic Year Ledger

Timeline where every ruled row lines up a year, a photograph from that moment and the explanation of what forced the change, headed by a pill CTA on the heading line and stacking to a readable block on mobile.

[](/block/feature233)

PRO

feature233

### Compact two-column icon feature list

A header with a badge, heading, and description, followed by many compact items in a two-column grid — each a lucide icon in a rounded bg-muted tile beside a title and one-line description.

[](/block/feature270)

PRO

feature270

### Reading Paths By Time Available

Three columns keyed to how long the reader has rather than what they want, each opening with the time span, a promise for it, and the two or three pieces that fit inside it.

[](/block/feature200)

PRO

feature200

### Feature with Two-Column Checklist and Image

Two-column feature section with badge, heading, description, a 2-column checklist of icon items (defaults to check icon), and CTA on one side, with a square image on the other. Image position is configurable.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.