Components
PricingSection
This component is a responsive, theme-aware pricing section built using ShadCN UI and Tailwind CSS, ideal for modern SaaS or portfolio websites. It cleanly separates the core pricing cards and feature lists, allowing for visual clarity and modular customization. Each tab (Full Stack, Data Science, and AI Agents) displays two pricing options—one standard and one premium—styled with animated gradients, minimal black-and-white buttons, and a clean layout that adapts smoothly between dark and light themes. The features for each plan appear outside the card, creating a natural visual hierarchy and focus on the pricing structure. This design is easily reusable, configurable, and consistent across devices, emphasizing a professional, polished, and conversion-oriented presentation.
Loading preview...
import { PricingSection } from "@/components/ui/pricing-section-3";
export default function PricingDemoPage() {
return (
<main className="min-h-screen bg-black text-white">
<PricingSection />
</main>
);
}