saturation/uisaturation/ui
DocsComponentsBlocksPages
GitHub

Sections

IntroductionComponentsInstallationMCPTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBeamBlur FadeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandComparison SliderContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmoji PickerEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNavigation MenuNovel EditorPaginationParallaxProgressProgressive BlurRadio GroupRippleSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography

Credit Card

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

Art Department
Card number
•••• •••• •••• 9010
CardholderBlake Garcia
Exp Date••/••
CVC•••

Features

  • Masked card details — Toggle visibility for security
  • Copy to clipboard — Click to copy card details
  • Gradient backgrounds — 17 color options available
  • Spotlight effect — Interactive cursor-following glow
  • Context menu — Right-click for card actions

Sheet Example

Credit card component displayed inside a sheet for payment forms or settings panels.

API Reference

PropTypeDefaultDescription
cardNamestring"CNN license"Name displayed on the card
cardNumberstring"4500 1234 5678 9010"Card number (will be masked)
cardholderNamestring"Bryce Mohatasb"Cardholder's name
expDatestring"7/27"Expiration date
cvcstring"824"CVC code
gradientstring"bg-gradient-to-br from-purple-400 to-purple-600"Tailwind gradient classes for background
cardIconReact.ReactNode-Custom icon for the card brand

Components Used

tooltipspotlight