saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub

Sections

IntroductionComponentsInstallationMCPThemingDesignComposing a Detail Panel

Components

Components

General

AvatarBadgeButtonKbdProgressSeparatorSkeletonSpin ResolveSpinnerSplit ButtonSync ButtonTypography

Forms & Inputs

Address LookupCalendar PickerCheckboxColor PickerComboboxDate PickerEmoji PickerFavicon SearchFieldInputInput GroupInput OTPRadio GroupSelectSliderSwitchTextareaToggleToggle Group

Data Display

AccordionAlertCardChartComparison SliderCredit CardData TableEmptyItemMarkdownSaturation Credit CardStatus BadgeTableTree

Detail Panels

Detail FieldDetail HeroDetail Toolbar

Navigation

BreadcrumbCommandMenubarNavigation MenuPaginationTabs

Overlays

CollapsibleContext MenuDialogDropdown MenuHover CardSheet

Layout

Button GroupFont ProviderWizard Split Layout

Feedback

Sonner

Animation & Effects

Animated GroupAnimated ListAnimated NumberBeamBlur FadeBorder TrailGlow EffectLiquid MetalLoading StateParallaxPixelProgressive BlurRippleSpotlightText EffectText Shimmer

Productivity

Agent ChatAI Chat InputCoding AgentFiltersFull CalendarKanbanNovel Editor
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-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

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.
PreviousContext MenuNextData Table

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
CardholderCasey Park
Exp Date••/••
CVC•••
Primary Card
•••• 9010
Blake Garcia
Business Card
•••• 9010
Alex Chen
Business Card (9010)
Personal Card (9010)