Sponsor Tier Wall

Installation

pnpm dlx shadcn@latest add @cleverui/sponsor-tier-wall

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

Usage

tsx

import { SponsorTierWall } from '@/components/blocks/sponsor-tier-wall'

Exampletsx

import { SponsorTierWall } from '@/components/blocks/sponsor-tier-wall'

export default function SponsorTierWallDemo() {
  return (
    <div className="mx-auto w-full">
      <SponsorTierWall
        eyebrow="FESTIVAL 2026 PARTNERS"
        heading="Sponsors"
        ctaLabel="Become a sponsor"
        ctaHref="#sponsor"
        tiers={[
          {
            label: 'Headline',
            sponsors: [
              { name: 'Northline' },
              { name: 'Harbour Works' },
            ],
          },
          {
            label: 'Partner',
            sponsors: [
              { name: 'Clearseat' },
              { name: 'Stagecraft' },
              { name: 'Fieldstone' },
              { name: 'Meridian' },
              { name: 'Audio Guild' },
              { name: 'Civic Stage' },
            ],
          },
          {
            label: 'Community',
            sponsors: [
              { name: 'Paper Press' },
              { name: 'Low Tide' },
              { name: 'Copper Static' },
              { name: 'Vellum Co' },
              { name: 'Iris Supply' },
              { name: 'Second Harbour' },
              { name: 'Kite Protocol' },
              { name: 'Marrow Wire' },
              { name: 'Glass Parish' },
              { name: 'Atlas Print' },
              { name: 'Sable Coast' },
              { name: 'Echo North' },
            ],
          },
        ]}
      />
    </div>
  )
}

API reference

SponsorTierWall accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Sponsors'`	–
`eyebrow`	`string`	–	dated mono kicker, preformatted, never derived from Date
`tiers`*	`SponsorTier[]`	–	2–3 tiers ordered by rank
`ctaLabel`	`string`	–	quiet become-a-sponsor text link when provided
`ctaHref`	`string`	`'#'`	–

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

Referenced types

Typestsx

export interface SponsorTier {
  /** rank label, e.g. 'Headline' / 'Partner' / 'Community' */
  label: string
  sponsors: SponsorMark[]
}

export interface SponsorMark {
  name: string
  /** optional custom mark, never external image URLs; omit to draw a text wordmark */
  mark?: React.ReactNode
}

Related components

Event Countdown Hero

The event's own countdown hero, oversized date numerals, a mono venue line, poster-scale rolling countdown digits, and one ticket CTA. Doors open in exactly this long.

Event Lineup Board

A poster-type lineup board, acts in oversized weight-contrast rows, stage and time in mono, day tabs with real tablist semantics. The bill is the artwork.

Event Past Editions

Past editions as a typographic reel, years set huge, cities in mono, one headline moment and attendance per row. A React and Tailwind pedigree block for event sites.

Event Ticket Tiers

GA and VIP tickets as perforated stub cards, mono serials, tabular prices, and an honest sold-out state. Box-office paper, not SaaS pricing chrome.

Speaker Spotlight Row

Headline speakers as poster rows, names set huge, talk titles in italic, companies in mono, and a day-stage chip per row. The speaker bill is the artwork.

Agenda Day Picker

Day pills over a single-track agenda, pick a day, read its sessions down a mono time rail. One room, one running order, real tablist semantics.

Frequently asked questions

How do I install the Sponsor Tier Wall component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/sponsor-tier-wall`. 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 Sponsor Tier Wall require?

Sponsor Tier Wall 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 Sponsor Tier Wall 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