proNew137 lines · framer-motion
Pricing FAQ Split
The plan on one side, the objections on the other. A pricing section split into a sticky plan summary card and an accordion of the billing questions people actually ask right before they pay, so price and reassurance sit in the same glance.
- Use it for
- A single-plan or simple pricing page where a handful of billing FAQs (refunds, invoices, cancellation) would otherwise live far below the price and go unread.
- Themes
- Light + dark
- License
- Commercial use
Live
Pricing & questions
One price, a few things people ask
Loopkit Pro
$29/mo
Everything in the library, including every block we ship after you join.
- Every component, free and pro
- Unlimited projects
- Priority support
- Cancel any time
Yes, upgrade or downgrade at any time; the difference is prorated on your next invoice.
tsx
"use client";
import * as React from "react";
import { AnimatePresence, 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 FaqEntry {
question: string;
answer: string;
}
export interface PricingFaqSplitProps {
eyebrow?: string;
title?: string;
planName?: string;The rest is in Pro.
Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.
Get ProHow it behaves
- →The FAQ list is a single-open accordion: opening one question closes whichever was open, keeping the list scannable.
- →Each answer expands with a measured height animation rather than a hard cut, and collapses the same way.
- →The accordion's expand/collapse animation is skipped under prefers-reduced-motion; content still measures correctly either way.
Accessibility
- ✓Each question is a real `<h3><button aria-expanded aria-controls></button></h3>`, and each answer panel carries `role="region"` tied to it by id.
- ✓The plan card's checklist uses checkmark icon plus text, not colour-only cues.
- ✓Honours prefers-reduced-motion.