Components
Loading preview...
Feature Card A versatile, theme-adaptive card component with built-in animations to showcase product features elegantly.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/feature-card// demo.tsx
import React from "react";
import { FeatureCard } from "@/components/ui/feature-card"; // Adjust the import path
// Helper component for the demo: Progress Item
const SavingsPlanItem = ({
icon,
title,
members,
progress,
amount,
target,
daysLeft,
}: {
icon: string;
title: string;
members: number;
progress: number;
amount: number;
target: number;
daysLeft?: number;
}) => (
<div className="mb-4 flex items-center gap-4 last:mb-0">
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted">
{/* In a real app, you'd use an Image component */}
<img src={icon} alt={title} className="h-6 w-6" />
</div>
<div className="flex-1">
<div className="flex justify-between">
<p className="font-medium text-card-foreground">{title}</p>
<p className="text-sm font-semibold text-card-foreground">{progress}%</p>
</div>
<div className="mt-1 h-2 w-full overflow-hidden rounded-full bg-muted">
<div
className="h-full bg-primary"
style={{ width: `${progress}%` }}
/>
</div>
<div className="mt-1 flex justify-between text-xs text-muted-foreground">
<span>${amount.toLocaleString()} of ${target.toLocaleString()}</span>
{daysLeft && <span>{daysLeft} days left</span>}
<span>{members} members</span>
</div>
</div>
</div>
);
// The main demo component
const FeatureCardDemo = () => {
return (
<div className="w-full max-w-4xl p-4 md:p-8">
<FeatureCard
title="Multiple Savings Plan"
description="Nest offers a variety of savings plans, from Flexible to Target Savings, to make sure you can save for what matters most, your way."
>
<div className="flex flex-col space-y-4">
<SavingsPlanItem
icon="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-YimA3sxsT00vWqiUyzyLUshxsSZvll.png&w=320&q=75"
title="Birthday"
progress={63}
amount={25200}
target={40200}
members={200}
/>
<SavingsPlanItem
icon="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-iZKfmUSHuQtDn1W2NBIwoLZ0epsnzZ.png&w=320&q=75"
title="Graduation"
progress={63}
amount={3500}
target={45000}
members={200}
/>
<SavingsPlanItem
icon="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-CYiGxD8xsd3dQiAxNDGC5vDunvHJ4P.png&w=320&q=75"
title="NYSC"
progress={86}
amount={38000}
target={42000}
members={200}
daysLeft={28}
/>
</div>
</FeatureCard>
</div>
);
};
export default FeatureCardDemo;