Selected Work Index

Installation

pnpm dlx shadcn@latest add @cleverui/selected-work-index

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { SelectedWorkIndex } from '@/components/blocks/selected-work-index'

Exampletsx

'use client'

import { SelectedWorkIndex } from '@/components/blocks/selected-work-index'

export default function SelectedWorkIndexDemo() {
  return (
    <SelectedWorkIndex
      eyebrow="Selected work"
      heading="Work"
      intro="Eight engagements we would sign again."
      projects={[
        {
          title: 'Alpine Bank',
          client: 'Alpine Bank',
          sector: 'Finance',
          year: '2026',
          result: '+212% organic sessions',
          href: '#alpine-bank',
        },
        {
          title: 'Northline Freight',
          client: 'Northline',
          sector: 'Logistics',
          year: '2025',
          result: '$4.8M raised',
          href: '#northline',
        },
        {
          title: 'Hearth Kitchen',
          client: 'Hearth Co.',
          sector: 'Hospitality',
          year: '2025',
          result: '3× online orders',
          href: '#hearth',
        },
        {
          title: 'Cobalt Labs',
          client: 'Cobalt',
          sector: 'SaaS',
          year: '2024',
          result: '41% trial-to-paid',
          href: '#cobalt',
        },
        {
          title: 'Field & Co.',
          client: 'Field & Co.',
          sector: 'Retail',
          year: '2024',
          result: '2.1s LCP',
        },
        {
          title: 'Meridian Health',
          client: 'Meridian',
          sector: 'Health',
          year: '2023',
          result: '18 clinics onboarded',
          href: '#meridian',
        },
      ]}
      viewAllHref="#work"
      viewAllLabel="All work"
    />
  )
}

API reference

SelectedWorkIndex accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Selected work'`	quiet spaced sans, never mono in this register
`heading`	`string`	`'Work'`	–
`intro`	`string`	–	one self-assured sentence
`projects`*	`WorkProject[]`	–	4–7 rows
`viewAllHref`	`string`	–	–
`viewAllLabel`	`string`	`'All work'`	–

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface WorkProject {
  title: string
  client?: string
  sector: string
  /** PREFORMATTED, e.g. '2026' */
  year: string
  /** PREFORMATTED, e.g. '+212% organic sessions' */
  result: string
  href?: string
}

Related components

Case Study Spread

A one-engagement case study spread, the client name in display type beside counted result metrics, scope receipts and an attributed quote. React and Tailwind, work-first.

Capability Matrix

An agency capability matrix, a seamed hairline grid of disciplines with plain summaries, deliverable receipts and a preformatted proof stat each. A React block themed with Tailwind.

Studio Process Reveal

A studio process rail, oversized phase numerals reveal along a drawn hairline with a duration and deliverable per phase. An editorial React and Tailwind block where motion is the pitch.

Editorial Index Hero

A magazine-cover hero, oversized masthead type beside a numbered index of destinations, each row a drawn hairline that extends on hover. Navigation as the artwork.

Agency Studio Template

A portfolio index for a design studio: display-type statement hero, oversized case rows with hover and tap preview plates, capability accordion, results strip, recognition ledger, brief form.

Project Showcase Grid

Student work in a celebration grid, project titles, one-line briefs, tools chips, and a mono cohort tag over structural placeholder panels. Proof that students actually ship.

Frequently asked questions

How do I install the Selected Work Index component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/selected-work-index`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Selected Work Index require?

Selected Work Index uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Selected Work Index to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code