Skip to main content
Clever Ops

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.

Preview & code

Loading Agency Studio Template preview

Installation

pnpm dlx shadcn@latest add @cleverui/template-agency-studio

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

Usage

tsx
import { TemplateAgencyStudio } from '@/components/blocks/template-agency-studio'
Exampletsx
import { TemplateAgencyStudio } from '@/components/blocks/template-agency-studio'

export default function TemplateAgencyStudioDemo() {
  return <TemplateAgencyStudio />
}

API reference

TemplateAgencyStudio accepts the following props.

PropTypeDefaultDescription
contentAgencyStudioContentdefaultContentoverride any slice of the page, defaults to the Halftone fixture above
classNamestring

Referenced types

Typestsx
export interface AgencyStudioContent {
  /** identity, nav mark, wordmark tag */
  brand: { name: string; tag: string; homeHref: string }
  nav: { links: IndexLink[]; cta: IndexLink }
  /** the statement of practice, then the index begins */
  hero: {
    eyebrow: string
    estNote: string
    /** one sentence, set as display lines; a primary full stop closes it */
    statement: string[]
    lede: string
    indexTitle: string
    indexEntries: IndexEntry[]
    cueNote: string
    cue: string
  }
  /** 01, the signature index: case rows with a structural preview plate */
  work: {
    folio: string
    title: string
    lede: string
    cases: IndexCase[]
    caseLinkLabel: string
    footnote: string
  }
  /** 02, short manifesto, team count, cities */
  studio: {
    folio: string
    title: string
    manifesto: string[]
    pullQuote: string
    pullQuoteNote: string
    teamCount: { value: string; label: string }
    citiesLabel: string
    cities: StudioCity[]
    facts: StudioFact[]
  }
  /** 03, disciplines as an accordion of what each delivers */
  capabilities: {
    folio: string
    title: string
    lede: string
    deliversLabel: string
    items: Capability[]
    note: string
  }
  /** 04, client outcomes, big numbers, sector labels */
  results: {
    folio: string
    title: string
    items: ResultItem[]
    footnote: string
  }
  /** 05, awards and press as a quiet ledger */
  recognition: {
    folio: string
    title: string
    lede: string
    items: RecognitionItem[]
  }
  /** 06, the closer: a working brief form with confirmation */
  brief: {
    folio: string
    title: string
    lede: string
    form: {
      nameLabel: string
      namePlaceholder: string
      companyLabel: string
      companyPlaceholder: string
      budgetLabel: string
      budgetHint: string
      budgets: string[]
      noteLabel: string
      notePlaceholder: string
      buttonLabel: string
    }
    confirmation: { stamp: string; body: string }
    note: string
  }
  footer: {
    tagline: string
    columns: { label: string; links: IndexLink[] }[]
    contact: { label: string; value: string; href: string }[]
    roomsLabel: string
    rooms: { city: string; detail: string }[]
    legal: IndexLink[]
    meta: string[]
  }
}

export interface IndexLink {
  label: string
  href: string
}

export interface IndexEntry {
  /** PREFORMATTED folio, e.g. '01' */
  folio: string
  label: string
  href: string
}

export interface IndexCase {
  client: string
  sector: string
  /** PREFORMATTED mono year, e.g. '2025' */
  year: string
  /** one-line outcome, carries a real number */
  outcome: string
  /** what the engagement covered, one line */
  scope: string
  /** plate caption inside the preview frame, e.g. 'FIG. 01 · ONBOARDING FLOW' */
  plateCaption: string
  href: string
}

export interface StudioCity {
  city: string
  /** mono detail line, e.g. 'COLLINGWOOD · 7 OF 9' */
  detail: string
}

export interface StudioFact {
  label: string
  value: string
}

export interface Capability {
  name: string
  /** what the discipline actually is, two plain sentences */
  summary: string
  /** what it delivers, shown when the row opens */
  delivers: string[]
  /** PREFORMATTED proof figure, e.g. '31' or '0.9s' */
  stat: string
  statLabel: string
}

export interface ResultItem {
  /** PREFORMATTED headline figure, e.g. '+41%' */
  value: string
  label: string
  /** mono sector line, e.g. 'FINTECH · COPPERLINE' */
  sector: string
  /** at most one across the strip, earns the accent keyline */
  lead?: boolean
}

export interface RecognitionItem {
  /** PREFORMATTED mono year */
  year: string
  title: string
  project: string
  source: string
}

Frequently asked questions

How do I install the Agency Studio Template component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/template-agency-studio`. 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 Agency Studio Template require?

Agency Studio Template uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Agency Studio Template 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.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services