RadioGroupCards — Animated radio card selector

Overview

A polished radio group component that transforms standard radio buttons into elegant, interactive cards. Built with Framer Motion for smooth animations and designed to match modern UI standards.

Features

• Animated interactions — Smooth tap animations and radio dot transitions powered by Framer Motion

• Fully customizable — Control colors, spacing, typography, and border radius directly from the properties panel

• Flexible layout — Switch between vertical and horizontal orientations

• Dynamic options — Add, remove, and edit options directly in Framer without touching code

• Accessible — Built with proper ARIA roles and hidden native radio inputs for screen reader support

• Light & dark mode ready — Easily configure for any color scheme

Customization Options

• Background, border, and accent colors

• Title and description text colors

• Radio button styling

• Padding, gap, and border radius

• Font family and sizes

• Vertical or horizontal layout

Perfect For

• Pricing plan selectors

• Subscription tier selection

• Settings and preferences

• Survey and form inputs

• Onboarding flows

• Any single-choice selection UI

How to Use

1. Drag the component onto your canvas

2. Edit the options array to add your choices (ID, title, description)

3. Set the default selected value

4. Customize colors to match your design system

5. Choose vertical or horizontal layout