Credit Card - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/credit-card

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. 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 @saturation-ui/credit-card

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. 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

CardholderRiley Kim

Exp Date••/••

CVC•••

Primary Card

•••• 9010

Alex Chen

Business Card

•••• 9010

Quinn Patel

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.