saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Credit Card

Credit Card

An interactive credit card display with gradient themes, masked details, copy-to-clipboard, and spotlight effect.

Loading...

Installation

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

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

Loading...
All available gradient color options.

Sizes

Loading...
Small, default, and large size variants.

API Reference

PropTypeDefaultDescription
cardNamestring"CNN license"Name displayed on the card header.
cardNumberstring"4500 1234 5678 9010"Card number (masked by default).
cardholderNamestring"Bryce Mohatasb"Cardholder's name.
expDatestring"7/27"Expiration date.
cvcstring"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.
cardIconReact.ReactNode—Custom icon for the card header.
defaultRevealedbooleanfalseWhether card details are revealed by default.

On This Page

  • Installation
  • Usage
  • Examples
  • Gradient Presets
  • Sizes
  • API Reference
Art Department
Card number
•••• •••• •••• 9010
CardholderAlex Chen
Exp Date••/••
CVC•••
Art Department
Card number
•••• •••• •••• 9010
CardholderTaylor Wong
Exp Date••/••
CVC•••
Art Department
Card number
•••• •••• •••• 9010
CardholderRiley Kim
Exp Date••/••
CVC•••
Primary Card
•••• 9010
Morgan Lee
Business Card
•••• 9010
Jordan Smith
Business Card (9010)
Personal Card (9010)