Wordmark Wall
Logo clouds
Source and install need .
pnpm dlx shadcn@latest add @assembli/logo-gridLogo Grid
Hairline logo grid where a soft glow follows the pointer along the lines and the hovered cell lights up in its brand colour, lifting the logo to reveal a one-line customer result and a story link. Tap toggles a cell on touch, focus reveals it from the keyboard, and an optional resting cell keeps one result showing.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
logos*
LogoGridItem[]
eyebrow
React.ReactNode
Small line above the grid, e.g. "Trusted by product teams at".
columns
3 | 4
Default
4Columns on wide screens. Phones always get two. Use a multiple of this many logos.
linkLabel
string
Default
"Read story"Label of the story link.
defaultActive
number
Cell revealed while nothing is hovered, focused or tapped, so the grid has a resting highlight.
| Prop | Type | Default | Description |
|---|---|---|---|
| logos* | LogoGridItem[] | – | |
| eyebrow | React.ReactNode | – | Small line above the grid, e.g. "Trusted by product teams at". |
| columns | 3 | 4 | 4 | Columns on wide screens. Phones always get two. Use a multiple of this many logos. |
| linkLabel | string | "Read story" | Label of the story link. |
| defaultActive | number | – | Cell revealed while nothing is hovered, focused or tapped, so the grid has a resting highlight. |
