Pricing Table

Pricing 3

About

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.

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

Code

How Pricing Table 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 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;