Logo Prose Inline

Installation

pnpm dlx shadcn@latest add @cleverui/logo-prose-inline

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

Usage

tsx

import { LogoProseInline } from '@/components/blocks/logo-prose-inline'

Exampletsx

import { LogoProseInline } from '@/components/blocks/logo-prose-inline'

export default function LogoProseInlineDemo() {
  return (
    <div className="flex min-h-[360px] items-center">
      <LogoProseInline
        lead="Engineering teams at"
        logos={['Harborline', 'Fieldstone', 'Northbeam', 'Meridian', 'Kestrel']}
        trail="ship operator-facing changelogs every week."
        cta={{ label: 'Read the case studies', href: '#cases' }}
      />
    </div>
  )
}

API reference

LogoProseInline accepts the following props.

Prop	Type	Default	Description
`lead`	`string`	`'Engineering teams at'`	clause opening the sentence, before the wordmark list
`logos`*	`string[]`	–	3–6 company names drawn as inline typographic wordmarks
`trail`*	`string`	–	clause completing the sentence after the wordmarks
`cta`	`{ label: string; href: string }`	–	optional trailing text anchor
`align`	`'center' \| 'start'`	`'center'`	paragraph alignment within the max-w-3xl measure

…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 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 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 Prose Inline 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-prose-inline`. 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 Prose Inline require?

Logo Prose Inline 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 Prose Inline 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