Logo Case Index

Installation

pnpm dlx shadcn@latest add @cleverui/logo-case-index

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

Usage

tsx

import { LogoCaseIndex } from '@/components/blocks/logo-case-index'

Exampletsx

import { LogoCaseIndex } from '@/components/blocks/logo-case-index'

export default function LogoCaseIndexDemo() {
  return (
    <div className="flex min-h-[520px] items-center">
      <LogoCaseIndex
        heading="Results operators can audit."
        entries={[
          {
            name: 'Harborline',
            outcome: 'Cut onboarding from nine days to four hours',
            metric: '−62%',
            href: '#case-harborline',
          },
          {
            name: 'Fieldstone',
            outcome: 'Raised first-pass underwriting accuracy',
            metric: '4.2×',
            href: '#case-fieldstone',
          },
          {
            name: 'Northbeam',
            outcome: 'Collapsed weekly ops reviews into a live ledger',
            metric: '11 hrs',
          },
          {
            name: 'Meridian',
            outcome: 'Shipped audit-ready changelogs without a PM layer',
            metric: '3.1×',
            href: '#case-meridian',
          },
          {
            name: 'Sable & Co.',
            outcome: 'Replaced three dashboards with one operator view',
            metric: '−38%',
            href: '#case-sable',
          },
          {
            name: 'Kestrel',
            outcome: 'Dropped median incident time-to-resolve',
            metric: '19 min',
          },
        ]}
      />
    </div>
  )
}

API reference

LogoCaseIndex accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	–	optional section heading above the index
`eyebrow`	`string`	`'Proof'`	mono micro-label above the index, preceded by the primary tick
`entries`*	`LogoCaseIndexEntry[]`	–	4–8 rows; name is a typographic wordmark; outcome is a short clause; metric is preformatted
`headingLevel`	`2 \| 3`	`2`	–

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

Referenced types

Typestsx

export interface LogoCaseIndexEntry {
  name: string
  outcome: string
  metric?: string
  href?: string
}

Related components

Logo Departures Board

Split-flap React logo board, a fixed Tailwind grid of typographic wordmarks where one cell flips at a time in reading order, rotating more brands than cells.

Logo Proof Wall

Static categorized logo wall, 'Backed by' and 'Works with' groups under mono labels and hairline rules, grayscale wordmarks with every company name in the accessibility tree.

Logo Prose Inline

React social-proof paragraph with customer wordmarks set inline in the sentence, a Tailwind typographic lockup where every brand is real, readable text.

Logo Sector Filter

Interactive React logo wall with sector filter chips, picking an industry spotlights matching Tailwind wordmarks in place while the rest recede, never reflowing.

Logo Stat Strip

One hairline instrument band interleaving grayscale wordmarks with two counting proof stats, logos as the nouns, tabular numerals as the numbers, seam-divided.

Logo Marquee

Single-row logo strip on a pure-CSS loop, wordmarks sit grayscale and dimmed until hover restores them, with edge fade masks and an honest sr-only roster of company names.

Frequently asked questions

How do I install the Logo Case 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/logo-case-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 Logo Case Index require?

Logo Case 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 Logo Case 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