Sections
Customer logo strip
A row of customer logos, with a text fallback.
Installation
npx shadcn@latest add http://localhost:3000/r/logo-strip.jsonMKT UI is not published yet, so this points at your local development server. Set NEXT_PUBLIC_REGISTRY_URL to the deployed origin to show the public command.
Also installs: container, section.
Usage
import { LogoStrip } from "@/components/logo-strip";
<LogoStrip
title="Trusted by 200+ local businesses"
logos={[
{ name: "Basin & Bloom", src: "/logos/basin.svg", href: "/work/basin" },
{ name: "Loop Coffee", src: "/logos/loop.svg" },
{ name: "Wren Dental" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logos (required) | LogoItem[] | — | Each needs a `name`. `src` and `href` are optional. |
| title | ReactNode | — | Short line above the logos. |
| variant | "row" | "grid" | "row" | `row` wraps on one flowing line; `grid` gives every logo an equal cell. |
| fullColor | boolean | false | Render logos in their own colours instead of muted monochrome. |
| surface | "default" | "muted" | "brand" | "inverted" | "default" | Background treatment. |
| spacing | "compact" | "default" | "spacious" | "none" | "compact" | Vertical rhythm. |
Behaviour
A logo without a src renders as a text wordmark. This is the common case for a
local business, whose customers rarely have a logo file to hand. It keeps the section
usable rather than forcing you to find or fake twelve SVGs.
Logos are muted by default. Twelve competing brand colours out-shout the page they
are meant to support. Set fullColor when the logos themselves are the point, such as
on a partners page.
name is always the alt text, so a logo that fails to load still says who it is.
Limitations
- No category grouping yet.
- No marquee or auto-scroll, deliberately: it moves content away from a reader who is still reading it and needs a pause control to be accessible at all.