Hero Section Blocks based on shadcn/ui
The hero is the top of your page and the part people judge in about three seconds. These shadcn/ui hero blocks give you that above-the-fold section ready to go: a strong headline, a subline, the call-to-action buttons, and room for an image, a form, or a product shot, all balanced and responsive out of the box.
They are built with shadcn/ui and Tailwind, so they line up on mobile and do not break when your headline runs long. Copy the code or run one npx shadcn add command, drop in your own words and image, and you have a landing-page opener in minutes instead of an afternoon of spacing tweaks.
Browse the hero layouts below, centered, split with an image, hero with an email capture, and start from one that fits the story you are telling.
A clean hero section featuring an announcement badge, compelling headline, lead text, and email capture form with a large gradient image below. Perfect for landing pages and lead generation campaigns.
Get ready to experience a new level of performance and functionality.
The time is now for it to be okay to be great. For being a bright color. For standing out.
import Hero01 from "@/components/creative-tim/blocks/hero-01"
export default function Page() {
return <Hero01 />
}
This hero block fits perfectly for tech startups, app developers, or digital product companies that want to showcase their mobile apps and encourage downloads. Features App Store and Google Play download buttons with mobile mockup image and company information card.
Build Amazing Digital Experiences
Start your development journey with Creative Tim UI. A powerful component library designed for modern web applications with stunning design and exceptional user experience.

Explore Our Showcase
Discover the power of Creative Tim UI through our curated collection of projects. We're here to help you build exceptional digital products. Get in touch with us at [email protected]
import Hero02 from "@/components/creative-tim/blocks/hero-02"
export default function Page() {
return <Hero02 />
}
The hero showcases client logos (Spotify, Coinbase, Netflix, Pinterest) below the call-to-action buttons, which serves to build credibility and trust by association. This example combines a striking visual with clear, concise messaging and strong branding elements.
Creative Tim UI.
Elevate Your Design Excellence
Discover the comprehensive journey behind Creative Tim UI's sophisticated component architecture and the meticulous craftsmanship that powers exceptional digital experiences across modern web applications.
import Hero03 from "@/components/creative-tim/blocks/hero-03"
export default function Page() {
return <Hero03 />
}
This hero example uses the power of image to showcase a product, next to the headline, CTA links, and the announcement badge. Features centered text content with dual CTAs and a large image display.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROEmpowering Innovation Through Design Excellence
We are committed to transforming the digital landscape by delivering exceptional component libraries that enable developers and designers to build remarkable user experiences.

import Hero04 from "@/components/creative-tim/blocks/hero-04"
export default function Page() {
return <Hero04 />
}
Use this hero block to encourage visitors to sign up via email while showcasing a video or image of your product. The image uses warm tones that give a sense of calm and inspiration. Includes terms and conditions checkbox for compliance.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROJoin the Future of Modern Web Development
Experience the next generation of component libraries built for developers who demand excellence. Sign up today and be part of the innovation.
import Hero05 from "@/components/creative-tim/blocks/hero-05"
export default function Page() {
return <Hero05 />
}
Use this hero example with an image that creates the vibe you want to transmit to your users. It can be used to engage visitors with your brand's journey or philosophy, suitable for products or services that promise growth and ambition. Features full-screen background image with dark overlay.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROWork with the rockets
Wealth creation is an evolutionarily recent positive-sum game. Status is an old zero-sum game. Those attacking wealth creation are often just seeking status.
import Hero06 from "@/components/creative-tim/blocks/hero-06"
export default function Page() {
return <Hero06 />
}
This hero section works perfectly in lead campaigns; you can present the most important details of the offer and capture the user's email address. The review section with star ratings helps build trust. Features right-aligned image with lead capture form.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROCreate Exceptional
User Experiences
Build beautiful, responsive applications with our comprehensive component library. Join thousands of developers creating remarkable digital experiences.
import Hero07 from "@/components/creative-tim/blocks/hero-07"
export default function Page() {
return <Hero07 />
}
This versatile hero section showcases your offer through an announcement badge, heading, CTA buttons, and a suggestive mobile mockup image. Perfect for app launches and product announcements.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROExperience Design Excellence on Every Device
Download our mobile app and take your creative workflow anywhere. Build stunning interfaces with powerful tools designed for modern developers and designers.
Trusted By Leading AI Platforms




import Hero08 from "@/components/creative-tim/blocks/hero-08"
export default function Page() {
return <Hero08 />
}
In this block, below the main text, there are three content boxes with titles, short descriptions, icons, and a call-to-action. This hero is well-suited for business websites, like those with a focus on news, articles, or blogs related to technology.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROInnovation That Drives Success
Discover the latest breakthroughs and success stories from leading companies shaping the future of technology. Stay informed with cutting-edge innovations and industry trends.
Seamless Payment Integration
Experience lightning-fast transactions with our advanced payment processing system, designed for modern businesses and e-commerce platforms.
Read moreGlobal Team Collaboration
Connect and collaborate with teams worldwide using our powerful real-time communication tools and project management features.
Read moreWorldwide Network Access
Expand your reach with our global content delivery network, ensuring fast and reliable access for users across all continents.
Read moreimport Hero09 from "@/components/creative-tim/blocks/hero-09"
export default function Page() {
return <Hero09 />
}
Another example of hero block with a full background image and black overlay. Features primary and secondary CTAs with centered content for maximum impact.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROBuild Beautiful Digital Experiences
Create stunning web applications with our powerful component library. Trusted by leading AI companies and developers worldwide to deliver exceptional user experiences.
Trusted By Leading AI Platforms
























