Shadcn.io is not affiliated with official shadcn/ui
Logos Dark Inset Compact Strip
A dark inset compact logo strip block for React and Next.js with a rounded bg-foreground panel, an inverted eyebrow label above a flex-wrap row of six monochrome logo marks, and compact vertical padding for a quiet dramatic break built with shadcn/ui and Tailwind CSS
Create a quiet dramatic break with this dark inset compact logo strip block for React and Next.js. Features a rounded-2xl bg-foreground inverted outer panel with compact px-6 py-10 to sm:px-10 sm:py-12 padding, a single inverted eyebrow line using text-background slash forty uppercase tracking-widest chrome, and a flex-wrap row of six placeholder logo marks each rendered as a size-6 Lucide icon paired with a text-sm font-semibold wordmark in text-background slash sixty that promotes to text-background on hover. No headline, no subtitle, no CTAs — just a quiet inverted strip that signals social proof without competing with surrounding hero or feature sections. Built with TypeScript, motion/react parent entrance with staggered logo cascade using useReducedMotion, Lucide React icon marks paired with six invented placeholder wordmarks, and Tailwind CSS theme variables. Perfect for under-hero trust strips on dark-panel page breaks, footer-adjacent minimalist social proof, and compact credibility moments where a full logo wall would be too loud.
Related Components
React Logos Under Hero Minimalist Strip Block
A quiet under-hero logo strip
React Logos Dark Inset Wall Block
A dark inverted logo wall panel
React Logos Dark Inset Split Headline Block
A dark inset split headline logo grid
React Logos Dark Inset Featured Focal Block
A dark inset featured focal hub
React Logos Minimalist Compact Five Logo Strip Block
A minimalist five-logo compact strip
React Logos Compact Footer Ribbon Strip Block
A compact footer ribbon logo strip
FAQ
Was this page helpful?
Sign in to leave feedback.
Dark Inset Bento Case Study
A dark inset bento featured case study logo block for React and Next.js with a rounded bg-foreground panel, a tall featured case study cell with inverted flagship mark plus quote plus metric, four content-rich supporting cells each carrying an industry pill plus retention metric, and inverted monochrome-to-color hover states built with shadcn/ui and Tailwind CSS
Dark Inset Dual Marquee
A dark inset dual row opposing marquee logo block for React and Next.js with a rounded bg-foreground inverted panel, two rows scrolling in opposite directions at 40 and 50 seconds, dark edge masks using from-foreground to transparent, and inverted logo hover states built with shadcn/ui and Tailwind CSS