Shadcn.io is not affiliated with official shadcn/ui
Logos Dark Inset Split Headline
A dark inset split headline logo block for React and Next.js with a rounded bg-foreground panel, an inverted left-aligned headline cluster plus ShadcnioButton primary and ghost CTAs, and a six-cell bordered logo grid on the right built with shadcn/ui and Tailwind CSS
Pair an inverted headline cluster with a six-cell logo grid inside a dramatic dark panel with this dark inset split headline logo block for React and Next.js. Features a rounded-2xl bg-foreground inverted outer panel, a left column with an inverted eyebrow plus text-3xl to text-5xl h2 plus subtitle using text-background opacity tiers, a ShadcnioButton pair with an inverted bg-background text-foreground primary and a border-background slash twenty ghost, and a right column containing a two-by-three grid of six supporting logo cells each rendered in border-background slash fifteen bg-background slash zero-point-zero-five containers with monochrome-to-color hover that promotes from text-background slash sixty to text-background. Built with TypeScript, motion/react parent entrance with staggered left-column and logo-cell fade using useReducedMotion, Lucide React icon marks paired with six invented placeholder wordmarks, and Tailwind CSS theme variables. Perfect for dramatic asymmetric credibility sections, mid-page visual breaks between light sections, and landing pages where the headline and logo grid should share equal weight against a dark background.
Related Components
React Logos Split Headline Logo Grid Block
A split layout with headline and logo grid
React Logos Dark Inset Wall Block
A dark inverted logo wall panel
React Logos Dark Inset Featured Focal Block
A dark inset featured focal hub
React Logos Dark Inset Bento Case Study Block
A dark inset bento featured case study
React Logos Split Headline Dark Grid Panel Block
A split headline with dark grid panel
React Logos Dark Inset Compact Strip Block
A compact dark inset logo strip
FAQ
Was this page helpful?
Sign in to leave feedback.
Dark Inset Single Marquee
A dark inset single row marquee logo block for React and Next.js with a rounded bg-foreground inverted panel, a single infinite row marquee at 45 seconds, dark edge masks using from-foreground to transparent, and inverted text colors with background opacity tiers built with shadcn/ui and Tailwind CSS
Dark Inset Wall
A dark inset logo wall block for React and Next.js with a rounded bg-foreground inverted panel, sixteen logos in a four-column grid, inverted ShadcnioButton primary and ghost CTAs, and monochrome-to-color hover states using background opacity tiers built with shadcn/ui and Tailwind CSS