proNew143 lines · framer-motion

Pricing Single Plan

One plan, nothing to compare it against. A single oversized pricing card for products with exactly one plan: a monthly/yearly toggle, a big animated price, and the full feature list laid out in two columns instead of a cramped single list.

Use it for: A product that genuinely has one plan (a tool, a template pack, a single-tier SaaS) where showing three tiers side by side would just invent fake differentiation.
Themes: Light + dark
License: Commercial use

Live

One plan

Everything, for one price

Loopkit Pro

No tiers to compare, no feature you have to upgrade to unlock.

$19/mo, billed yearly

Unlimited workspaces
Every component, free and pro
Install from the registry or copy the code
Both themes, out of the box

Priority email support
New blocks every release
Commercial use, no attribution
Cancel any time

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

export interface PricingSinglePlanProps {
  eyebrow?: string;
  title?: string;
  planName?: string;
  monthlyPrice?: string;
  yearlyPrice?: string;
  blurb?: string;
  features?: string[];
  ctaLabel?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→The monthly/yearly segmented toggle swaps the headline price with a small upward entrance animation, not an instant jump.
→Features are split evenly into two columns so a long list stays readable instead of running down one tall column.
→The price swap animation is skipped under prefers-reduced-motion; the new value appears immediately.

Accessibility

✓The billing toggle uses `aria-pressed` on both buttons so the current period is announced either way.
✓Each feature line has a checkmark icon plus text, never an icon-only row.
✓Honours prefers-reduced-motion.