Hero Blocks for Shadcn UI

102 Hero blocks built with Shadcn UI, Tailwind & React.

hero1

Free
import { ArrowRight, ArrowUpRight } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
interface Hero1Props {
badge?: string;
heading: string;
description: string;
buttons?: {
primary?: {
text: string;
url: string;
};
secondary?: {
text: string;
url: string;
};
};
image: {
src: string;
alt: string;
};
}
const Hero1 = ({
badge = "✨ Your Website Builder",
heading = "Blocks Built With Shadcn & Tailwind",
description = "Finely crafted components built with React, Tailwind and Shadcn UI. Developers can copy and paste these blocks directly into their project.",
buttons = {
primary: {
text: "Discover all components",
url: "https://www.shadcnblocks.com",
},
secondary: {
text: "View on GitHub",
url: "https://www.shadcnblocks.com",
},
},
image = {
src: "https://www.shadcnblocks.com/images/block/placeholder-1.svg",
alt: "Hero section demo image showing interface components",
},
}: Hero1Props) => {
return (
<section className="py-32">
<div className="container">
<div className="grid items-center gap-8 lg:grid-cols-2">
<div className="flex flex-col items-center text-center lg:items-start lg:text-left">
{badge && (
<Badge variant="outline">
{badge}
<ArrowUpRight className="ml-2 size-4" />
</Badge>
)}
<h1 className="my-6 text-pretty text-4xl font-bold lg:text-6xl">
{heading}
</h1>
<p className="mb-8 max-w-xl text-muted-foreground lg:text-xl">
{description}
</p>
<div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
{buttons.primary && (
<Button asChild className="w-full sm:w-auto">
<a href={buttons.primary.url}>{buttons.primary.text}</a>
</Button>
)}
{buttons.secondary && (
<Button asChild variant="outline" className="w-full sm:w-auto">
<a href={buttons.secondary.url}>
{buttons.secondary.text}
<ArrowRight className="size-4" />
</a>
</Button>
)}
</div>
</div>
<img
src={image.src}
alt={image.alt}
className="max-h-96 w-full rounded-md object-cover"
/>
</div>
</div>
</section>
);
};
export { Hero1 };

hero7

Free
import { Star } from "lucide-react";
import React from "react";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
interface Hero7Props {
heading?: string;
description?: string;
button?: {
text: string;
url: string;
};
reviews?: {
count: number;
avatars: {
src: string;
alt: string;
}[];
};
}
const Hero7 = ({
heading = "A Collection of Components Built With Shadcn & Tailwind",
description = "Finely crafted components built with React, Tailwind and Shadcn UI. Developers can copy and paste these blocks directly into their project.",
button = {
text: "Discover all components",
url: "https://www.shadcnblocks.com",
},
reviews = {
count: 200,
avatars: [
{
src: "https://www.shadcnblocks.com/images/block/avatar-1.webp",
alt: "Avatar 1",
},
{
src: "https://www.shadcnblocks.com/images/block/avatar-2.webp",
alt: "Avatar 2",
},
{
src: "https://www.shadcnblocks.com/images/block/avatar-3.webp",
alt: "Avatar 3",
},
{
src: "https://www.shadcnblocks.com/images/block/avatar-4.webp",
alt: "Avatar 4",
},
{
src: "https://www.shadcnblocks.com/images/block/avatar-5.webp",
alt: "Avatar 5",
},
],
},
}: Hero7Props) => {
return (
<section className="py-32">
<div className="container text-center">
<div className="mx-auto flex max-w-screen-lg flex-col gap-6">
<h1 className="text-3xl font-extrabold lg:text-6xl">{heading}</h1>
<p className="text-balance text-muted-foreground lg:text-lg">
{description}
</p>
</div>
<Button asChild size="lg" className="mt-10">
<a href={button.url}>{button.text}</a>
</Button>
<div className="mx-auto mt-10 flex w-fit flex-col items-center gap-4 sm:flex-row">
<span className="mx-4 inline-flex items-center -space-x-4">
{reviews.avatars.map((avatar, index) => (
<Avatar key={index} className="size-14 border">
<AvatarImage src={avatar.src} alt={avatar.alt} />
</Avatar>
))}
</span>
<div>
<div className="flex items-center gap-1">
{[...Array(5)].map((_, index) => (
<Star
key={index}
className="size-5 fill-yellow-400 text-yellow-400"
/>
))}
</div>
<p className="text-left font-medium text-muted-foreground">
from {reviews.count}+ reviews
</p>
</div>
</div>
</div>
</section>
);
};
export { Hero7 };

