Pricing section

Pro

Three-tier pricing with an animated monthly/yearly toggle, glowing featured plan and feature lists.

app/page.tsx

import { PricingSection } from "@/components/facade/pricing-section";

export default function Demo() {
  return <PricingSection />;
}

Installation

$npx shadcn@latest add @facade/pricing-section

Pro items install from the private @facade registry with your license key. Set it up once.

import { PricingSection } from "@/components/facade/pricing-section";

export default function Page() {
  return <PricingSection />;
}

PricingSectionProps is exported, so you can extend or wrap it. Every prop has a default; <PricingSection /> renders the example above.

With the Facade MCP server connected, this prompt is enough:

Add the Facade pricing section to this page and adapt the copy to our business.