Logo Row

A contrast-safe muted logo/wordmark strip that restores to foreground on linked-item hover.

Built with

ACME
NIMBUS
COREBASE
LATTICE
OUTPOST

Install

Add Logo Row from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.

pnpm dlx shadcn@latest add @vegastack/logo-row

Usage

import { LogoRow } from "@/components/ui/logo-row";

<LogoRow
  label="Built with"
  items={[{ name: "ACME" }, { name: "NIMBUS" }, { name: "COREBASE" }]}
/>;

Examples

Built with

ACME
NIMBUS
COREBASE
LATTICE
OUTPOST

Linked items

Pass href on an item to render it as a link, restoring to foreground on hover and focus.

LogoRow renders wordmarks as plain text, never image/SVG logo assets — and never real third-party brand names, since that would imply an unverified partnership. Use generic or placeholder names on marketing pages until real, cleared logos exist.

Wall variant

variant="wall" lays the wordmarks out as a hairline-cell grid — the cell borders form the grid, no gaps. wallColumns (2, 3, or 4) is the MAXIMUM number of columns: the track is auto-fill over an 8rem cell floor, so the wall drops to fewer columns by itself when the row is narrow rather than squeezing four 80px cells onto a 320px screen. The seams are logical (border-s), so an RTL page keeps its inner rules instead of doubling the outer edge.

Marks rest in text-muted-foreground and lift to text-foreground on hover, with no underline — a wall of underlined text reads as a paragraph of links rather than as marks.

PARALLEL
TURBOPUFFER
TASKRABBIT
GRANOLA
MODAL
RAILWAY

API Reference

Prop	Type	Default	Description
`items`*	`LogoRowItem[]`	—	The wordmarks to render. Intentionally TEXT-only — no image/SVG logo assets, and never real third-party brand names (they'd imply an unverified partnership). Use generic/placeholder names on marketing pages until real, cleared logos exist.
`label`	`React.ReactNode`	—	Small mono uppercase caption above the row (e.g. `"Trusted by"`).
`variant`	`"row" \| "wall"`	`'row'`	Layout. `row` is the inline wordmark strip; `wall` (Wave 4 — the teardown's logo-wall) is a hairline-CELL grid: the borders form the grid, no gaps.
`wallColumns`	`2 \| 3 \| 4`	`3`	The MAXIMUM number of columns the `wall` variant will fit. The grid is `auto-fill` over a minimum cell width, so it drops to fewer columns on its own when the row is too narrow — a 4-column wall at 320px would otherwise give 80px cells and clip every wordmark. Follows the ROW's own width (a container-relative `min()`), so a wall inside a sidebar or a split pane reflows correctly too, not just at viewport breakpoints.

Data attributes and CSS variables on LogoRow

Attribute	Values
`data-slot`	`"logo-row" \| "logo-row-item" \| "logo-row-label" \| "logo-row-list"`
`data-variant`	mirrors a prop or state value

Accessibility

Linked items render real <a> elements with visible, readable text — no icon-only logos to label.
The optional label is a normal text node, read in document order before the list.

Contract	States tested
Behaviour	`default`
Accessibility	`semantic-html`
Visual	`default`, `hover`

Do / Don't

Use generic or fictional wordmarks (ACME, NIMBUS, …) until real, cleared partner logos exist.

Don't

Use a real company's name or logo without their explicit clearance — it implies a partnership.