Components
Pricing Card Component This component is designed to be highly reusable and customizable. You can control all its content through props, including the plan name, features list (with optional tooltips), pricing, and call-to-action text. The 3D tilt effect is self-contained and works out of the box.
Loading preview...
import { PricingCard } from "@/components/ui/pricing-card-3";
const PricingCardDemo = () => {
const businessFeatures = [
{ name: "Real-Time Market Data", included: true },
{
name: "Advanced Charting Tools",
included: true,
description: "Access customizable timeframes, technical indicators, and historical data to uncover actionable insights."
},
{ name: "On-Chain Analysis", included: true },
{ name: "API Access", included: true },
];
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
<PricingCard
planName="Business"
planDescription="Billed yearly"
price={29}
priceFrequency=" per user / month"
features={businessFeatures}
ctaText="Upgrade to Business"
isPopular={true}
/>
</div>
);
};
export default PricingCardDemo;