Logo Departures Board

Installation

pnpm dlx shadcn@latest add @cleverui/logo-departures-board

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

Usage

tsx

import { LogoDeparturesBoard } from '@/components/blocks/logo-departures-board'

Exampletsx

import { LogoDeparturesBoard } from '@/components/blocks/logo-departures-board'

export default function LogoDeparturesBoardDemo() {
  return (
    <div className="flex min-h-[440px] items-center">
      <LogoDeparturesBoard
        className="w-full"
        cells={6}
        interval={3.5}
        logos={[
          'Harborline',
          'Fieldstone',
          'Northbeam',
          'Meridian',
          'Sable & Co.',
          'Kestrel',
          'Lumenpath',
          'Orbit Ledger',
          'Cascade Ops',
          'Vellum',
          'Pinecourt',
          'Ashlar',
        ]}
      />
    </div>
  )
}

API reference

LogoDeparturesBoard accepts the following props.

Prop	Type	Default	Description
`logos`*	`string[]`	–	8–18 company names; board shows `cells` at a time and rotates the rest
`cells`	`4 \| 6 \| 8`	`6`	visible cells; 2 cols below sm, 3 at sm, cells/2 at lg
`interval`	`number`	`4`	seconds between flips; one cell flips per interval in reading order
`eyebrow`	`string`	`'In production at'`	mono micro-label above the board; empty string hides it

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

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 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 Departures Board 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-departures-board`. 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 Departures Board require?

Logo Departures Board 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 Departures Board 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