Logo Sector Filter

Installation

pnpm dlx shadcn@latest add @cleverui/logo-sector-filter

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

Usage

tsx

import { LogoSectorFilter } from '@/components/blocks/logo-sector-filter'

Exampletsx

import { LogoSectorFilter } from '@/components/blocks/logo-sector-filter'

export default function LogoSectorFilterDemo() {
  return (
    <div className="flex min-h-[580px] items-center">
      <LogoSectorFilter
        heading="Trusted across the stack operators actually run."
        columns={4}
        logos={[
          { name: 'Harborline', sector: 'Fintech' },
          { name: 'Fieldstone', sector: 'Insurance' },
          { name: 'Northbeam', sector: 'SaaS' },
          { name: 'Meridian', sector: 'Fintech' },
          { name: 'Sable & Co.', sector: 'Logistics' },
          { name: 'Kestrel', sector: 'SaaS' },
          { name: 'Lumenpath', sector: 'Healthcare' },
          { name: 'Orbit Ledger', sector: 'Fintech' },
          { name: 'Cascade Ops', sector: 'Logistics' },
          { name: 'Vellum', sector: 'Healthcare' },
          { name: 'Pinecourt', sector: 'Insurance' },
          { name: 'Ashlar', sector: 'SaaS' },
        ]}
      />
    </div>
  )
}

API reference

LogoSectorFilter accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	–	optional section heading above the chips
`eyebrow`	`string`	`'Customers'`	mono micro-label above the wall; accent stays on the active chip
`logos`*	`LogoSectorFilterLogo[]`	–	8–16 companies; sector chips derive from first-seen order
`columns`	`3 \| 4 \| 5`	`4`	wordmark cells per row at md and up; 2 below
`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 LogoSectorFilterLogo {
  name: string
  sector: string
}

Related components

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 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 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 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 Sector Filter 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-sector-filter`. 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 Sector Filter require?

Logo Sector Filter 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 Sector Filter 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