Components
Pricing Table A responsive pricing table component designed to showcase multiple subscription tiers. It features options for highlighting specific plans, adding a "most popular" badge, and includes smooth entrance animations for a modern user experience.
Loading preview...
// demo.tsx
import React from 'react';
import PricingTable, { Plan } from '@/components/ui/pricing-table';
import { Rocket, Zap, Gem, Crown } from 'lucide-react';
const Demo = () => {
// Define the pricing plans data array
const plans: Plan[] = [
{
tier: 'Starter',
title: 'Monthly Plan',
price: '€34.90',
period: '/month',
description: 'Perfect for individuals exploring tools and strategies short-term.',
features: [
'Access to +150,000 instruments',
'Up-to-date Fair Value and Ratios',
'Seasonality and COT Reports',
'Stock Screener and Rankings',
'Insider Transactions',
'Key events on all Companies',
'Forecaster AI Agent',
'Cancel at Anytime',
],
primaryCta: { text: 'Log In & Subscribe' },
secondaryCta: 'No savings',
icon: <Rocket className="w-5 h-5" />,
},
{
tier: 'Intermediate',
title: 'Quarterly Plan',
price: '€84.90',
period: '/3 months',
description: 'Perfect for committed traders seeking consistent market analysis.',
features: ['All features in the Monthly Plan'],
primaryCta: { text: 'Log In & Subscribe' },
secondaryCta: 'Save € 79.2 annually',
icon: <Zap className="w-5 h-5" />,
},
{
tier: 'Financial Visionary',
title: 'Yearly Plan',
price: '€269',
period: '/year',
description: 'Includes exclusive courses and monthly webinars for ambitious professionals.',
features: [
'All features in the Monthly Plan',
'Exclusive Courses',
'Exclusive Monthly Webinar',
],
primaryCta: { text: 'Log In & Subscribe' },
secondaryCta: 'Save € 149.8 annually',
icon: <Gem className="w-5 h-5" />,
highlighted: true,
},
{
tier: 'Elite Member',
title: 'Infinity Plan',
price: '€4999',
period: '/once',
description: 'Unlimited access to all tools, plus exclusive webinars and courses.',
features: [
'All features in the Monthly Plan',
'Unlimited Access to All the tools',
'Lifetime Updates',
'Exclusive Webinars & Masterclasses',
'"Elite Member" Badge',
'"Pioneer" rosette',
'Official Forecaster Swiss Army Knife',
'Transferable to a family member or trusted person, ensuring continuity',
],
primaryCta: { text: 'Contact Our Team' },
secondaryCta: 'Most exclusive plan',
icon: <Crown className="w-5 h-5" />,
highlighted: true,
isMostPopular: true,
},
];
return (
<div className="bg-background min-h-screen">
<PricingTable plans={plans} />
</div>
);
};
export default Demo;