Feature Card

Features 80

About

Feature Card A versatile, theme-adaptive card component with built-in animations to showcase product features elegantly.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Feature Card to your project and fits it to your theme.

Code

How Feature Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// 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;