registry
@automindzsheets 01–77shadcn 4.x
SHEET 27

Logo Wall

block / marketing

A logo band in three layouts — row, grid or marquee — where each mark degrades from supplied image to inline path to typeset wordmark, and the set's label states the claim it is making.

type
block
files
2
registry deps
@automindz/motion-primitives, @automindz/render-link
npm deps
none

installs

  • lib/automindz/logos.ts
  • components/automindz/logo-wall.tsx
  • src falls back to inline path, wordmark, then name.
  • Emphasis via opacity and colour, never a filter.
  • Three logos and eleven both stay balanced.

Logos are data in lib/automindz/logos.ts. The default BUILT_WITH set is technologies, drawn as inline single-path Simple Icons geometry (CC0) filled with currentColor. A LogoSet carries its own label, which becomes the eyebrow: swap in client logos and change "Built with" too, since "Trusted by" is a claim about customers. Artwork degrades src → svgPath → wordmark → name. layout="marquee" needs styles/automindz-motion.css imported once.

Variations

one state per section

01

Built with, the shipped default

The default set: our mark, then seven real technology marks drawn from single Simple Icons paths and filled with currentColor, so they take the wall's colour instead of fighting it. The eyebrow comes from the set's own label.

fluid

Built with

  • AutoMindz Solutions
  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Node.js
  • Stripe
  • Vercel
02

Eleven marks, four across

Swap the set and the label moves with it. Eleven into a four-across grid leaves three centred on the last line, and Google Cloud Platform wraps rather than truncating. The label is Integrations, not Trusted by: the marks are real either way, but only the client can claim a company as a customer.

fluid

Integrations

What it plugs into

  • Slack
  • GitHub
  • Google
  • Google Cloud Platform
  • Notion
  • Linear
  • Figma
  • Sentry
  • Cloudflare
  • Twilio
  • Supabase
03

Three logos

The balance case at the other end. Three marks in the row layout stay a deliberate centred group; nothing stretches to fill the frame or leaves a gap where the other eight would be.

fluid

Core integrations

  • Slack
  • GitHub
  • Google
04

Marquee

Composes Marquee from @automindz/motion-primitives, which needs styles/automindz-motion.css imported once. It pauses on hover, and under prefers-reduced-motion it stops and becomes a row you scroll.

fluid

Built with

  • AutoMindz Solutions
  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Node.js
  • Stripe
  • Vercel
06

Image marks, two failed

One real file loads. The Next.js and React entries point at paths that do not exist and fall back to their inline geometry; Sable Grid has no geometry and falls back to its wordmark. Nothing renders a broken-image glyph and the row keeps its rhythm.

fluid

Mark artwork supplied

  • AutoMindz Solutions
  • Next.js
  • React
  • Sable Grid