Creative Tim UICreative Tim UI

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.

Files
app/hero-01/page.tsx
import Hero01 from "@/components/creative-tim/blocks/hero-01"

export default function Page() {
  return <Hero01 />
}
Simple hero section with email capture and large image
hero-01
Exciting News! Introducing our latest innovation

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.

Modern architecture and design
import Hero01 from "@/components/creative-tim/blocks/hero-01"

export default function Page() {
  return <Hero01 />
}
Files
app/hero-02/page.tsx
import Hero02 from "@/components/creative-tim/blocks/hero-02"

export default function Page() {
  return <Hero02 />
}
Mobile app hero with app store download buttons
hero-02

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.

iPhone mockup with Creative Tim UI

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 />
}
Files
app/hero-03/page.tsx
import Hero03 from "@/components/creative-tim/blocks/hero-03"

export default function Page() {
  return <Hero03 />
}
Hero section with client logos and trust building
hero-03

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.

logo spotifylogo coinbaselogo netflixlogo pinterest
Nature landscape with mountains
import Hero03 from "@/components/creative-tim/blocks/hero-03"

export default function Page() {
  return <Hero03 />
}
PRO Blocks

This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.

Upgrade to PRO
Large image hero with centered content and CTAs
hero-04
Our Mission

Empowering 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.

Creative workspace with modern design
import Hero04 from "@/components/creative-tim/blocks/hero-04"

export default function Page() {
  return <Hero04 />
}
PRO Blocks

This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.

Upgrade to PRO
Email signup hero with checkbox and large image
hero-05
Launch Event 2025

Join 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.

Trusted by 10,000+ developers

Modern web development workspace
import Hero05 from "@/components/creative-tim/blocks/hero-05"

export default function Page() {
  return <Hero05 />
}
PRO Blocks

This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.

Upgrade to PRO
Hero with full background image and centered content
hero-06
Our pricing plans

Work 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 />
}
PRO Blocks

This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.

Upgrade to PRO
Lead generation hero with email form and testimonials
hero-07

Create Exceptional
User Experiences

Build beautiful, responsive applications with our comprehensive component library. Join thousands of developers creating remarkable digital experiences.

Modern web development workspace
import Hero07 from "@/components/creative-tim/blocks/hero-07"

export default function Page() {
  return <Hero07 />
}
PRO Blocks

This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.

Upgrade to PRO
Mobile application showcase with announcement badge
hero-08

Experience 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

Claude AIOpenAILovable
iPhone mockup showcasing Creative Tim UI mobile app
import Hero08 from "@/components/creative-tim/blocks/hero-08"

export default function Page() {
  return <Hero08 />
}
PRO Blocks

This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.

Upgrade to PRO
Hero with image and feature content boxes
hero-09
Featured News & Updates

Innovation 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 more

Global Team Collaboration

Connect and collaborate with teams worldwide using our powerful real-time communication tools and project management features.

Read more

Worldwide Network Access

Expand your reach with our global content delivery network, ensuring fast and reliable access for users across all continents.

Read more
import Hero09 from "@/components/creative-tim/blocks/hero-09"

export default function Page() {
  return <Hero09 />
}
PRO Blocks

This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.

Upgrade to PRO
Full-screen background hero with dual CTAs
hero-10

Build 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

LovableOpenAIClaude AILovableOpenAIClaude AILovableOpenAIClaude AILovableOpenAIClaude AI
LovableOpenAIClaude AILovableOpenAIClaude AILovableOpenAIClaude AILovableOpenAIClaude AI
import Hero10 from "@/components/creative-tim/blocks/hero-10"

export default function Page() {
  return <Hero10 />
}
PRO Blocks

This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.

Upgrade to PRO
Lead campaign hero with calendar and email capture
hero-11

30,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 />
}
PRO Blocks

This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.

Upgrade to PRO
Left-aligned hero with dual images and CTAs
hero-12

Create Unforgettable Digital Experiences

Build stunning, modern applications with our comprehensive component library. Stand out with professional designs that engage and inspire your users.

10,000+
Active Users
50+
Countries
99%
Satisfaction
3d illustration3d illustration
3d illustration3d illustration
3d illustration3d illustration
import Hero12 from "@/components/creative-tim/blocks/hero-12"

export default function Page() {
  return <Hero12 />
}
PRO Blocks

This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.

Upgrade to PRO
Cover image hero with single CTA button
hero-13

Crafting 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 />
}
PRO Blocks

This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.

Upgrade to PRO
Video hero with play button and vibrant gradients
hero-14
🚀 Join Our Innovative Team

Build 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 />
}
PRO Blocks

This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.

Upgrade to PRO
Hero carousel with auto-rotating slides and navigation
hero-15
Join our talented team

Explore Exotic Destinations

Embark on an adventure to the world's most beautiful and exotic locations. Discover breathtaking landscapes and vibrant cultures with our exclusive travel packages.

Join our talented team

Book Your Dream Holiday

Make your dream holiday a reality with our hassle-free booking options. Choose from a variety of destinations and accommodations tailored to your preferences.

Join our talented team

Escape to Paradise

Need a quick escape? Check out our last-minute getaway deals and enjoy spontaneous adventures without breaking the bank. Perfect for your next holiday!

import Hero15 from "@/components/creative-tim/blocks/hero-15"

export default function Page() {
  return <Hero15 />
}
PRO Blocks

This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.

Upgrade to PRO
Minimalist hero with social media buttons
hero-16

Work 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 />
}
PRO Blocks

This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.

Upgrade to PRO
Dark moody hero with background image and social buttons
hero-17

Connect 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 />
}
PRO Blocks

This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.

Upgrade to PRO
Product showcase hero with laptop mockup and CTA
hero-18
✨ Latest Innovation in UI Design

Build 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.