Components
A fully responsive SaaS pricing section displaying multiple subscription tiers with features, pricing, and highlighted popular plans. Designed for clarity and conversion, this section makes it easy for users to compare plans and take action.
Loading preview...
import { PricingSection } from "@/components/ui/pricing-section";
export default function PricingDemo() {
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
{/* Hero Section */}
<div className="container mx-auto px-4 pt-16 pb-8">
<div className="text-center mb-12">
<h1 className="text-6xl font-bold text-balance mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
Animated SaaS Pricing
</h1>
<p className="text-xl text-gray-600 text-balance max-w-3xl mx-auto">
A production-ready, fully animated pricing section component built with React, TypeScript, and Tailwind CSS.
Features smooth transitions, hover effects, and responsive design.
</p>
</div>
{/* Feature Highlights */}
<div className="grid md:grid-cols-4 gap-6 mb-16 max-w-4xl mx-auto">
<div className="text-center p-4 rounded-lg bg-white/50 backdrop-blur-sm">
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-3">
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 className="font-semibold text-gray-900 mb-1">Smooth Animations</h3>
<p className="text-sm text-gray-600">Entrance animations and hover effects</p>
</div>
<div className="text-center p-4 rounded-lg bg-white/50 backdrop-blur-sm">
<div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-3">
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
/>
</svg>
</div>
<h3 className="font-semibold text-gray-900 mb-1">Fully Responsive</h3>
<p className="text-sm text-gray-600">Mobile-first design approach</p>
</div>
<div className="text-center p-4 rounded-lg bg-white/50 backdrop-blur-sm">
<div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-3">
<svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</div>
<h3 className="font-semibold text-gray-900 mb-1">Customizable</h3>
<p className="text-sm text-gray-600">Props-based configuration</p>
</div>
<div className="text-center p-4 rounded-lg bg-white/50 backdrop-blur-sm">
<div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-3">
<svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<h3 className="font-semibold text-gray-900 mb-1">Production Ready</h3>
<p className="text-sm text-gray-600">TypeScript and accessibility</p>
</div>
</div>
</div>
{/* Main Pricing Section */}
<PricingSection />
</div>
)
}