M
MUI
Back to Home
ComponentsHeroes

Heroes

Hero section components for landing pages with visual previews for all 136 components.

136components
4 Free·132 Pro
import { ... } from "@/components/blocks/heroes"

HeroCenteredSimple

Free
Loading preview...

HeroCenteredImageBelow

Pro
Loading preview...

HeroCenteredGradient

Free
Loading preview...

HeroCenteredPattern

Pro
Loading preview...

HeroCenteredStats

Pro
Loading preview...

HeroCenteredSocialProof

Pro
Loading preview...

HeroCenteredEmailCapture

Pro
Loading preview...

HeroSplitImageRight

Free
Loading preview...

HeroSplitImageLeft

Free
Loading preview...

HeroSplitMockupRight

Pro
Loading preview...

HeroSplitMockupLeft

Pro
Loading preview...

HeroSplitVideoRight

Pro
Loading preview...

HeroSplitVideoLeft

Pro
Loading preview...

HeroSplitFormRight

Pro
Loading preview...

HeroSplitFormLeft

Pro
Loading preview...

HeroSplitIllustrationRight

Pro
Loading preview...

HeroSplitIllustrationLeft

Pro
Loading preview...

HeroSplit5050

Pro
Loading preview...

HeroSplit6040

Pro
Loading preview...

HeroFullscreenImage

Pro
Loading preview...

HeroFullscreenVideo

Pro
Loading preview...

HeroFullscreenGradient

Pro
Loading preview...

HeroFullscreenParallax

Pro
Loading preview...

HeroFullscreenCarousel

Pro
Loading preview...

HeroFullscreenDiagonal

Pro
Loading preview...

HeroFullscreenDark

Pro
Loading preview...

HeroFullscreenLight

Pro
Loading preview...

HeroSaasDashboard

Pro
Loading preview...

HeroMobileApp

Pro
Loading preview...

HeroAPICode

Pro
Loading preview...

HeroPricingPreview

Pro
Loading preview...

HeroTestimonial

Pro
Loading preview...

HeroWaitlist

Pro
Loading preview...

HeroSearch

Pro
Loading preview...

HeroAnimatedText

Pro
Loading preview...

HeroMetrics

Pro
Loading preview...

HeroTrustBadges

Pro
Loading preview...

HeroSplitEmailRating

Pro
Loading preview...

HeroSplitTestimonial

Pro
Loading preview...

HeroSplitFeatures

Pro
Loading preview...

HeroiPhoneAppStore

Pro
Loading preview...

HeroScreenMockupCentered

Pro
Loading preview...

HeroColorCard

Pro
Loading preview...

HeroGeometricShapes

Pro
Loading preview...

HeroAbstractAngles

Pro
Loading preview...

HeroCardMockup

Pro
Loading preview...

PageHeaderCentered

Pro
Loading preview...

PageHeaderCenteredButtons

Pro
Loading preview...

PageHeaderCenteredSearch

Pro
Loading preview...

PageHeaderCenteredTabs

Pro
Loading preview...

PageHeaderCenteredEmail

Pro
Loading preview...

PageHeaderCenteredBrand

Pro
Loading preview...

PageHeaderLeft

Pro
Loading preview...

PageHeaderLeftButtons

Pro
Loading preview...

PageHeaderLeftSearch

Pro
Loading preview...

PageHeaderLeftTabs

Pro
Loading preview...

PageHeaderLeftEmail

Pro
Loading preview...

PageHeaderLeftBrand

Pro
Loading preview...

PageHeaderSpaceBetween

Pro
Loading preview...

PageHeaderSpaceBetweenButtons

Pro
Loading preview...

PageHeaderSpaceBetweenSearch

Pro
Loading preview...

PageHeaderSpaceBetweenTabs

Pro
Loading preview...

PageHeaderSpaceBetweenEmail

Pro
Loading preview...

PageHeaderSpaceBetweenBrand

Pro
Loading preview...

HeroSaaS

Pro
Loading preview...

HeroStartup

Pro
Loading preview...

HeroAgency

Pro
Loading preview...

HeroEcommerce

Pro
Loading preview...

HeroMarketplace

Pro
Loading preview...

HeroFintech

Pro
Loading preview...

HeroCrypto

Pro
Loading preview...

HeroTrading

Pro
Loading preview...

HeroHealthcare

Pro
Loading preview...

HeroMedical

Pro
Loading preview...

HeroEducation

Pro
Loading preview...

HeroCourses

Pro
Loading preview...

HeroLearning

Pro
Loading preview...

HeroRealEstate

Pro
Loading preview...

HeroProperty

Pro
Loading preview...

HeroTravel

Pro
Loading preview...

HeroHospitality

Pro
Loading preview...

HeroFood

Pro
Loading preview...

HeroRestaurant

Pro
Loading preview...

HeroDelivery

Pro
Loading preview...

HeroFitness

Pro
Loading preview...

HeroWellness

Pro
Loading preview...

HeroNonprofit

Pro
Loading preview...

HeroCharity

Pro
Loading preview...

HeroGlass

Pro
Loading preview...

HeroBlur

Pro
Loading preview...

HeroFrosted

Pro
Loading preview...

HeroNeon

Pro
Loading preview...

HeroGlow

Pro
Loading preview...

HeroCyberpunk

Pro
Loading preview...

HeroBrutalist

Pro
Loading preview...

HeroMinimalist

Pro
Loading preview...

HeroRetro

Pro
Loading preview...

HeroVintage

Pro
Loading preview...

HeroIllustration

Pro
Loading preview...

HeroAbstract

Pro
Loading preview...

HeroIsometric

Pro
Loading preview...

Hero3D

Pro
Loading preview...

HeroParticles

Pro
Loading preview...

HeroAnimated

Pro
Loading preview...

HeroDuotone

Pro
Loading preview...

HeroMonochrome

Pro
Loading preview...

HeroColorful

Pro
Loading preview...

HeroVibrant

Pro
Loading preview...

HeroElegant

Pro
Loading preview...

HeroLuxury

Pro
Loading preview...

HeroPlayful

Pro
Loading preview...

HeroBold

Pro
Loading preview...

HeroAsymmetric

Pro
Loading preview...

HeroDiagonal

Pro
Loading preview...

HeroOverlap

Pro
Loading preview...

HeroLayered

Pro
Loading preview...

HeroMagazine

Pro
Loading preview...

HeroEditorial

Pro
Loading preview...

HeroCards

Pro
Loading preview...

HeroCardsGrid

Pro
Loading preview...

HeroTabs

Pro
Loading preview...

HeroTabbed

Pro
Loading preview...

HeroSlider

Pro
Loading preview...

HeroCarousel

Pro
Loading preview...

HeroAccordion

Pro
Loading preview...

HeroExpandable

Pro
Loading preview...

HeroTimeline

Pro
Loading preview...

HeroSequence

Pro
Loading preview...

HeroMosaic

Pro
Loading preview...

HeroBento

Pro
Loading preview...

HeroCollage

Pro
Loading preview...

HeroGallery

Pro
Loading preview...

HeroInteractive

Pro
Loading preview...

HeroScrolling

Pro
Loading preview...

HeroSideBySide

Pro
Loading preview...

HeroStacked

Pro
Loading preview...

All 136 components include viewport switching, code editing, and responsive previews. Import any component directly from @/components/blocks/heroes