Changeable Pricing Section

Renders a pricing selector with toggle for monthly or yearly billing. Displays plans with features and allows selection. Animations transition smoothly between states. Use for SaaS checkout flows where users need to compare plans.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/changeable-pricing-section

npx layro-cli add @watermeloncorp/changeable-pricing-section

npx layro-cli add @watermeloncorp/changeable-pricing-section

bunx layro-cli add @watermeloncorp/changeable-pricing-section

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Check, Info } from "lucide-react";

export type PlanId = string;

export interface Feature {
  text: string;
  hasInfo?: boolean;
}

export interface Plan {
  id: PlanId;
  name: string;