hero12

Basic

hero32

Free
import { Button } from "@/components/ui/button";
interface Integration {
id: string;
icon: JSX.Element;
}
interface Hero32Props {
heading?: string;
description?: string;
button?: {
text: string;
url: string;
};
integrations?: Integration[][];
}
const Hero32 = ({
heading = "Blocks Built With Shadcn & Tailwind",
description = "Fully decomposable components, all the images and background patterns are individual images or svgs that can be replaced.",
button = {
text: "Discover all components",
url: "https://www.shadcnblocks.com",
},
integrations = [
[
{
id: "integration-1",
icon: (
<img
alt="Integration"
src="https://www.shadcnblocks.com/images/block/block-1.svg"
/>
),
},
{
id: "integration-2",
icon: (
<img
alt="Integration"
src="https://www.shadcnblocks.com/images/block/block-2.svg"
/>
),
},
{
id: "integration-3",
icon: (
<img
alt="Integration"
src="https://www.shadcnblocks.com/images/block/block-3.svg"
/>
),
},
{
id: "integration-4",
icon: (
<img
alt="Integration"
src="https://www.shadcnblocks.com/images/block/block-4.svg"
/>
),
},
{
id: "integration-5",
icon: (
<img
alt="Integration"
src="https://www.shadcnblocks.com/images/block/block-5.svg"
/>
),
},
],
[
{
id: "integration-6",
icon: (
<img
alt="Integration"
src="https://www.shadcnblocks.com/images/block/block-6.svg"
/>
),
},
{
id: "integration-7",
icon: (
<img
alt="Integration"
src="https://www.shadcnblocks.com/images/block/block-1.svg"
/>
),
},
{
id: "integration-8",
icon: (
<img
alt="Integration"
src="https://www.shadcnblocks.com/images/block/block-2.svg"
/>
),
},
{
id: "integration-9",
icon: (
<img
alt="Integration"
src="https://www.shadcnblocks.com/images/block/block-3.svg"
/>
),
},
{
id: "integration-10",
icon: (
<img
alt="Integration"
src="https://www.shadcnblocks.com/images/block/block-4.svg"
/>
),
},
],
[
{
id: "integration-11",
icon: (
<img
alt="Integration"
src="https://www.shadcnblocks.com/images/block/block-5.svg"
/>
),
},
{
id: "integration-12",
icon: (
<img
alt="Integration"
src="https://www.shadcnblocks.com/images/block/block-6.svg"
/>
),
},
{
id: "integration-13",
icon: (
<img
alt="Integration"
src="https://www.shadcnblocks.com/images/block/block-1.svg"
/>
),
},
{
id: "integration-14",
icon: (
<img
alt="Integration"
src="https://www.shadcnblocks.com/images/block/block-2.svg"
/>
),
},
{
id: "integration-15",
icon: (
<img
alt="Integration"
src="https://www.shadcnblocks.com/images/block/block-3.svg"
/>
),
},
],
],
}: Hero32Props) => {
return (
<section className="relative overflow-hidden">
<div className="absolute inset-0 overflow-hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1400 600"
className="min-h-full min-w-full"
>
<defs>
<pattern
id="grid"
width="24"
height="24"
patternUnits="userSpaceOnUse"
>
<path
d="M 24 0 L 0 0 0 24"
fill="none"
stroke="hsl(var(--muted))"
strokeWidth="1"
strokeOpacity={0.5}
/>
</pattern>
</defs>
<rect width="1400" height="600" fill="url(#grid)" />
</svg>
</div>
<div className="relative">
<div className="absolute left-0 z-10 hidden h-full w-1/2 bg-[linear-gradient(to_right,hsl(var(--background))_85%,transparent_100%)] md:block"></div>
<div className="md:-space-x-26 container relative flex flex-col items-start md:flex-row md:items-center">
<div className="z-20 -mx-[calc(theme(container.padding))] w-[calc(100%+2*theme(container.padding))] shrink-0 bg-background px-[calc(theme(container.padding))] pt-32 md:w-1/2 md:bg-transparent md:pb-32">
<div className="flex flex-col items-start text-left">
<div className="max-w-sm">
<h1 className="my-6 text-pretty text-4xl font-bold lg:text-6xl">
{heading}
</h1>
<p className="text-muted-foreground">{description}</p>
<Button asChild size="lg" className="mt-10">
<a href={button.url}>{button.text}</a>
</Button>
</div>
</div>
</div>
<div>
<div className="flex flex-col gap-16 pb-8 pt-12 md:py-32">
{integrations.map((line, i) => (
<div key={i} className="flex gap-x-24 odd:-translate-x-24">
{line.map((integration) => (
<div
key={integration.id}
className="size-24 rounded-xl border border-background bg-background shadow-xl"
>
<div className="h-full w-full bg-muted/20 p-4">
{integration.icon}
</div>
</div>
))}
</div>
))}
</div>
</div>
</div>
</div>
</section>
);
};
export { Hero32 };

