[21st home](/content/site-root.html) SearchClear [Components](/content/community/components/index.html) [Themes](/content/community/themes/index.html) [Templates](/content/community/templates/index.html) Category All Marketing Blocks UI Components Time All time Last week Last month Last 3 months Last year Primitive library All Radix UI Base UI React Aria Ariakit Headless UI Other primitives Tailwind version All Tailwind v4 Tailwind v3 License No options Library No options Built with No options Author No authors yet Tags (7) Clear 3d-hero 0 animated-hero 0 animated-hero-section 0 dark-hero-section 0 hero 1.2K hero-background 0 hero-section 0 Marketing Blocks Announcements 71 Backgrounds 365 Borders 111 Calls to Action 501 Clients 17 Comparisons 31 Docks 49 FAQs 191 Features 318 Footers 65 Galleries 272 Hooks 51 Images 428 Maps 51 Marquees 113 Navigation Menus 477 Pricing Sections 216 Scroll Areas 293 Shaders 404 Stats & KPIs 153 Steppers 124 Team Sections 119 Testimonials 161 Texts 663 Timelines 74 Videos 162 UI Components Accordions 234 AI Chats 248 Alerts 240 Avatars 597 Badges 605 Buttons 2K Calendars 239 Cards 1.8K Carousels 239 Charts & Data Viz 246 Checkboxes 238 Cursors 152 Dashboards 400 Date Pickers 250 Dialogs / Modals 328 Dropdowns 506 Empty States 77 File Trees 61 File Uploads 154 Forms 1.5K Globes 41 Grids & Bento 620 Icons 851 Inputs 949 Links 354 Lists 349 Menus 287 Notifications 247 Numbers 54 Onboarding 53 Paginations 130 Popovers 179 Profiles 270 Progress 375 Radio Groups 152 Search Bars 218 Selects 316 Sidebars 95 Sign Ins 103 Sign ups 58 Sliders 217 Spinner Loaders 480 Tables 313 Tabs 239 Tags 74 Text Areas 187 Toasts 79 Toggles 532 Tooltips 267 Components/hero Search `K` [Pricing](/content/pricing/index.html) Sign in - **SaaS Template** \\ by vvisedev Crafts](/content/@waleedkibhen/components/saa-s-template/index.html) - **Responsive Hero Banner** \\ by Saifullah Channa](/content/@sensewood8/components/responsive-hero-banner/index.html) - **Glassmorphism Trust Hero** \\ by Hossain Jahed](/content/@easemize/components/glassmorphism-trust-hero/index.html) - **Hero 3** \\ by Shaban Haider](/content/@sshahaider/components/hero-3/index.html) - **Hero** \\ by Sam sir](/content/@sam344334/components/hero/index.html) - **Scroll Hero Section** \\ by Rahil Vahora](/content/@rahil1202/components/scroll-hero-section/index.html) - **Cinematic Product Scroll Section** \\ by ali karamooz](/content/@a.karamooz3232/components/cinematic-product-scroll-section/index.html) - **Hero 1** \\ by Shaban Haider](/content/@sshahaider/components/hero-1/index.html) - **jelly fish** \\ by Univolve](/content/@univolveit/components/jelly-fish/index.html) - **Centered Hero with Image Fan** \\ by felipemenezes098](/content/@felipemenezes098/components/hero-10/index.html) - **Hero** \\ by Berat Berkay Gökdemir](/content/@beratberkayg/components/hero-1/index.html) - **Editorial Collage Hero** \\ by felipemenezes098](/content/@felipemenezes098/components/hero-04/index.html) - **Portfolio Hero** \\ by vvisedev Crafts](/content/@waleedkibhen/components/portfolio-hero/index.html) - **Grain Gradient Hero Section** \\ by Caio Bonato](/content/@chowlol202/components/grain-gradient-hero-section/index.html) - **Hero Section** \\ by prebuiltui](/content/@prebuiltui/components/hero-section/hero-section-with-animated-navbar/index.html) - **Minimalist Hero Fashion** \\ by Kokonut Baffier](/content/@kokonutd/components/hero-fashion/index.html) - **AI Input Hero** \\ by Erik](/content/@aghasisahakyan1/components/ai-input-hero/index.html) - **Illuminated Hero** \\ by Shaban Haider](/content/@sshahaider/components/illuminated-hero/index.html) - **Hero Section 9** \\ by Méschac Irung](/content/@meschacirung/components/hero-section-9/index.html) - **Wilderness** \\ by Patrick Dunn](/content/@patrick.thomas.dunn1988/components/wilderness/index.html) - **FinTech Landing Page** \\ by Abhinav C](/content/@abhinavcdev/components/fin-tech-landing-page/index.html) - **Cosmos 3d orbit gallery** \\ by Vaibhav Kumar Singh](/content/@vaib215/components/cosmos-3d-orbit-gallery/index.html) - **Modern Landing Hero** \\ by Mokshith\_Codez GUJJETI](/content/@mokshithcodez/components/modern-landing-hero/index.html) - **Flux Card Hero** \\ by M.bin Salman](/content/@muhammad-binsalman/components/flux-card-hero/index.html) - **Hero Section** \\ by prebuiltui](/content/@prebuiltui/components/hero-section/index.html) - **Bloim Animation Background** \\ by Serge Bunas](/content/@serjobas/components/bloim-animation-background/index.html) - **Hero with Mockup** \\ by Serafim](/content/@serafimcloud/components/hero-with-mockup/index.html) - **Hero Section 6** \\ by Méschac Irung](/content/@meschacirung/components/hero-section-6/index.html) - **Hero Section** \\ by reuno-ui](/content/@reuno-ui/components/hero-section/index.html) - **Hero 03** \\ by felipemenezes098](/content/@felipemenezes098/components/hero-03/index.html) - **Google Gemini Effect** \\ by Manu Arora](/content/@manuarora700/components/google-gemini-effect/index.html) - **PrismaHero** \\ by Rahil Vahora](/content/@rahil1202/components/prisma-hero/index.html) - **Hero** \\ by Subhadeep Roy](/content/@subhadeeproy3902/components/hero/index.html) - **Aero Hero-3** \\ by Cnippet](/content/@cnippet.dev/components/aero-hero-3/index.html) - **Spline Scene** \\ by Serafim](/content/@serafimcloud/components/splite/index.html) - **Retrying** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/retrying/index.html) - **Lunar Gravity Card** \\ by Alex Reino](/content/@alexperezcedeno/components/lunar-gravity-card/index.html) - **Hero Page** \\ by Ruixen](/content/@ruixen.ui/components/hero-page/index.html) - **Hero Section 4** \\ by Méschac Irung](/content/@meschacirung/components/hero-section-4/index.html) - **Tailwind CSS Background Snippet** \\ by Julien Thibeaut](/content/@ibelick/components/tailwind-css-background-snippet/index.html) - **Spatial Product Showcase** \\ by daiv09](/content/@daiwiikharihar/components/spatial-product-showcase/index.html) - **Aether Flow Hero** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/aether-flow-hero/index.html) - **Scroll Morph Hero** \\ by Prashant Som](/content/@prashantsom75/components/scroll-morph-hero/index.html) - **GLSL Hills** \\ by Ali Imam](/content/@designali-in/components/glsl-hills/index.html) - **GlowingHero background** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/glowing-hero-background/index.html) - **Hero Shutter Text** \\ by daiv09](/content/@daiwiikharihar/components/hero-shutter-text/index.html) - **Hero Modern** \\ by brijr](/content/@brijr/components/hero-modern/hero-centered/index.html) - **Gradient Blur Bg** \\ by meghtrix](/content/@meghtrix/components/gradient-blur-bg/grid-blur-top/index.html) - **Background Gradient Glow** \\ by meghtrix](/content/@meghtrix/components/background-gradient-glow/soft-pastel-dream-gradient/index.html) - **Jade Sky** \\ by Serafim](/content/@serafimcloud/components/jade-sky/index.html) - **Hero Modern** \\ by brijr](/content/@brijr/components/hero-modern/hero-six/index.html) - **Dead Channel** \\ by Serafim](/content/@serafimcloud/components/dead-channel/index.html) - **Split Hero With Image Cards** \\ by felipemenezes098](/content/@felipemenezes098/components/hero-08/index.html) - **Editorial Image Hero** \\ by felipemenezes098](/content/@felipemenezes098/components/hero-07/index.html) - **Hero with group of images, text and two buttons** \\ by Tommy Jepsen](/content/@tommyjepsen/components/hero-with-group-of-images-text-and-two-buttons/index.html) - **Gradient Blur Bg** \\ by meghtrix](/content/@meghtrix/components/gradient-blur-bg/gradient-big-grid-bg/index.html) - **Minimalist Hero** \\ by Ravi Katiyar](/content/@ravikatiyar162/components/minimalist-hero/index.html) - **Idea Generator Hero Section** \\ by M.bin Salman](/content/@muhammad-binsalman/components/idea-generator-hero-section/index.html) - **Smooth Scroll Hero** \\ by Shamsudheen](/content/@ishamsu/components/smooth-scroll-hero/index.html) - **Glow Horizon** \\ by Bashar ahammed](/content/@ahammed.bashar9/components/glow-horizon/index.html) - **Parallax Scrolling** \\ by osmosupply](/content/@osmosupply/components/parallax-scrolling/index.html) - **AuroraBackground** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/aurora-background/index.html) - **Background snippets** \\ by Julien Thibeaut](/content/@ibelick/components/background-snippets/background-grid-light-gray/index.html) - **Scroll media expansion hero** \\ by Arunachalam](/content/@arunachalam/components/scroll-expansion-hero/index.html) - **Dreamy Pastel Wash** \\ by Serafim](/content/@serafimcloud/components/dreamy-pastel-wash/index.html) - **Integrations Orbit Section** \\ by Méschac Irung](/content/@meschacirung/components/integrations-5/index.html) - **DevTool Landing Page** \\ by Mokshith\_Codez GUJJETI](/content/@mokshithcodez/components/dev-tool-landing-page/index.html) - **Hero** \\ by reuno-ui](/content/@reuno-ui/components/hero/index.html) - **Hero 1** \\ by Preet Suthar](/content/@preetsuthar17/components/hero-1/index.html) - **Pipo** \\ by Gustavo](/content/@gustavo.camara/components/pipo/index.html) - **Gradient Backgrounds** \\ by meghtrix](/content/@meghtrix/components/gradient-backgrounds/gradient-background-purple-bottom/index.html) - **Animated Background** \\ by Awanish Verma](/content/@avanishverma4/components/animated-background/index.html) - **Background Gradient Glow** \\ by meghtrix](/content/@meghtrix/components/background-gradient-glow/mist-gradient-bg/index.html) - **Gradient Blur Bg** \\ by meghtrix](/content/@meghtrix/components/gradient-blur-bg/sky-gradiend-grid-top/index.html) - **Background snippets** \\ by Julien Thibeaut](/content/@ibelick/components/background-snippets/background-radial-top/index.html) - **Oceanic Shimmer** \\ by Serafim](/content/@serafimcloud/components/oceanic-shimmer/index.html) - **Soft Pastel Blend** \\ by Serafim](/content/@serafimcloud/components/soft-pastel-blend/index.html) - **Violet Radiance** \\ by Serafim](/content/@serafimcloud/components/violet-radiance/index.html) - **CrystallineFieldHero** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/crystalline-field-hero/index.html) - **Feature 01** \\ by Ali Imam](/content/@designali-in/components/feature-01/index.html) - **Lamp** \\ by Manu Arora](/content/@manuarora700/components/lamp/index.html) - **Parallax Cosmic Background** \\ by Hossain Jahed](/content/@easemize/components/parallax-cosmic-background/index.html) - **Depth Parallax Words** \\ by Edu Calvo](/content/@educalvolpz/components/depth-parallax-words/index.html) - **Hero** \\ by Ravi Katiyar](/content/@ravikatiyar162/components/hero-3/index.html) - **ruixen-hero-section-02** \\ by Ruixen](/content/@ruixen.ui/components/ruixen-hero-section-02/index.html) - **Hero Modern** \\ by brijr](/content/@brijr/components/hero-modern/hero-four/index.html) - **Futuristic Hero** \\ by 21st Indexer](/content/@larsen66/components/hero-futuristic/index.html) - **Gradient Backgrounds** \\ by meghtrix](/content/@meghtrix/components/gradient-backgrounds/gradient-background-gray-bottom/index.html) - **Hero Section 1** \\ by Méschac Irung](/content/@meschacirung/components/hero-section-1/index.html) - **Quantam Mysh Hero** \\ by M.bin Salman](/content/@muhammad-binsalman/components/quantam-mysh-hero/index.html) - **Focus Hero** \\ by Arun Dass](/content/@arunjdass/components/focus-hero/index.html) - **Hero Section** \\ by Ravi Katiyar](/content/@ravikatiyar162/components/hero-section-7/index.html) - **Hero Scrub** \\ by Jean Duthil](/content/@jean.duthil13/components/hero-scrub/index.html) - **Variable Font Proximity Hero** \\ by Cnippet](/content/@cnippet.dev/components/m-variable-font-cursor-proximity-1/index.html) - **Luminous Topography** \\ by Mehi](/content/@rmahammad/components/luminous-topography/index.html) - **Hero Section** \\ by Ravi Katiyar](/content/@ravikatiyar162/components/hero-section-2/index.html) - **Background Gradient Glow** \\ by meghtrix](/content/@meghtrix/components/background-gradient-glow/orange-soft-bg/index.html) - **Background snippets** \\ by Julien Thibeaut](/content/@ibelick/components/background-snippets/background-grid-blue/index.html) - **Gradient Blur Bg** \\ by meghtrix](/content/@meghtrix/components/gradient-blur-bg/gradient-small-grid-bg/index.html) - **Images Slider** \\ by Manu Arora](/content/@manuarora700/components/images-slider/index.html) - **Background Gradient Animation** \\ by Manu Arora](/content/@manuarora700/components/background-gradient-animation/index.html) - **Woven Light Hero** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/woven-light-hero/index.html) - **Hero 03** \\ by Ali Imam](/content/@designali-in/components/hero-03/index.html) - **Commerce Hero** \\ by Bankk roll](/content/@bankkroll/components/commerce-hero/index.html) - **Interactive Neural Vortex Background** \\ by Le Thanh](/content/@minhxthanh/components/interactive-neural-vortex-background/index.html) - **Gradient Backgrounds** \\ by meghtrix](/content/@meghtrix/components/gradient-backgrounds/gradient-background-pink-top/index.html) - **Hero Parallax** \\ by Manu Arora](/content/@manuarora700/components/hero-parallax/index.html) - **Cinematic landing Hero** \\ by Hossain Jahed](/content/@easemize/components/cinematic-landing-hero/index.html) - **Vignette Grid Background** \\ by Rushil Dhinoja](/content/@molecule-lab-rushil/components/vignette-grid-background/grid-bg/index.html) - **Stack Feature Section** \\ by Ruixen](/content/@ruixen.ui/components/stack-feature-section/index.html) - **Noisy Gradient Backgrounds** \\ by Hossain Jahed](/content/@easemize/components/noisy-gradient-backgrounds/index.html) - **Hero Section 06** \\ by Ruixen](/content/@ruixen.ui/components/hero-section06/index.html) - **Integrations Component** \\ by Méschac Irung](/content/@meschacirung/components/integrations-component/integrations-8/index.html) - **Financial Hero Section** \\ by ui layout](/content/@uilayout.contact/components/hero-financial/index.html) - **Plum Peach Butter** \\ by Serafim](/content/@serafimcloud/components/plum-peach-butter/index.html) - **CTA with Marquee** \\ by Liana Pepanyan](/content/@lyanchouss/components/cta-with-marquee/cta-with-video/index.html) - **Violet Starlight** \\ by Serafim](/content/@serafimcloud/components/violet-starlight/index.html) - **Animated Shader Hero** \\ by Ravi Katiyar](/content/@ravikatiyar162/components/animated-shader-hero/index.html) - **Hero Modern** \\ by brijr](/content/@brijr/components/hero-modern/index.html) - **InteractiveSynapseNetwork** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/interactive-synapse-network/index.html) - **Background Gradient Glow** \\ by meghtrix](/content/@meghtrix/components/background-gradient-glow/aurora-soft-harmony/index.html) - **Gradient Blur Bg** \\ by meghtrix](/content/@meghtrix/components/gradient-blur-bg/purple-gradient-grid-left-bg/index.html) - **Background snippets** \\ by Julien Thibeaut](/content/@ibelick/components/background-snippets/background-grid-masked-dark-gray/index.html) - **Background Components** \\ by meghtrix](/content/@meghtrix/components/background-components/zigzag-lighthing/index.html) - **Personal Landing** \\ by Ankit Verma](/content/@itsankitverma/components/personal-landing/index.html) - **IntegrationHero** \\ by Ruixen](/content/@ruixen.ui/components/integration-hero/index.html) - **Hover Velocity Hero** \\ by Sean Hello](/content/@sean0205/components/hover-velocity-hero/index.html) - **Floating Gradient** \\ by Moumen Soliman](/content/@moumensoliman/components/floating-gradient-shadcnui/index.html) - **Cyber Matrix Hero** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/cyber-matrix-hero/index.html) - **Pixel Rocket Voyager** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/pixel-rocket-voyager/index.html) - **Book A Demo 4** \\ by Ali Imam](/content/@designali-in/components/book-a-demo-4/index.html) - **Hero Preview Walls** \\ by Ruixen](/content/@ruixen.ui/components/hero-preview-walls/index.html) - **Almoayyed** \\ by Gordon Edacheril](/content/@gordongedacheril1/components/almoayyed/index.html) - **background rowds shop v1** \\ by Gabriel Porcius](/content/@gabporcius/components/background-rowds-shop-v1/index.html) - **Hero 195** \\ by Shadcnblocks.com Austin](/content/@shadcnblockscom/components/hero-195-1/index.html) - **Silk Blend gradient** \\ by Amit Haski](/content/@amit.haski/components/silk-blend-gradient/index.html) - **Background Paths** \\ by Kokonut Baffier](/content/@kokonutd/components/background-paths/index.html) - **Hero with Dashboard Mockup** \\ by felipemenezes098](/content/@felipemenezes098/components/hero-02/index.html) - **Hero Golden Spiral** \\ by Chánh Đại](/content/@ncdai/components/hero-01/index.html) - **Lapis Peach Swirl** \\ by Serafim](/content/@serafimcloud/components/lapis-peach-swirl/index.html) - **Vignette Grid Background** \\ by Rushil Dhinoja](/content/@molecule-lab-rushil/components/vignette-grid-background/index.html) - **FoxyHero** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/foxy-hero/index.html) - **HeroSectionWithGradient** \\ by Ruixen](/content/@ruixen.ui/components/hero-section-with-gradient/index.html) - **Hero Dithering Card** \\ by Jessi](/content/@moazamtrade/components/hero-dithering-card/index.html) - **Gradient Blur Bg** \\ by meghtrix](/content/@meghtrix/components/gradient-blur-bg/gradient-big-grid-2/index.html) - **Background snippets** \\ by Julien Thibeaut](/content/@ibelick/components/background-snippets/background-dots-masked-gray/index.html) - **Background Gradient Glow** \\ by meghtrix](/content/@meghtrix/components/background-gradient-glow/beige-texture-bg/index.html) - **Background Components** \\ by meghtrix](/content/@meghtrix/components/background-components/purple-center-glow/index.html) - **Orbital Hero Section** \\ by Yura Oak](/content/@yura/components/orbital-hero-section/index.html) - **Carousel** \\ by Abraham](/content/@anubra266/components/carousel-1/minimal-carousel/index.html) - **Hero Section** \\ by LaviKatiyar](/content/@lavikatiyar/components/hero-section/index.html) - **Call To Action** \\ by Méschac Irung](/content/@meschacirung/components/call-to-action/index.html) - **Hero Section** \\ by Ravi Katiyar](/content/@ravikatiyar162/components/hero-section-3/index.html) - **Sonic Waveform** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/sonic-waveform/index.html) - **Animated hero** \\ by Tommy Jepsen](/content/@tommyjepsen/components/animated-hero/index.html) - **Galaxy Interactive Hero Section** \\ by Erik](/content/@aghasisahakyan1/components/galaxy-interactive-hero-section/index.html) - **Floating Icons Hero Section** \\ by Ravi Katiyar](/content/@ravikatiyar162/components/floating-icons-hero-section/index.html) - **Gradient Background 4** \\ by Julien Thibeaut](/content/@ibelick/components/gradient-background-4/index.html) - **Underline Hero Section** \\ by vvisedev Crafts](/content/@waleedkibhen/components/underline-hero-section/index.html) - **Diced Hero Section** \\ by Maxim Bortnikov](/content/@maxim.bort.devel/components/diced-hero-section/index.html) - **Deep Horizon** \\ by Serafim](/content/@serafimcloud/components/deep-horizon/index.html) - **Bolt Style Chat** \\ by Hurera Sheikh](/content/@hurerag24/components/bolt-style-chat/index.html) - **Tech Solutions Hero Section** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/tech-solutions-hero-section/index.html) - **Hero Modern** \\ by brijr](/content/@brijr/components/hero-modern/hero-five/index.html) - **AnomalousMatterHero** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/anomalous-matter-hero/index.html) - **Call to Action** \\ by prebuiltui](/content/@prebuiltui/components/call-to-action-1/index.html) - **Hero 1** \\ by Hossain Jahed](/content/@easemize/components/hero-1/index.html) - **Book A Demo 3** \\ by Ali Imam](/content/@designali-in/components/book-a-demo-3/index.html) - **Background snippets** \\ by Julien Thibeaut](/content/@ibelick/components/background-snippets/background-radial-purple/index.html) - **Gradient Blur Bg** \\ by meghtrix](/content/@meghtrix/components/gradient-blur-bg/index.html) - **Background Gradient Glow** \\ by meghtrix](/content/@meghtrix/components/background-gradient-glow/peachy-mint-gradient/index.html) - **Background Components** \\ by meghtrix](/content/@meghtrix/components/background-components/sunrise-glow/index.html) - **Content Block** \\ by Méschac Irung](/content/@meschacirung/components/content-block/index.html) - **Kinetic Grid** \\ by satoriui](/content/@satoriui/components/kinetic-grid/index.html) - **Hero Section** \\ by Hayden Bleasel](/content/@meschacirung/components/hero-section-2/index.html) - **Pixel perfect Hero** \\ by Hossain Jahed](/content/@easemize/components/pixel-perfect-hero/index.html) - **Volumetric Studio** \\ by Alex Reino](/content/@alexperezcedeno/components/volumetric-studio/index.html) - **Digital Serenity - Animated Landing Page** \\ by Le Thanh](/content/@minhxthanh/components/digital-serenity-animated-landing-page/index.html) - **Dynamic Wave Canvas Background** \\ by Le Thanh](/content/@minhxthanh/components/dynamic-wave-canvas-background/index.html) - **Modern Hero** \\ by Sonu kumar](/content/@uniquesonu/components/modern-hero/index.html) - **Morhic Background** \\ by Hossain Jahed](/content/@easemize/components/morhic-background/index.html) - **Constellation Grid** \\ by daiv09](/content/@daiwiikharihar/components/constellation-grid/index.html) - **Hero with bg video** \\ by kurket21](/content/@kurket21/components/progressive-hero/index.html) - **manu** \\ by Vanessa](/content/@5d99hgrqzk-wq/components/manu/index.html) - **Hero with text and two button** \\ by Tommy Jepsen](/content/@tommyjepsen/components/hero-with-text-and-two-button/index.html) - **Integrations Component** \\ by Méschac Irung](/content/@meschacirung/components/integrations-component/integrations-5/index.html) - **3D Hero Section Boxes** \\ by Erik](/content/@aghasisahakyan1/components/3d-hero-section-boxes/index.html) - **Black Hole Hero Section** \\ by Yura Oak](/content/@yura/components/blackhole-hero-section/index.html) - **Modern Animated Hero Section** \\ by Sonu kumar](/content/@uniquesonu/components/modern-animated-hero-section/index.html) - **blue meshy background** \\ by reuno-ui](/content/@reuno-ui/components/blue-meshy-background/index.html) - **Arc Gallery Hero Component** \\ by Le Thanh](/content/@minhxthanh/components/arc-gallery-hero-component/index.html) - **Interactive Globe** \\ by Yad Hakim](/content/@dev.yadhakim/components/interactive-globe/index.html) - **Background Gradient Glow** \\ by meghtrix](/content/@meghtrix/components/background-gradient-glow/mint-glow-bg/index.html) - **Gradient Blur Bg** \\ by meghtrix](/content/@meghtrix/components/gradient-blur-bg/gird-blur-top-left/index.html) - **Background snippets** \\ by Julien Thibeaut](/content/@ibelick/components/background-snippets/background-radial-violet/index.html) - **Gradient Backgrounds** \\ by meghtrix](/content/@meghtrix/components/gradient-backgrounds/gradient-background-gray-top/index.html) - **Hero Section** \\ by Ravi Katiyar](/content/@ravikatiyar162/components/hero-section-9/index.html) - **Banner Ui** \\ by prebuiltui](/content/@prebuiltui/components/banner-ui/index.html) - **Iris Petal** \\ by Serafim](/content/@serafimcloud/components/iris-petal/index.html) - **Integrations Component** \\ by Méschac Irung](/content/@meschacirung/components/integrations-component/integrations-6/index.html) ## About hero components This collection gathers 603 hero components for React, the block visitors read first on a landing page. You'll find centered headline layouts, split copy-and-image designs, full-bleed background heroes, and animated variants with typing effects or gradient meshes. Some pair a call-to-action button with social proof; others lead with a product screenshot or a waitlist form. If you're searching for hero section templates or a specific hero section design, the variety here covers most marketing intros. Pick a text-forward hero when your message does the selling, and an image or demo layout when the product is visual. Every component ships full TSX with a live preview, so read the source before committing. Copy the code straight in, run the shadcn CLI with the component's registry URL, or pull it through the Magic MCP from Cursor or Claude Code. These are Tailwind-based and drop into any Next.js or React project. ## Frequently asked questions ### Are these hero section components free to use? ### How do I add a hero section to a Next.js app? ### Do these hero sections come with animations? ### Can I customize the layout and colors? ## Related components [Hero Section748](/content/community/components/s/hero-section/index.html) [Landing Page69](/content/community/components/s/landing-page/index.html) [Animation144](/content/community/components/s/animation/index.html) [Background365](/content/community/components/s/background/index.html) [Animated Hero29](/content/community/components/s/animated-hero/index.html) [Animated16](/content/community/components/s/animated/index.html)