Credit Card

A credit card UI component that displays card information and allows flipping. It includes a front and back view with interactive elements. Use it to show card details and enable user interaction for flipping.

byShadcnblocks.com from Kibo UI

Installation

terminal

pnpm dlx layro-cli add @shadcnblocks/credit-card

npx layro-cli add @shadcnblocks/credit-card

npx layro-cli add @shadcnblocks/credit-card

bunx layro-cli add @shadcnblocks/credit-card

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import {
  type ComponentProps,
  createContext,
  type HTMLAttributes,
  type ReactNode,
  useContext,
  useEffect,
  useState,
} from "react";
import { PaymentIcon } from "react-svg-credit-card-payment-icons";
import { cn } from "@/lib/utils";