Question 1

What is a logo block?

Accepted Answer

A logo block is a pre-built, production-ready customer-logo section that you can drop into any React or Next.js landing page. Each block is a single self-contained TSX component that renders a complete social-proof layout — under-hero strips, infinite marquees, static grid walls, featured case studies, dark inset panels, filtered category grids, and more — styled with shadcn/ui and Tailwind CSS. Copy the source, swap the placeholder marks for your own SVGs, and ship a trust band in minutes instead of hours.

Question 2

Are shadcn.io logo blocks free?

Accepted Answer

Browsing the gallery, previewing every layout, and reading the code is completely free. Downloading the full source of the Pro blocks requires a shadcn.io Pro subscription — the same tier that unlocks every block in the registry. Individual, Team, and Organization licenses are available, each with monthly, yearly, and lifetime options.

Question 3

Why does every logo block use placeholder brand names instead of real logos?

Accepted Answer

Real brand SVGs and wordmarks are trademarks — shipping them inside an open-source component library is both legally risky and visually wrong when the mark is mismatched to the icon. Every block in the gallery uses invented placeholder brands (Halide, Northwind, Ion, Rookery, LaunchPad, etc.) with Lucide React icons that semantically match the name. When you copy a block, you swap the icon field for your own SVG or next/image wrapper — the layout and rhythm stay exactly the same.

Question 4

How do these logo blocks differ from a free Tailwind marquee template?

Accepted Answer

Three things. First, every block is built on shadcn/ui primitives and Tailwind theme variables (bg-card, text-foreground, bg-muted), so it drops into any existing shadcn project without CSS conflicts. Second, every marquee respects prefers-reduced-motion via an explicit CSS media query — vestibular-sensitive users get a static layout automatically. Third, the gallery covers twelve distinct archetypes (strips, marquees, grid walls, featured hubs, quote splits, metric heroes, dark insets, global maps, tab-filtered grids, bento case studies, and more) so you can pick the pattern that fits your page, not the only one the template offers.

Question 5

Which logo layout is best for under-hero social proof?

Accepted Answer

Use a minimalist strip (archetype A) when the logo block sits directly below the hero. It carries only an eyebrow line and a single row of 5–8 brand marks — no h2 headline, no CTA pair — because the hero above already owns the page headline. Adding a second headline competes with the hero for attention. The strip whispers; the hero speaks. For slightly more presence, pair the strip with a dashed top-and-bottom border to frame it as intentional chrome.

Question 6

When should I use a marquee instead of a static grid wall?

Accepted Answer

Use a marquee when you have 18+ logos and motion itself is part of the proof — the sheer density of brands sliding past suggests scale. Use a static grid wall when you have 12–16 curated logos that deserve to be scannable, keyboard-accessible, and legible without movement. Single marquees suit compact sections; dual and triple marquees (opposing directions at distinct speeds) work mid-page where you want energy. Every marquee block in the gallery includes a prefers-reduced-motion media query that disables the animation for users who prefer static content.

Question 7

When should I use a dark inset logo wall?

Accepted Answer

Use a dark inset when the surrounding page is all light and the logo section needs to feel like a deliberate break — a 'stop and read' moment between two light sections. Limit dark inset variants to roughly one per ten logo blocks so the contrast stays special. Every dark inset block uses inverted palette tiers (text-background/40 eyebrow, text-background h2, text-background/60 subtitle, text-background/60 → text-background hover promotion on logos) and a corner pill accent to prevent the bare `bg-foreground` panel from feeling empty.

Question 8

Featured focal hub vs bento case study — which should I pick?

Accepted Answer

Use a featured focal hub when one flagship partnership is the hero and the other brands are equal-weight supporting integrations — a built-on narrative. The flagship gets a dedicated card with an inverted icon, wordmark, tenure metric, and a dashed 'Integrates with' divider separating it from the supporting strip. Use a bento case study when one customer has a specific quote and metric worth highlighting alongside four supporting logos in a single asymmetric grid. Featured focal is about ecosystem; bento case study is about one specific win framed by supporting proof.

Question 9

How do I add a logo block to my Next.js project?

Accepted Answer

