3D Pricing - Animated SaaS Pricing Table

Pricing

About

A stunning 3D animated pricing table featuring floating glassmorphism cards, interactive billing toggle, dynamic price transitions, glowing gradient borders, and smooth hover effects. Fully responsive and built with React and Tailwind CSS.

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

Code

How 3D Pricing - Animated SaaS Pricing Table is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// This is a file with a demo for your component
// That's what users will see in the preview
// Create new files in this directory to add more demos

import { AetherPricing } from "@/components/ui/3d-pricing-animated-saa-s-pricing-table";
import type { BillingOption, PricingPlan } from "@/components/ui/3d-pricing-animated-saa-s-pricing-table";

// Every price, feature and button label below is passed in as a prop.
// Yearly prices are the monthly price times 12, minus 25%.
const plans: PricingPlan[] = [
  {
    id: "starter",
    name: "Starter",
    description: "Everything you need to get started.",
    monthlyPrice: 19,
    yearlyPrice: 171,
    features: ["5 Projects", "Basic Analytics", "10GB Storage", "Email Support", "Standard Integrations"],
    buttonText: "Get started",
  },
  {
    id: "pro",
    name: "Pro",
    description: "Advanced tools for ambitious creators.",
    monthlyPrice: 49,
    yearlyPrice: 441,
    popular: true,
    features: [
      "Unlimited Projects",
      "Advanced Analytics",
      "100GB Storage",
      "Priority Support",
      "Premium Integrations",
      "Team Collaboration",
      "Custom Workflows",
    ],
    buttonText: "Upgrade to Pro",
  },
  {
    id: "business",
    name: "Business",
    description: "Powerful tools for growing businesses.",
    monthlyPrice: 99,
    yearlyPrice: 891,
    features: [
      "Everything in Pro",
      "Unlimited Storage",
      "Dedicated Support",
      "Advanced Permissions",
      "Custom API Access",
      "Enterprise Security",
      "Team Management",
    ],
    buttonText: "Contact sales",
  },
];

const billingOptions: BillingOption[] = [
  { value: "monthly", label: "Monthly" },
  { value: "yearly", label: "Yearly", badge: "Save 25%" },
];

// ONLY DEFAULT EXPORT WILL BE TREATED AS A DEMO
export default function DemoOne() {
  return (
    <AetherPricing
      plans={plans}
      eyebrow="Pricing plans"
      title="Simple pricing. Extraordinary possibilities."
      description="Choose the perfect plan to unlock your next level of productivity."
      currency="$"
      defaultBilling="monthly"
      billingOptions={billingOptions}
      highlightedPlan="pro"
      showBillingToggle
      showPopularBadge
      enable3DTilt
      enableAnimations
      onSelectPlan={(plan, billing) => console.log(`Selected ${plan.name} (${billing})`)}
    />
  );
}