Components
A powerful hero section component built with shadcn/ui.
Create stunning hero sections with multiple variants including illustration-based layouts, glowing effects, and mobile app showcases. Each variant is designed to make a strong first impression while maintaining shadcn's signature aesthetic.
Built with Tailwind CSS, this component delivers pixel-perfect, responsive hero sections that adapt beautifully across all devices. The clean, modern design principles ensure your hero section effectively communicates your message while maintaining visual harmony with other shadcn components.
npx shadcn@latest add https://21st.dev/r/mikolajdobrucki/hero-sectionLoading preview...
"use client"
import { HeroSection } from "@/components/blocks/hero-section"
import { Icons } from "@/components/ui/icons"
export function HeroSectionDemo() {
return (
<HeroSection
badge={{
text: "Introducing our new components",
action: {
text: "Learn more",
href: "/docs",
},
}}
title="Build faster with beautiful components"
description="Premium UI components built with React and Tailwind CSS. Save time and ship your next project faster with our ready-to-use components."
actions={[
{
text: "Get Started",
href: "/docs/getting-started",
variant: "default",
},
{
text: "GitHub",
href: "https://github.com/your-repo",
variant: "glow",
icon: <Icons.gitHub className="h-5 w-5" />,
},
]}
image={{
light: "https://www.launchuicomponents.com/app-light.png",
dark: "https://www.launchuicomponents.com/app-dark.png",
alt: "UI Components Preview",
}}
/>
)
}