Feature Blocks for Shadcn UI

155 Feature blocks built with Shadcn UI, Tailwind & React.

feature43

Free
import {
BatteryCharging,
GitPullRequest,
Layers,
RadioTower,
SquareKanban,
WandSparkles,
} from "lucide-react";
interface Reason {
title: string;
description: string;
icon: JSX.Element;
}
interface Feature43Props {
heading?: string;
reasons?: Reason[];
}
const Feature43 = ({
heading = "Why Work With Us?",
reasons = [
{
title: "Quality",
description:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe est aliquid exercitationem, quos explicabo repellat?",
icon: <GitPullRequest className="size-6" />,
},
{
title: "Experience",
description:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe est aliquid exercitationem, quos explicabo repellat?",
icon: <SquareKanban className="size-6" />,
},
{
title: "Support",
description:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe est aliquid exercitationem, quos explicabo repellat?",
icon: <RadioTower className="size-6" />,
},
{
title: "Innovation",
description:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe est aliquid exercitationem, quos explicabo repellat?",
icon: <WandSparkles className="size-6" />,
},
{
title: "Results",
description:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe est aliquid exercitationem, quos explicabo repellat?",
icon: <Layers className="size-6" />,
},
{
title: "Efficiency",
description:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe est aliquid exercitationem, quos explicabo repellat?",
icon: <BatteryCharging className="size-6" />,
},
],
}: Feature43Props) => {
return (
<section className="py-32">
<div className="container">
<div className="mb-10 md:mb-20">
<h2 className="mb-2 text-center text-3xl font-semibold lg:text-5xl">
{heading}
</h2>
</div>
<div className="grid gap-10 md:grid-cols-2 lg:grid-cols-3">
{reasons.map((reason, i) => (
<div key={i} className="flex flex-col">
<div className="mb-5 flex size-16 items-center justify-center rounded-full bg-accent">
{reason.icon}
</div>
<h3 className="mb-2 text-xl font-semibold">{reason.title}</h3>
<p className="text-muted-foreground">{reason.description}</p>
</div>
))}
</div>
</div>
</section>
);
};
export { Feature43 };

feature17

Free
import {
DollarSign,
MessagesSquare,
PersonStanding,
Timer,
Zap,
ZoomIn,
} from "lucide-react";
interface Feature {
title: string;
description: string;
icon: JSX.Element;
}
interface Feature17Props {
heading?: string;
subheading?: string;
features?: Feature[];
}
const Feature17 = ({
heading = "Our Core Features",
subheading = "Features",
features = [
{
title: "Performance",
description:
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt, accusantium quam. Temporibus quae quos deserunt!",
icon: <Timer className="size-4 md:size-6" />,
},
{
title: "Innovation",
description:
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt, accusantium quam. Temporibus quae quos deserunt!",
icon: <Zap className="size-4 md:size-6" />,
},
{
title: "Quality",
description:
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt, accusantium quam. Temporibus quae quos deserunt!",
icon: <ZoomIn className="size-4 md:size-6" />,
},
{
title: "Accessibility",
description:
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt, accusantium quam. Temporibus quae quos deserunt!",
icon: <PersonStanding className="size-4 md:size-6" />,
},
{
title: "Affordability",
description:
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt, accusantium quam. Temporibus quae quos deserunt!",
icon: <DollarSign className="size-4 md:size-6" />,
},
{
title: "Customer Support",
description:
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt, accusantium quam. Temporibus quae quos deserunt!",
icon: <MessagesSquare className="size-4 md:size-6" />,
},
],
}: Feature17Props) => {
return (
<section className="py-32">
<div className="container mx-auto max-w-screen-xl">
<p className="mb-4 text-xs text-muted-foreground md:pl-5">
{subheading}
</p>
<h2 className="text-3xl font-medium md:pl-5 lg:text-4xl">{heading}</h2>
<div className="mx-auto mt-14 grid gap-x-20 gap-y-8 md:grid-cols-2 md:gap-y-6 lg:mt-20">
{features.map((feature, idx) => (
<div className="flex gap-6 rounded-lg md:block md:p-5" key={idx}>
<span className="mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12">
{feature.icon}
</span>
<div>
<h3 className="font-medium md:mb-2 md:text-xl">
{feature.title}
</h3>
<p className="text-sm text-muted-foreground md:text-base">
{feature.description}
</p>
</div>
</div>
))}
</div>
</div>
</section>
);
};
export { Feature17 };

feature16

Basic

feature3

Basic

feature42

Basic

feature74

Basic

feature51

Basic

feature15

Basic

feature95

Pro

feature87

Pro

feature102

Pro

feature81

Pro

feature9

Pro

feature80

Pro

feature79

Pro

feature8

Pro

feature77

Pro

feature78

Pro

feature75

Pro

feature76

Pro

feature72

