shadcn.io is not affiliated with official shadcn/ui
Payment Methods Carousel Block for Svelte
Five saved payment methods as radio cards with a brand lettermark, a masked number, an expiry word and a Default mark, beside a side cell whose Make default button moves the chosen method to the first card.
Installation
Overview
Show the cards on file and let someone choose one, or change the default, with this payment methods carousel for Svelte with Ark UI. Walletwick, a billing wallet, keeps five methods: each is a card on a hairline track with a two-letter brand tile (a neutral lettermark, never a logo), the brand and kind in text, the number masked down to its last four digits ("•••• 4242"), the expiry with a word worked out against a fixed date (Valid, Expires soon or Expired), the holder's initials and a "Default" mark on one of them. The cards are native radio buttons in one group. A side cell at the end names the default and the chosen method and holds the block's one primary, "Make default" (Shine Button); pressing it moves that method to the first card and scrolls the track back to it. An expired method is refused, with the reason in the status line. The foot holds the counter, a dot for each step and Previous and Next Buttons. Two cards show from the large breakpoint, one with the next peeking before that. The ruled bands and the side cell's marks come from Guides. The wallet and the numbers are made up for the example.
FAQ
Does it ever handle a full card number?
No. The data holds only the brand, the last four digits, the expiry and the holder's initials, and the side cell says no card number is typed here. In a real page, collect numbers with your payment provider's hosted fields so they never touch your page, and keep only what this block shows.
What does Make default do?
It makes the chosen method the default: the "Default" mark moves, the method becomes the first card, the track scrolls to it and the status line says "Visa ending 4242 is the default in this demo." If the chosen method is already the default, or has expired, nothing changes and the status line says why.
How is Valid, Expires soon or Expired decided?
From the typed expiry month and year against AS_OF (October 2026): a card past its month is Expired, one within two months of it (SOON) is Expires soon, and anything later is Valid. Change AS_OF and SOON to suit your product.
How does it work with a keyboard?
The cards are a native radio group inside a fieldset: Tab enters it on the chosen card and the arrow keys move and choose. A card that is out of view brings the track to it when it takes focus. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled.