shadcn.io is not affiliated with official shadcn/ui
Saved Cards Account Block for Ark UI
An account's saved cards shown as brand and last four digits, with expiry and billing name hidden until a password check, plus Make default, Remove with a confirm and an Always ask again switch. No card number is ever typed.
Installation
Overview
Keep card details out of view until the person proves it is them, with this saved cards section for React with Ark UI. A hairline frame with a plus mark on each corner lists each card as its brand and last four digits ("Visa ending 4242") beside a two-letter tile, with a Default Badge on one. The expiry and the name on the card are dots until Show details is pressed, which asks for the password in a Password Input under the list (in this demo any password of 8 or more characters passes, and it says so) and then shows them until Hide. Make default moves the badge, Remove opens an Alert Dialog, and removing the last card shows an empty state with a way to put the sample cards back. A Switch, Always ask again, decides whether hiding a card locks the details again. There is no card form: a real one would use your payment provider's hosted fields. It's built from Password Input, Alert Dialog, Switch, Badge, Button, Field and Guides. For the payment or security page of any app that charges cards.
FAQ
How do I list real cards?
Edit CARDS: a brand named in text, the last four digits, the expiry, the name on the card, a two-letter mark for the tile and an id. Never put a full card number in the page or in your own server's records; show what your payment provider returns for a saved method (its brand, last four digits and expiry) and nothing more.
What stays local, and what would be real?
The password check is a length test (8 or more characters), nothing is sent, and removing, defaulting and revealing change this page only, as the status line says. In a real app the gate would call your server to confirm the session's password or a passkey, and the server, not the page, would decide whether to return the expiry and name; the hidden values should not be in the page's HTML until it has.
Why is there no form to add a card?
Typing a card number into your own page puts it in your scope for card-data rules. Use your provider's hosted fields or checkout instead; they take the number in a frame you never read. If you do build a field, keep autoComplete set to the right card tokens, check the number with the Luhn test and never log it.
How does the gate work from the keyboard?
Show details moves focus into the password field, Enter confirms, and focus returns to that card's Hide details button. Escape cancels while focus is inside the block and returns to Show details. Remove opens a modal dialog with focus on Cancel; after a confirm, focus lands on the next card's Show details, or on the restore button when none is left.