Selected Work IndexPRO

Portfolio118: Selected Work Index

A picture-free work index laid out as four aligned columns, year, client, what was done and the discipline, with the column heads appearing only once the row can hold them.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

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

Base UI flavor

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

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

Quick start

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

import { Portfolio118, portfolio118Demo } from "@/components/beste/block/portfolio118";

export default function WorkPage() {
  return <Portfolio118 {...portfolio118Demo} />;
}

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

import { Portfolio118 } from "@/components/beste/block/portfolio118";

export default function WorkPage() {
  return (
    <Portfolio118
      eyebrow="Selected work"
      heading="Everything worth showing, in one list"
      columns={{ year: "Year", client: "Client", work: "What we did", discipline: "Discipline" }}
      items={[
        {
          year: "2026",
          client: "Northwind",
          work: "A brand that survived a merger",
          discipline: "Brand",
          href: "/work/northwind",
        },
      ]}
      note="Work under agreement is not listed."
    />
  );
}

Props

type WorkRow = {
  year: string;
  client: string;
  work: string;
  discipline: string;
  href: string;
};

Behavior notes

• The column heads are hidden md:grid. On a phone the four values stack, where a row of heads above a stack would label nothing.
• Rows and heads share the same 5rem 10rem 1fr 8rem track, which is what keeps the values under their labels rather than approximately near them.
• The client name is the anchor of the row and the description is what moves to the accent colour on hover, so the eye follows the work rather than the logo.
• Years carry tabular-nums, so the left column stays straight in a proportional typeface.
• The block shows no images at all, which is what lets twenty projects sit on one screen.