hero8

Basic

hero34

Basic

hero10

Pro

hero24

Pro

hero25

Pro

hero26

Pro

hero5

Pro

hero6

Pro

hero9

Pro

hero39

Pro

hero4

Pro

hero40

Pro

hero35

Pro

hero36

Pro

hero37

Pro

hero33

Pro

hero31

Pro

hero3

Free
import { ArrowDownRight, Star } from "lucide-react";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
interface Hero3Props {
heading?: string;
description?: string;
buttons?: {
primary?: {
text: string;
url: string;
};
secondary?: {
text: string;
url: string;
};
};
reviews?: {
count: number;
avatars: {
src: string;
alt: string;
}[];
};
}
const Hero3 = ({
heading = "Blocks built with Shadcn & Tailwind",
description = "Finely crafted components built with React, Tailwind and Shadcn UI. Developers can copy and paste these blocks directly into their project.",
buttons = {
primary: {
text: "Sign Up",
url: "https://www.shadcnblocks.com",
},
secondary: {
text: "Get Started",
url: "https://www.shadcnblocks.com",
},
},
reviews = {
count: 200,
avatars: [
{
src: "https://www.shadcnblocks.com/images/block/avatar-1.webp",
alt: "Avatar 1",
},
{
src: "https://www.shadcnblocks.com/images/block/avatar-2.webp",
alt: "Avatar 2",
},
{
src: "https://www.shadcnblocks.com/images/block/avatar-3.webp",
alt: "Avatar 3",
},
{
src: "https://www.shadcnblocks.com/images/block/avatar-4.webp",
alt: "Avatar 4",
},
{
src: "https://www.shadcnblocks.com/images/block/avatar-5.webp",
alt: "Avatar 5",
},
],
},
}: Hero3Props) => {
return (
<section className="py-32">
<div className="container grid items-center gap-10 lg:grid-cols-2 lg:gap-20">
<div className="mx-auto flex flex-col items-center text-center md:ml-auto lg:max-w-3xl lg:items-start lg:text-left">
<h1 className="my-6 text-pretty text-4xl font-bold lg:text-6xl xl:text-7xl">
{heading}
</h1>
<p className="mb-8 max-w-xl text-muted-foreground lg:text-xl">
{description}
</p>
<div className="mb-12 flex w-fit flex-col items-center gap-4 sm:flex-row">
<span className="inline-flex items-center -space-x-4">
{reviews.avatars.map((avatar, index) => (
<Avatar key={index} className="size-12 border">
<AvatarImage src={avatar.src} alt={avatar.alt} />
</Avatar>
))}
</span>
<div>
<div className="flex items-center gap-1">
{[...Array(5)].map((_, index) => (
<Star
key={index}
className="size-5 fill-yellow-400 text-yellow-400"
/>
))}
</div>
<p className="text-left font-medium text-muted-foreground">
from {reviews.count}+ reviews
</p>
</div>
</div>
<div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
{buttons.primary && (
<Button asChild className="w-full sm:w-auto">
<a href={buttons.primary.url}>{buttons.primary.text}</a>
</Button>
)}
{buttons.secondary && (
<Button asChild variant="outline" className="w-full sm:w-auto">
<a href={buttons.secondary.url}>
{buttons.secondary.text}
<ArrowDownRight className="ml-2 size-4" />
</a>
</Button>
)}
</div>
</div>
<div className="flex bg-muted">
<img
src="https://www.shadcnblocks.com/images/block/placeholder-1.svg"
alt="placeholder hero"
className="max-h-[600px] w-full rounded-md object-cover lg:max-h-[800px]"
/>
</div>
</div>
</section>
);
};
export { Hero3 };

hero30

Pro

hero28

Pro

hero29

Pro

hero21

Pro

hero2

Pro

hero20

Pro

hero16

Pro

hero18

Pro

hero14

Pro

hero15

Pro

hero13

Pro

hero11

Pro

hero125

Pro

hero172

Pro

hero171

Pro

hero151

