KQ-501 · CHOICE/CARDS
Choice Cards
A plan picker built as a radiogroup of cards. Choosing lifts the card 2px on glide while a ring draws around its perimeter and a check stamps into the corner on recoil, and the unchosen cards step back in tone. Switching the billing period re-rolls every price digit by digit on glide; arrow keys move between cards, Home and End jump to the ends, and Space selects.
KQ-501 · CHOICE/CARDS
Waylight plan
Studio · monthly · $29
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/choice-cards
Props
- options
- ChoiceCardOption[]
- default —
- The plans: value, title, monthly and yearly price, blurb, optional badge.
- value / defaultValue
- string
- default —
- Controlled or initial chosen plan; defaults to the first option.
- onValueChange
- (value: string) => void
- default —
- Fires on choice.
- billing / defaultBilling
- "monthly" | "yearly"
- default "monthly"
- Controlled or initial billing period; switching it re-rolls every price.
- onBillingChange
- (billing: "monthly" | "yearly") => void
- default —
- Fires when the billing period changes.
- currency
- string
- default "$"
- Prefix for every price.
- label
- string
- default "Plan"
- Visible group label, shown beside the billing toggle.
| Prop | Type | Default | Description |
|---|---|---|---|
| options | ChoiceCardOption[] | — | The plans: value, title, monthly and yearly price, blurb, optional badge. |
| value / defaultValue | string | — | Controlled or initial chosen plan; defaults to the first option. |
| onValueChange | (value: string) => void | — | Fires on choice. |
| billing / defaultBilling | "monthly" | "yearly" | "monthly" | Controlled or initial billing period; switching it re-rolls every price. |
| onBillingChange | (billing: "monthly" | "yearly") => void | — | Fires when the billing period changes. |
| currency | string | "$" | Prefix for every price. |
| label | string | "Plan" | Visible group label, shown beside the billing toggle. |