102 Hero blocks built with Shadcn UI, Tailwind & React.
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><imgsrc={image.src}alt={image.alt}className="max-h-96 w-full rounded-md object-cover"/></div></div></section>);};export { Hero1 };
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) => (<Starkey={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 };
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: (<imgalt="Integration"src="https://www.shadcnblocks.com/images/block/block-1.svg"/>),},{id: "integration-2",icon: (<imgalt="Integration"src="https://www.shadcnblocks.com/images/block/block-2.svg"/>),},{id: "integration-3",icon: (<imgalt="Integration"src="https://www.shadcnblocks.com/images/block/block-3.svg"/>),},{id: "integration-4",icon: (<imgalt="Integration"src="https://www.shadcnblocks.com/images/block/block-4.svg"/>),},{id: "integration-5",icon: (<imgalt="Integration"src="https://www.shadcnblocks.com/images/block/block-5.svg"/>),},],[{id: "integration-6",icon: (<imgalt="Integration"src="https://www.shadcnblocks.com/images/block/block-6.svg"/>),},{id: "integration-7",icon: (<imgalt="Integration"src="https://www.shadcnblocks.com/images/block/block-1.svg"/>),},{id: "integration-8",icon: (<imgalt="Integration"src="https://www.shadcnblocks.com/images/block/block-2.svg"/>),},{id: "integration-9",icon: (<imgalt="Integration"src="https://www.shadcnblocks.com/images/block/block-3.svg"/>),},{id: "integration-10",icon: (<imgalt="Integration"src="https://www.shadcnblocks.com/images/block/block-4.svg"/>),},],[{id: "integration-11",icon: (<imgalt="Integration"src="https://www.shadcnblocks.com/images/block/block-5.svg"/>),},{id: "integration-12",icon: (<imgalt="Integration"src="https://www.shadcnblocks.com/images/block/block-6.svg"/>),},{id: "integration-13",icon: (<imgalt="Integration"src="https://www.shadcnblocks.com/images/block/block-1.svg"/>),},{id: "integration-14",icon: (<imgalt="Integration"src="https://www.shadcnblocks.com/images/block/block-2.svg"/>),},{id: "integration-15",icon: (<imgalt="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"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 1400 600"className="min-h-full min-w-full"><defs><patternid="grid"width="24"height="24"patternUnits="userSpaceOnUse"><pathd="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) => (<divkey={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 };
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) => (<Starkey={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"><imgsrc="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 };
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) => (<Avatarkey={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">"{testimonial.quote}"</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"><imgsrc={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}><imgsrc={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}><imgsrc={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}><imgsrc="https://shadcnblocks.com/images/block/mockups/phone-1.png"alt=""className="absolute z-20 w-full"/><imgsrc={images.fourth}alt=""className="absolute z-10 w-full rounded-[16%]"/></AspectRatio></div></div></div></AspectRatio></div></div></div></div></section>);};export {