# Plan picker

Plan picker: a free component, built on your design tokens, to use on a pricing or upgrade page. Three plans as cards you select, with a monthly or yearly switch that changes the prices and one plan marked as the common choice.

Prompt: Add the OpenDesigner component plan-picker to this project: https://opendesigner.dev/library/r/plan-picker.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: selected, hover, focus, monthly, yearly.

Accessibility: Native radio groups for the period and the plan; the whole card is the label, and the focus ring goes around the card.

File: https://opendesigner.dev/library/r/plan-picker.html