Components
Loading preview...
Here is Feature Sections component
@prebuiltui
npx shadcn@latest add https://21st.dev/r/prebuiltui/feature-sectionsconst App = () => {
const featuresData = [
{
icon: (
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
viewBox="0 0 24 24" fill="none" stroke="currentColor"
strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"
className="text-purple-600 dark:text-purple-500 size-8 mt-4" aria-hidden="true">
<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" />
</svg>
),
title: "Lightning-fast setup",
description: "Launch production-ready pages in minutes with prebuilt components.",
},
{
icon: (
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
viewBox="0 0 24 24" fill="none" stroke="currentColor"
strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"
className="text-purple-600 dark:text-purple-500 size-8 mt-4" aria-hidden="true">
<path d="M7 10v12" />
<path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" />
</svg>
),
title: "Pixel perfect",
description: "Modern Figma-driven UI that translates to exact code.",
},
{
icon: (
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
viewBox="0 0 24 24" fill="none" stroke="currentColor"
strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"
className="text-purple-600 dark:text-purple-500 size-8 mt-4" aria-hidden="true">
<path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" />
<rect x="3" y="14" width="7" height="7" rx="1" />
<circle cx="17.5" cy="17.5" r="3.5" />
</svg>
),
title: "Highly customizable",
description: "Tailwind utility-first classes make customization trivial.",
},
];
return (
<section className="w-full py-12">
{/* Header */}
<div className="text-center">
<p className="font-medium text-purple-700 dark:text-purple-400 px-10 py-1.5 rounded-full
bg-purple-100 dark:bg-purple-950 border border-purple-300 dark:border-purple-800
w-max mx-auto">
Features
</p>
<h2 className="text-3xl font-semibold mt-4 text-slate-900 dark:text-white">
Built for builders
</h2>
<p className="mt-2 text-slate-600 dark:text-slate-300 max-w-xl mx-auto">
Components, patterns and pages — everything you need to ship.
</p>
</div>
{/* Cards */}
<div className="mt-10 px-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-4 place-items-center">
{featuresData.map((feature, index) => (
<div
key={index}
className={`hover:-translate-y-0.5 transition duration-300 ${
index === 1
? "p-px rounded-[13px] bg-gradient-to-br from-[#A46BFF] to-[#33507C] dark:from-[#9544FF] dark:to-[#223B60]"
: ""
}`}
>
<div className="p-6 rounded-xl space-y-4
border border-slate-200 dark:border-slate-800
bg-white dark:bg-slate-950
text-slate-900 dark:text-white
w-80 max-w-sm">
{feature.icon}
<h3 className="text-base font-medium">{feature.title}</h3>
<p className="text-slate-600 dark:text-slate-400 line-clamp-2 pb-4">
{feature.description}
</p>
</div>
</div>
))}
</div>
</section>
);
};
export default App;