Split Layout Hero Section
Split layout hero section for Next.js, React and shadcn/ui projects. Two-column design with text on one side and image or visual on the other. Built with Tailwind CSS and TypeScript.
This collection covers every split layout hero section pattern used in modern web design. Most are built for React.js, Next.js, and shadcn/ui projects out of the box. Some require additional shadcn/ui components, Framer Motion for modern animations, or minor configuration. Browse the full list below and pick the one that fits the project.
Simple split layout — text left, image right.
This is an extremely simple split layout hero section. It works best with a shadcn/ui and Next.Js project. For frameworks other than Next.Js, one can customize it to their needs.
This UI block, however, needs a bit of customization to button component of shadcn/ui.
Add this extra size variant to the button component:
xl: "h-12 gap-2 px-4 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4 lg:text-base lg:[&_svg:not([class*='size-'])]:size-5",