@aniruddha1806/card

React Card Component

A versatile, customizable card component for React applications with TypeScript support. Features flip animations, detailed product views, and extensive styling options with zero dependencies.

Installation

npm install @aniruddha1806/card

Features

• 🎴 Elegant product card design with image, title, and pricing
• 🔄 Smooth flip animation to reveal detailed information
• 📱 Responsive design that works on all screen sizes
• 🎨 Extensive styling customization (styles + classNames)
• 📋 Structured back-face content with multiple section types
• 🖼️ Flexible image handling with placeholder fallbacks
• 🎯 TypeScript support with full type definitions
• 🎨 Customizable action colors and button text
• ♿ Accessibility features with proper ARIA labels
• 🪶 Zero external dependencies

Quick Start

import Card from '@aniruddha1806/card';

function App() {
  return (
    <Card
      imageSrc="/product-image.jpg"
      title="Premium Headphones"
      subtitle="Wireless Bluetooth 5.0"
      price="$199.99"
      buttonText="Add to Cart"
      onButtonClick={() => console.log('Added to cart!')}
    />
  );
}

Props

CardProps

Prop	Type	Default	Description
imageSrc	string	undefined	Product image URL
title	string	required	Product title
subtitle	string	required	Product subtitle/description
price	string	required	Product price display
buttonText	string	"Add to Cart"	Action button text
onButtonClick	() => void	undefined	Button click handler
actionColor	string	"#5046e5"	Button background color
showBackFace	boolean	false	Enable card flip functionality
backContent	ProductSection[]	[]	Content for the back face
backButtonText	string	"Back to Product"	Back face button text

ProductSection Configuration

Prop	Type	Description
title	string	Section title
type	"specs" | "features" | "description" | "tags"	Content type
content	string | ProductSpec[] | string[]	Section content

ProductSpec Configuration

Prop	Type	Description
label	string	Specification label
value	string	Specification value

Examples

Basic Card

Simple product card without flip functionality:

import Card from '@aniruddha1806/card';

function BasicCard() {
  const handleAddToCart = () => {
    alert('Product added to cart!');
  };

  return (
    <Card
      imageSrc="/laptop.jpg"
      title="MacBook Pro"
      subtitle="13-inch, M2 chip"
      price="$1,299.00"
      buttonText="Buy Now"
      onButtonClick={handleAddToCart}
      actionColor="#007AFF"
    />
  );
}

Card with Flip Animation

Card with detailed product information on the back:

import Card from '@aniruddha1806/card';

function FlipCard() {
  const productSpecs = [
    {
      title: "Technical Specifications",
      type: "specs",
      content: [
        { label: "Processor", value: "Apple M2 chip" },
        { label: "Memory", value: "8GB unified memory" },
        { label: "Storage", value: "256GB SSD" },
        { label: "Display", value: "13.3-inch Retina" },
        { label: "Battery", value: "Up to 20 hours" }
      ]
    },
    {
      title: "Key Features",
      type: "features",
      content: [
        "Touch Bar and Touch ID",
        "Force Touch trackpad",
        "Two Thunderbolt 3 ports",
        "802.11ac Wi-Fi",
        "Bluetooth 5.0"
      ]
    },
    {
      title: "Description",
      type: "description",
      content: "The most powerful MacBook Pro ever is here. With the blazing-fast M2 chip, you can take on demanding projects with pro-level performance."
    }
  ];

  return (
    <Card
      imageSrc="/macbook-pro.jpg"
      title="MacBook Pro"
      subtitle="13-inch, M2 chip, 256GB"
      price="$1,299.00"
      showBackFace={true}
      backContent={productSpecs}
      onButtonClick={() => console.log('MacBook added to cart')}
    />
  );
}

E-commerce Product Card

Complete product card with all content types:

import Card from '@aniruddha1806/card';

function ProductCard() {
  const productDetails = [
    {
      title: "Product Specifications",
      type: "specs",
      content: [
        { label: "Brand", value: "Sony" },
        { label: "Model", value: "WH-1000XM4" },
        { label: "Type", value: "Over-ear" },
        { label: "Connectivity", value: "Bluetooth 5.0" },
        { label: "Battery Life", value: "30 hours" },
        { label: "Weight", value: "254g" }
      ]
    },
    {
      title: "Key Features",
      type: "features",
      content: [
        "Industry-leading noise cancellation",
        "30-hour battery life",
        "Touch sensor controls",
        "Speak-to-chat technology",
        "Quick attention mode",
        "Multipoint connection"
      ]
    },
    {
      title: "About This Product",
      type: "description",
      content: "Experience premium sound quality with Sony's flagship noise-canceling headphones. Perfect for travel, work, or everyday listening with unmatched comfort and performance."
    },
    {
      title: "Categories",
      type: "tags",
      content: ["Electronics", "Audio", "Headphones", "Wireless", "Premium", "Noise Canceling"]
    }
  ];

  const handlePurchase = () => {
    // Add to cart logic
    console.log('Sony headphones added to cart');
  };

  return (
    <Card
      imageSrc="/sony-headphones.jpg"
      title="Sony WH-1000XM4"
      subtitle="Wireless Noise Canceling Headphones"
      price="$349.99"
      buttonText="Add to Cart"
      onButtonClick={handlePurchase}
      showBackFace={true}
      backContent={productDetails}
      backButtonText="← Back to Product"
      actionColor="#FF6B35"
    />
  );
}

TypeScript Usage

The component provides full TypeScript support:

import Card, { CardProps, ProductSection, ProductSpec } from '@aniruddha1806/card';

interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  imageUrl: string;
  specifications: ProductSpec[];
}

const ProductCard: React.FC<{ product: Product }> = ({ product }) => {
  const backContent: ProductSection[] = [
    {
      title: "Specifications",
      type: "specs",
      content: product.specifications
    },
    {
      title: "Description",
      type: "description",
      content: product.description
    }
  ];

  const cardProps: CardProps = {
    imageSrc: product.imageUrl,
    title: product.name,
    subtitle: product.description.substring(0, 50) + "...",
    price: `$\${product.price.toFixed(2)}`,
    showBackFace: true,
    backContent,
    onButtonClick: () => {
      // Type-safe button click handler
      console.log(`Adding product \${product.id} to cart`);
    }
  };

  return <Card {...cardProps} />;
};

// Usage with typed product data
const sampleProduct: Product = {
  id: 1,
  name: "Premium Headphones",
  description: "High-quality wireless headphones with noise cancellation",
  price: 299.99,
  imageUrl: "/headphones.jpg",
  specifications: [
    { label: "Driver Size", value: "40mm" },
    { label: "Frequency Response", value: "20Hz - 20kHz" },
    { label: "Battery Life", value: "25 hours" }
  ]
};

export default function App() {
  return <ProductCard product={sampleProduct} />;
}