Open any block detail page, copy the full TSX source, and paste it into your project as a new file (e.g. `components/trusted-by.tsx`). Each block imports from `~/components/ui/*` — the standard shadcn/ui path alias — so it works immediately inside any shadcn-bootstrapped Next.js app. No CLI install, no registry configuration, no extra dependencies beyond what shadcn/ui and motion/react already give you.

Question 10

How do I replace the Lucide icon marks with my real brand logos?

Accepted Answer

Every block defines its data as a static `const LOGOS` array at the top of the file with `id`, `name`, and `icon` fields. Replace the `icon` field with your own React component or a `next/image` wrapper pointing to your SVG asset. Keep the rendered size at `size-6` (or larger) so it matches the placeholder rhythm. Swap the `name` field for your real brand name. For monogram and icon-only variants, keep the `aria-label` on the container so screen readers still announce the brand.

Question 11

How do I customize the marquee speed or disable the animation?

Accepted Answer

The SPEED constant at the top of every marquee block is a plain CSS duration string like `"45s"`. Lower values speed up the scroll; higher values calm it. All marquee blocks use hard-coded duration strings to stay hydration-safe, and every marquee includes a `@media (prefers-reduced-motion: reduce)` CSS guard that disables both the animation and the transform for users who prefer static content — so no custom JavaScript is needed to respect OS-level motion preferences.

Question 12

Are the logo blocks responsive on mobile?

Accepted Answer

Yes. Every block is mobile-first and tested from 320px upward. Grid walls collapse from 6 columns to 4 to 3 to 2 as the viewport narrows. Split layouts stack the headline above the logos on mobile. Marquees keep scrolling at the same speed but the container padding shrinks. Flex-wrap rows flow onto multiple lines without breaking the rhythm. Every interactive element (pill tabs, sidebar nav, map pins) respects a 44px minimum tap target.

Question 13

What tech stack do the shadcn.io logo blocks use?

Accepted Answer

React 19, Next.js 16 App Router, TypeScript, Tailwind CSS 4, shadcn/ui, motion/react (the modern successor to framer-motion), and Lucide React icons. Interactive blocks (tab-filtered grids, animated counters, sidebar navs) lean on `useState` + `useReducedMotion` from motion/react. Marquee blocks use hand-rolled CSS keyframes injected via `dangerouslySetInnerHTML` so each block ships its own scoped animation names without a global stylesheet. Zero runtime dependency on shadcn.io itself — once you copy a block, it belongs to your codebase.

Question 14

Do the logo blocks support dark mode?

Accepted Answer

Yes. Every block uses shadcn's semantic color tokens (`bg-background`, `text-foreground`, `bg-muted`, `border`, `text-muted-foreground`) instead of hardcoded hex values, so dark mode works automatically the moment your app's `class` or `data-theme` attribute flips. The dedicated dark-inset variants use `bg-foreground` with inverted `text-background` palette tiers for a deliberate light-on-dark treatment — these work in both light and dark modes without additional overrides.

Question 15

Are the logo blocks accessible and motion-friendly?

Accepted Answer

Every block carries a section-level `aria-label` naming the list as customer logos, uses semantic `

` for logo lists, `
`/`
` for quote splits, and `role="img"` + `aria-label` on monogram and icon-only badges where the visible text is absent. A `useReducedMotion` hook from motion/react strips entrance animations when users prefer reduced motion, and every marquee block includes a `@media (prefers-reduced-motion: reduce)` CSS guard that disables both the animation and transform. Tab-filtered grids use balanced rosters and reserved min-heights so filtering never causes layout shift.

Question 16

Can I use the logo blocks with TypeScript?

Accepted Answer

Yes — every block is written in TypeScript with explicit interfaces for the logo data shape. The types are exported alongside the component, so you can reuse them when wiring the data to your CMS, partner registry, or backend API without having to reverse-engineer the shape. Supporting variants (bento case study, featured quote split) extend the base `Logo` interface with additional fields like `quote`, `metric`, `industry`, and `featured` so rich cells stay type-safe.

React Logo Blocks for shadcn/ui

Browse every logo block

Frequently Asked Questions