Monthly/Yearly Toggle

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/pricing/pricing2.tsx instead.

Usage

The file also exports pricing2Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Pricing2, pricing2Demo } from "@/components/blocks/pricing/pricing2";

export default function Page() {
  return <Pricing2 {...pricing2Demo} />;
}

Props

Types

type PricingTier = {
  name: string;
  description: string;
  monthlyPrice: string;
  yearlyPrice: string;
  period: string;
  features: string[];
  cta: { label: string; href?: string };
  highlighted?: boolean;
  badgeLabel?: string;
};

Behavior notes

• The toggle is real client-side state (useState): clicking it switches every tier's displayed price between monthlyPrice and yearlyPrice, both supplied per-tier via props, not hardcoded in the component.
• The toggle is a real role="switch" element with aria-checked reflecting the current billing period, plus visible "Monthly"/"Yearly" text labels that bold to indicate the active state.
• The yearlyDiscountLabel badge is always rendered when supplied but dims to 60% opacity while monthly is selected, then goes full opacity once yearly is selected, to draw attention to the switch.
• The highlighted tier gets a primary border, subtle shadow, and a slight scale-up on large screens, independent of which billing period is selected.
• All CTA buttons are inert placeholders with href="#", no real checkout or navigation wired up.