Logo Stat Strip

Installation

pnpm dlx shadcn@latest add @cleverui/logo-stat-strip

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

Usage

tsx

import { LogoStatStrip } from '@/components/blocks/logo-stat-strip'

Exampletsx

import { LogoStatStrip } from '@/components/blocks/logo-stat-strip'

export default function LogoStatStripDemo() {
  return (
    <div className="flex min-h-[360px] items-center py-8">
      <LogoStatStrip
        eyebrow="Trusted in production"
        logos={[
          { name: 'Fieldline' },
          { name: 'Corridor' },
          { name: 'Northgate' },
          { name: 'Arbor Labs' },
          { name: 'Harborstack' },
        ]}
        stats={[
          { value: 2.4, label: 'Documents processed', suffix: 'M+', decimals: 1 },
          { value: 99.97, label: 'Uptime this quarter', suffix: '%', decimals: 2 },
        ]}
        duration={1.2}
      />
    </div>
  )
}

API reference

LogoStatStrip accepts the following props.

Prop	Type	Default	Description
`logos`*	`LogoStatStripLogo[]`	–	4–6 companies; when mark is omitted a styled text wordmark is drawn from name
`stats`*	`LogoStatStripStat[]`	–	exactly 2 entries; value is the final number, prefix/suffix wrap it
`eyebrow`	`string`	`'Trusted in production'`	mono micro-label above the band; empty string hides it
`duration`	`number`	`1.2`	seconds for the count-up sweep

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

Referenced types

Typestsx

export interface LogoStatStripLogo {
  name: string
  mark?: React.ReactNode
}

export interface LogoStatStripStat {
  value: number
  label: string
  prefix?: string
  suffix?: string
  decimals?: number
}

Related components

Logo Case Index

React logo cloud as an index ledger, each Tailwind-styled wordmark row pairs a customer with a one-line outcome and a tabular metric, optionally case-linked.

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.

Auction Results Strip

Last weekend's auction results as a ruled band, a clearance rate counting up once, then sold and passed-in rows with addresses leading and prices set in tabular figures.

Frequently asked questions

How do I install the Logo Stat Strip 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-stat-strip`. 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 Stat Strip require?

Logo Stat Strip 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 Logo Stat Strip 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