155 Feature blocks built with Shadcn UI, Tailwind & React.
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 };
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 };
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><ahref={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) => (<divkey={feature.id}className="flex flex-col overflow-clip rounded-xl border border-border"><div><imgsrc={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 };
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><ahref={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]"><imgsrc={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) => (<divkey={feature.id}className="flex flex-col overflow-clip rounded-xl border border-border"><div><imgsrc={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 };