Credit Card - Saturation UI

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/credit-card.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { CreditCard } from "@/components/ui/credit-card"

<CreditCard
  cardName="Primary Card"
  cardNumber="4500 1234 5678 9010"
  cardholderName="Jane Smith"
  expDate="12/27"
  cvc="123"
  gradient="purple"
/>

Examples

Gradient Presets

All available gradient color options.

Sizes

Small, default, and large size variants.

API Reference

Prop	Type	Default	Description
`cardName`	`string`	`"CNN license"`	Name displayed on the card header.
`cardNumber`	`string`	`"4500 1234 5678 9010"`	Card number (masked by default).
`cardholderName`	`string`	`"Bryce Mohatasb"`	Cardholder's name.
`expDate`	`string`	`"7/27"`	Expiration date.
`cvc`	`string`	`"824"`	CVC/CVV code.
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Card size variant.
`gradient`	`"purple" \| "blue" \| "green" \| "red" \| "orange" \| "teal" \| "pink" \| "dark"`	`"purple"`	Gradient color preset.
`cardIcon`	`React.ReactNode`	—	Custom icon for the card header.
`defaultRevealed`	`boolean`	`false`	Whether card details are revealed by default.

Art Department

Card number

•••• •••• •••• 9010

CardholderAlex Chen

Exp Date••/••

CVC•••

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/credit-card.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { CreditCard } from "@/components/ui/credit-card"

<CreditCard
  cardName="Primary Card"
  cardNumber="4500 1234 5678 9010"
  cardholderName="Jane Smith"
  expDate="12/27"
  cvc="123"
  gradient="purple"
/>

Examples

Gradient Presets

Art Department

Card number

•••• •••• •••• 9010

CardholderMorgan Lee

Exp Date••/••

CVC•••

All available gradient color options.

Sizes

Art Department

Card number

•••• •••• •••• 9010

CardholderMorgan Lee

Exp Date••/••

CVC•••

Primary Card

•••• 9010

Quinn Patel

Business Card

•••• 9010

Riley Kim

Business Card (9010)

Personal Card (9010)

Small, default, and large size variants.

API Reference

Prop	Type	Default	Description
`cardName`	`string`	`"CNN license"`	Name displayed on the card header.
`cardNumber`	`string`	`"4500 1234 5678 9010"`	Card number (masked by default).
`cardholderName`	`string`	`"Bryce Mohatasb"`	Cardholder's name.
`expDate`	`string`	`"7/27"`	Expiration date.
`cvc`	`string`	`"824"`	CVC/CVV code.
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Card size variant.
`gradient`	`"purple" \| "blue" \| "green" \| "red" \| "orange" \| "teal" \| "pink" \| "dark"`	`"purple"`	Gradient color preset.
`cardIcon`	`React.ReactNode`	—	Custom icon for the card header.
`defaultRevealed`	`boolean`	`false`	Whether card details are revealed by default.