Radio Pricing

Vertical plan selector with radio buttons. Selected plan expands to show features. Single-column layout perfect for checkout flows or plan selection modals.

pricingradioselectvertical

Installation

bash

# Copy radio-pricing.tsx to your project
cp components/ui/radio-pricing.tsx your-project/components/ui/radio-pricing.tsx

How to use

tsx

import { RadioPricing } from "@/components/ui/radio-pricing";

tsx

<RadioPricing
  plans={[
    { id: "free", name: "Free", price: 0, description: "For hobby projects", features: ["1 project", "Basic support"] },
    { id: "starter", name: "Starter", price: 9.99, description: "For individuals", popular: true, features: ["10 projects", "Priority support"] },
    { id: "pro", name: "Pro", price: 19.99, description: "For teams", features: ["Unlimited", "24/7 support", "API access"] },
  ]}
/>

Dependencies

framer-motion

Exports

RadioPricing

File

components/ui/radio-pricing.tsx

Preview