import Hero10 from "@/components/creative-tim/blocks/hero-10"
export default function Page() {
return <Hero10 />
}
Another example of a hero section perfect for a lead campaign. Use this one if you want to capture your users' details, like the email address. Features integrated date picker for event-based campaigns.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PRO30,000+ Happy Travelers Worldwide
Discover Your Perfect Destination
Plan your dream vacation with ease. Search from thousands of destinations worldwide and create unforgettable memories with our seamless booking experience.
import Hero11 from "@/components/creative-tim/blocks/hero-11"
export default function Page() {
return <Hero11 />
}
In this example, the text is aligned to the left, while the images are displayed to the right, creating a balanced layout. The two call-to-action buttons are styled distinctly — one filled and one outlined, providing the user with a clear choice of actions.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROCreate Unforgettable Digital Experiences
Build stunning, modern applications with our comprehensive component library. Stand out with professional designs that engage and inspire your users.






import Hero12 from "@/components/creative-tim/blocks/hero-12"
export default function Page() {
return <Hero12 />
}
A single CTA button is used and it is placed under the text. Its contrasting button color makes it stand out, prompting users to engage. Features full-width background image with dark overlay.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROCrafting Digital Excellence Through Innovation
We blend creativity with cutting-edge technology to build exceptional digital experiences that inspire, engage, and transform your vision into reality.
Lightning Fast Performance
Beautiful Design Systems
Production Ready Code
import Hero13 from "@/components/creative-tim/blocks/hero-13"
export default function Page() {
return <Hero13 />
}
Dominated by a warm palette with gradients of purple, red, and orange, the hero gives off an energetic and passionate vibe. Two call-to-action buttons are present: 'JOIN US' and a play button for video content.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROBuild the Future with Creative Minds
Join a team of passionate innovators who are redefining what's possible. Together, we create extraordinary digital experiences that inspire millions around the world.
import Hero14 from "@/components/creative-tim/blocks/hero-14"
export default function Page() {
return <Hero14 />
}
This hero section works perfectly in lead campaigns with a carousel showcasing multiple offers. You can present the most important details of each offer with automatic slide transitions, navigation arrows, and pagination dots. Perfect for showcasing multiple products or services.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROimport Hero15 from "@/components/creative-tim/blocks/hero-15"
export default function Page() {
return <Hero15 />
}
The minimalistic section includes text and call-to-action buttons with social media integration. It's ideal for platforms that value clean design and social interaction, such as co-working spaces or networking events.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROWork with an amazing
We're constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game
Connect with us on
import Hero16 from "@/components/creative-tim/blocks/hero-16"
export default function Page() {
return <Hero16 />
}
In this block example, the color palette is dark and moody, with the image predominantly featuring dark browns and blacks, creating a sophisticated/elegant atmosphere. The hero includes social media icons, inviting further engagement.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROConnect with Our Creative Community
Join thousands of designers, developers, and innovators who are shaping the future of digital experiences. Let's build something extraordinary together.
Follow us for daily inspiration
import Hero17 from "@/components/creative-tim/blocks/hero-17"
export default function Page() {
return <Hero17 />
}
Use this hero block to encourage visitors to make an action while showcasing a video or image of your product. The vibrant display on the laptop screen attracts attention, perfect for tech and innovation-centric websites.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROBuild Something Extraordinary Together
Empower your creativity with cutting-edge design tools and components. Join a community of innovators creating the next generation of digital experiences.
Limited Time Offer
50% Off Pro Access
import Hero18 from "@/components/creative-tim/blocks/hero-18"
export default function Page() {
return <Hero18 />
}
Frequently asked questions
Are these hero blocks free?
Yes, the free heroes are copy-paste with no account and usable in commercial projects. A few richer ones are PRO and clearly marked.
Can I add my own image or video?
Yes. The media slot is part of the component, so you swap in your image, illustration, or video embed, and adjust the layout with Tailwind if you need a different balance.
How do I install a hero section?
Copy the code into your page, or run the npx shadcn add command on the block to bring it in with its dependencies. It becomes a normal component in your codebase.
Do the buttons and forms work?
The markup and styling are done. The call-to-action buttons and any email field are standard elements, so you point them at your routes or your form handler and they work like any other.
Will it work in a Next.js landing page?
Yes, they are built for React and Next.js with Tailwind, and they drop straight into an App Router page. They also work in Vite or Remix with shadcn/ui set up.
