Components
Loading preview...
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.
@mikolajdobrucki
npx shadcn@latest add https://21st.dev/r/mikolajdobrucki/hero-section"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",
}}
/>
)
}