Free
import { ArrowRight } from "lucide-react";
interface Feature {
id: string;
title: string;
description: string;
image: string;
}
interface Feature72Props {
heading?: string;
description?: string;
linkUrl?: string;
linkText?: string;
features?: Feature[];
}
const Feature72 = ({
heading = "Powerful Features",
description = "Discover the powerful features that make our platform stand out from the rest. Built with the latest technology and designed for maximum productivity.",
linkUrl = "https://www.shadcnblocks.com",
linkText = "Book a demo",
features = [
{
id: "feature-1",
title: "Modern Design",
description:
"Clean and intuitive interface built with the latest design principles. Optimized for the best user experience.",
image: "https://www.shadcnblocks.com/images/block/placeholder-1.svg",
},
{
id: "feature-2",
title: "Responsive Layout",
description:
"Fully responsive design that works seamlessly across all devices and screen sizes. Perfect for any platform.",
image: "https://www.shadcnblocks.com/images/block/placeholder-2.svg",
},
{
id: "feature-3",
title: "Easy Integration",
description:
"Simple integration process with comprehensive documentation and dedicated support team.",
image: "https://www.shadcnblocks.com/images/block/placeholder-3.svg",
},
{
id: "feature-4",
title: "Advanced Analytics",
description:
"Powerful analytics tools to help you understand your users and make data-driven decisions.",
image: "https://www.shadcnblocks.com/images/block/placeholder-4.svg",
},
],
}: Feature72Props) => {
return (
<section className="py-32">
<div className="container flex flex-col gap-16 lg:px-16">
<div className="lg:max-w-sm">
<h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6">
{heading}
</h2>
<p className="mb-8 text-muted-foreground lg:text-lg">{description}</p>
<a
href={linkUrl}
className="group flex items-center text-xs font-medium md:text-base lg:text-lg"
>
{linkText}
<ArrowRight className="ml-2 size-4 transition-transform group-hover:translate-x-1" />
</a>
</div>
<div className="grid gap-6 md:grid-cols-2 lg:gap-8">
{features.map((feature) => (
<div
key={feature.id}
className="flex flex-col overflow-clip rounded-xl border border-border"
>
<div>
<img
src={feature.image}
alt={feature.title}
className="aspect-[16/9] h-full w-full object-cover object-center"
/>
</div>
<div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-2xl lg:mb-6">
{feature.title}
</h3>
<p className="text-muted-foreground lg:text-lg">
{feature.description}
</p>
</div>
</div>
))}
</div>
</div>
</section>
);
};
export { Feature72 };

feature73

Free
import { ArrowRight } from "lucide-react";
interface Feature {
id: string;
title: string;
description: string;
image: string;
}
interface Feature73Props {
heading?: string;
description?: string;
linkUrl?: string;
linkText?: string;
features?: Feature[];
}
const Feature73 = ({
heading = "Powerful Features",
description = "Discover the powerful features that make our platform stand out from the rest. Built with the latest technology and designed for maximum productivity.",
linkUrl = "https://www.shadcnblocks.com",
linkText = "Book a demo",
features = [
{
id: "feature-1",
title: "Modern Design",
description:
"Clean and intuitive interface built with the latest design principles. Optimized for the best user experience.",
image: "https://www.shadcnblocks.com/images/block/placeholder-1.svg",
},
{
id: "feature-2",
title: "Responsive Layout",
description:
"Fully responsive design that works seamlessly across all devices and screen sizes. Perfect for any platform.",
image: "https://www.shadcnblocks.com/images/block/placeholder-2.svg",
},
{
id: "feature-3",
title: "Easy Integration",
description:
"Simple integration process with comprehensive documentation and dedicated support team.",
image: "https://www.shadcnblocks.com/images/block/placeholder-3.svg",
},
],
}: Feature73Props) => {
return (
<section className="py-32">
<div className="container flex flex-col gap-16 lg:px-16">
<div className="lg:max-w-sm">
<h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6">
{heading}
</h2>
<p className="mb-8 text-muted-foreground lg:text-lg">{description}</p>
<a
href={linkUrl}
className="group flex items-center text-xs font-medium md:text-base lg:text-lg"
>
{linkText}
<ArrowRight className="ml-2 size-4 transition-transform group-hover:translate-x-1" />
</a>
</div>
<div className="grid gap-6 md:grid-cols-2 lg:gap-8">
{features[0] && (
<div className="flex flex-col overflow-clip rounded-xl border border-border md:col-span-2 md:grid md:grid-cols-2 md:gap-6 lg:gap-8">
<div className="md:min-h-[24rem] lg:min-h-[28rem] xl:min-h-[32rem]">
<img
src={features[0].image}
alt={features[0].title}
className="aspect-[16/9] h-full w-full object-cover object-center"
/>
</div>
<div className="flex flex-col justify-center px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-2xl lg:mb-6">
{features[0].title}
</h3>
<p className="text-muted-foreground lg:text-lg">
{features[0].description}
</p>
</div>
</div>
)}
{features.slice(1).map((feature) => (
<div
key={feature.id}
className="flex flex-col overflow-clip rounded-xl border border-border"
>
<div>
<img
src={feature.image}
alt={feature.title}
className="aspect-[16/9] h-full w-full object-cover object-center"
/>
</div>
<div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-2xl lg:mb-6">
{feature.title}
</h3>
<p className="text-muted-foreground lg:text-lg">
{feature.description}
</p>
</div>
</div>
))}
</div>
</div>
</section>
);
};
export { Feature73 };

feature71

Pro

feature70

Pro

feature69

Pro

feature7

Pro

feature68

Pro

feature67

Pro

feature66

Pro

feature64

Pro

feature63

Pro

feature62

Pro

feature61

Pro

feature60

Pro

feature6

Pro

feature58

Pro

feature59

Pro

feature57

Pro

feature56

Pro

feature54

Pro

feature55

Pro

feature52

Pro

feature53

Pro

feature5

Pro

feature50

Pro

feature44

Pro

feature4

Pro

feature41

Pro

feature38

Pro

feature39

Pro