Payment Card

Shows a payment card as the card itself, with its name, last four digits and expiry, and tilts toward the pointer.

AndromedaDebitEveryday•••• 482108/29

Configurations

Supported configurations for this component.

GraphiteSteelEmberBrandRaisedDimmedStatic

Configurations

7 examples
Graphite
AndromedaDebitEveryday•••• 482108/29
Steel
AndromedaVirtualBills•••• 119011/27
Ember
AndromedaDebitEveryday•••• 482108/29
Brand
AndromedaDebitEveryday•••• 482108/29
Raised
AndromedaDebitEveryday•••• 482108/29
Dimmed
AndromedaDebitEveryday•••• 482108/29
Static
AndromedaDebitEveryday•••• 482108/29

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

PropTypeDefaultDescription
brandReact.ReactNode-The issuer's name or lockup, top left, in the primary ink. None by default.
kindstring-What the card is ("Debit", "Credit", "Virtual"), top right in the meta ink.
labelstring-The card's own name ("Everyday", "Travel"), over the number.
last4string-The last four digits; the number is shown masked as "•••• 4821".
expirystring-The expiry ("08/29"), bottom right.
tone'graphite' | 'steel' | 'ember' | 'brand''graphite'The lacquer: graphite (neutral with a trace of brand), steel (the blue end of the ramp), ember (the system's contrast orange, pinned to its token in both themes) or brand (the deep brand lacquer).
interactivebooleantrueTilt toward a mouse pointer with a light across the face, a lit rim and one rung of lift on hover. Off under reduced motion and on touch.
dimmedbooleanfalseThe face recedes to half strength, for a card that sits behind another.
raisedbooleanfalseOne rung up the elevation ladder, for the card on top of a stack.
widthnumber | string-The card's width (a number of px or a CSS length); the height follows the card ratio. Fills its container by default.

More Andromeda Pro components

Planet

Renders a slowly rotating particle sphere as a hero object.

2 variants

Popover

Floats a panel of mixed content off a trigger, such as a picker with a setting under it.

3 variants

Pricing Card

Shows one plan with its price, what it includes and the button to choose it, lined up with the plans beside it.

3 variants