Free
import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
interface Testimonial {
quote: string;
author: string;
role: string;
company: string;
avatars: Array<{
image: string;
fallback: string;
}>;
}
interface Hero151Props {
heading?: string;
description?: string;
button?: {
text: string;
url: string;
};
testimonial?: Testimonial;
images: {
first: string;
second: string;
third: string;
fourth: string;
};
}
const Hero151 = ({
heading = "Blocks built with Shadcn & Tailwind",
description = "Finely crafted components built with React, Tailwind and Shadcn UI. Developers can copy and paste these blocks directly into their project.",
button = {
text: "Get Started",
url: "#",
},
testimonial = {
quote: "Focused strategy, swift delivery",
author: "John Doe",
role: "CEO",
company: "Company",
avatars: [
{ image: "https://shadcnblocks.com/images/block/avatar-1.webp", fallback: "AB" },
{ image: "https://shadcnblocks.com/images/block/avatar-2.webp", fallback: "CD" },
{ image: "https://shadcnblocks.com/images/block/avatar-3.webp", fallback: "EF" },
],
},
images = {
first: "https://shadcnblocks.com/images/block/placeholder-1.svg",
second: "https://shadcnblocks.com/images/block/placeholder-dark-2.svg",
third: "https://shadcnblocks.com/images/block/placeholder-dark-3.svg",
fourth: "https://shadcnblocks.com/images/block/placeholder-dark-7-tall.svg",
},
}: Hero151Props) => {
return (
<section className="py-12 md:py-20">
<div className="container">
<div className="flex flex-col items-center gap-8 md:flex-row">
<div className="flex-1">
<div className="flex flex-col gap-4 lg:gap-8">
<h1 className="max-w-[80%] text-4xl font-semibold leading-tight text-foreground lg:text-5xl xl:text-7xl">
{heading}
</h1>
<p className="text-lg leading-relaxed text-muted-foreground xl:text-2xl">
{description}
</p>
</div>
<div className="my-6 lg:my-10">
<Button asChild size="lg">
<a href={button.url}>{button.text}</a>
</Button>
</div>
<div className="flex flex-wrap items-center gap-3">
<div className="relative flex -space-x-[1.5rem]">
{testimonial.avatars.map((avatar, index) => (
<Avatar
key={index}
className={`relative z-${index + 1}0 flex h-12 w-12 flex-shrink-0 rounded-full border-2 border-white object-cover`}
>
<AvatarImage src={avatar.image} alt="" />
<AvatarFallback>{avatar.fallback}</AvatarFallback>
</Avatar>
))}
</div>
<div>
<p className="mb-1 text-sm italic text-muted2-foreground">
&quot;{testimonial.quote}&quot;
</p>
<p className="text-sm font-medium text-muted2-foreground">
{testimonial.author}, {testimonial.role} @
{testimonial.company}
</p>
</div>
</div>
</div>
<div className="w-full flex-1">
<div className="w-full max-w-[50rem]">
<AspectRatio ratio={1 / 1} className="h-full w-full">
<div className="grid h-full w-full grid-cols-2 grid-rows-2 gap-[3.5%]">
<div className="overflow-hidden rounded-[5.2%] border border-muted bg-muted">
<img
src={images.first}
alt=""
className="object-fit h-full w-full object-center"
/>
</div>
<div className="relative overflow-hidden rounded-[5.2%] border border-muted bg-muted">
<div className="absolute left-[5%] top-1/2 w-[110%] max-w-[25rem] -translate-y-1/2 overflow-hidden rounded-md">
<AspectRatio ratio={1.739130435 / 1}>
<img
src={images.second}
alt=""
className="size-full object-cover object-center"
/>
</AspectRatio>
</div>
</div>
<div className="relative overflow-hidden rounded-[5.2%] border border-muted bg-muted">
<div className="absolute left-[9%] top-[9%] w-[200%] max-w-[37.5rem] overflow-hidden rounded-md">
<AspectRatio ratio={1.6 / 1}>
<img
src={images.third}
alt=""
className="size-full object-cover object-center"
/>
</AspectRatio>
</div>
</div>
<div className="relative overflow-hidden rounded-[5.2%] border border-muted bg-muted">
<div className="relative left-[50%] top-[12%] w-[70%] max-w-[17.5rem] -translate-x-[50%]">
<AspectRatio ratio={0.52 / 1}>
<img
src="https://shadcnblocks.com/images/block/mockups/phone-1.png"
alt=""
className="absolute z-20 w-full"
/>
<img
src={images.fourth}
alt=""
className="absolute z-10 w-full rounded-[16%]"
/>
</AspectRatio>
</div>
</div>
</div>
</AspectRatio>
</div>
</div>
</div>
</div>
</section>
);
};
export {