Shadcn Logo Cloud Block Nine
Shadcn Logo Cloud Block Nine gives the logo cloud a framed surface. The source opens with a centered demo proof sentence, then places eight logos inside a bordered horizontal band with a subtle grid background.
The visual structure is more polished than a plain strip. The outer section uses border-y, the inner grid uses gap-px with a low-contrast foreground background, and each cell has a rounded bg-background/95 surface that changes on hover. Extra absolute side rails add a faint vertical frame around the content.
Framed logo grid
This block fits landing pages where social proof needs to feel connected to the design system. The two-column mobile grid becomes four columns at the small breakpoint, and each cell holds a fixed-height logo area so the row stays even.
The source imports local SVG components for demo logos including Hulu, Spotify, Supabase, Beacon, Vercel, Stripe, OpenAI, and Cloudflare. Those marks should be replaced with approved brands or integrations; the demo sentence should be rewritten so it does not imply unsupported customer relationships.
Tailwind details
The component is server-renderable React with Tailwind CSS utilities and no animation state. **:fill-foreground normalizes logo color, while *:transition-colors and *:duration-200 create the hover feedback. If your real logos need brand colors, remove or narrow the forced fill selector.
Use this shadcn UI blocks variant when the logo cloud is meant to sit between large sections and visually anchor the page, especially on SaaS pages with bordered cards or grid-based surfaces nearby.
Related Shadcn UI blocks
Start from Tailark
Build with Tailark Pro
Tailark Pro brings together essential marketing pages, blocks, and illustrations — designed to help you launch faster without compromising design.
Get AccessLearn More