A saved card: brand tile, label and expiry, status and a menu. Add is a dashed row.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/payment-methodPlayground
Card ending 4242Expires 08/28
States
Card ending 4242Expires 08/28Default
Card ending 4242Expired 09/26Expired
Choosing a card
State
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/payment-method
Accessibility
- Passing
namemakes rows native radios in one group. - Expired is text and a Badge, not color alone.
- The menu is named after the card.
Motion
- The row fades in and rises 8 px over 400 ms.
- The selected ring fades in over 150 ms.
- The menu scales in from the trigger.
- With reduced motion, the row and ring appear at once.
Responsive behavior
- 420 wide on Web and 358 on Mobile.
Performance
- Holds no state, and the enter animation is CSS that reduced motion turns off.
- The Dropdown Menu mounts only on rows without a Radio.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import PaymentMethod from @/components/fetaui/payment-method. It composes Radio, Dropdown Menu and Icon Button with Tag from data-kit.
- Always pass brand, label and expiry. The defaults are sample values.
- In a list, give every row the same name so the rows become radios, and hold the choice in the parent with state and onSelect.
- The Default badge shows only with isDefault. state add is a button that calls onAdd.
Related
CheckoutComponentExpress pay, billing period, plan options, seats, add-ons, billing and card fields, and a live order summary.Billing OverviewProBlockBilling settings: current plan, card on file, usage meters and invoices.Credit Top-upComponentBalance with runway and a 14 day trend, credit packs, a custom amount, auto top-up and Buy.Radio GroupComponentPick exactly one. A surface circle that fills to an ink disc with a dot.