React Card Component Package

A customizable and responsive Card component for React and Next.js applications.

Features

• ✅ TypeScript Support - Fully typed with TypeScript
• ✅ Multiple Variants - Default, outlined, elevated, and filled styles
• ✅ Responsive Design - Works great on all screen sizes
• ✅ Clickable Cards - Built-in support for clickable cards
• ✅ Customizable - Extensive props for customization
• ✅ Accessibility - WCAG compliant with proper ARIA attributes
• ✅ Dark Mode - Automatic dark theme support
• ✅ Zero Dependencies - No external dependencies except React

Installation

npm install react-card-component-pkg

Usage

Basic Usage

import React from 'react';
import { Card } from 'react-card-component-pkg';

function App() {
  return (
    <Card title="Basic Card" subtitle="This is a subtitle">
      <p>This is the card content. You can put any React components here!</p>
    </Card>
  );
}

Card Variants

import { Card } from 'react-card-component-pkg';

// Default card
<Card variant="default">Default card</Card>

// Outlined card
<Card variant="outlined">Outlined card</Card>

// Elevated card with shadow
<Card variant="elevated">Elevated card</Card>

// Filled background card
<Card variant="filled">Filled card</Card>

Card Sizes

import { Card } from 'react-card-component-pkg';

// Small card
<Card size="small">Small card</Card>

// Medium card (default)
<Card size="medium">Medium card</Card>

// Large card
<Card size="large">Large card</Card>

Clickable Cards

import { Card } from 'react-card-component-pkg';

function handleCardClick() {
  console.log('Card clicked!');
}

<Card 
  clickable 
  onClick={handleCardClick}
  title="Clickable Card"
  hover // Adds hover effect
>
  Click me!
</Card>

Custom Styling

import { Card } from 'react-card-component-pkg';

<Card 
  width={300}
  height="200px"
  className="my-custom-class"
  style={{ backgroundColor: '#f0f8ff' }}
>
  Custom styled card
</Card>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | React.ReactNode | - | The content to display inside the card | | title | string | - | Card title (optional) | | subtitle | string | - | Card subtitle (optional) | | variant | 'default' \| 'outlined' \| 'elevated' \| 'filled' | 'default' | Card variant style | | size | 'small' \| 'medium' \| 'large' | 'medium' | Card size | | clickable | boolean | false | Whether the card is clickable | | onClick | () => void | - | Click handler for clickable cards | | className | string | '' | Additional CSS classes | | width | number \| string | - | Card width (number for pixels or string for CSS value) | | height | number \| string | - | Card height (number for pixels or string for CSS value) | | hover | boolean | false | Whether to show a hover effect | | style | React.CSSProperties | - | Custom styles |

Examples

Product Card

import { Card } from 'react-card-component-pkg';

function ProductCard({ product }) {
  return (
    <Card 
      variant="elevated" 
      size="medium" 
      clickable 
      hover
      onClick={() => window.open(`/product/${product.id}`)}
      width={300}
    >
      <img src={product.image} alt={product.name} style={{ width: '100%', borderRadius: '4px' }} />
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <p>{product.description}</p>
    </Card>
  );
}

Dashboard Widget

import { Card } from 'react-card-component-pkg';

function StatsWidget() {
  return (
    <Card 
      variant="filled" 
      title="Website Visitors" 
      subtitle="Last 30 days"
    >
      <div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#2196f3' }}>
        12,345
      </div>
      <div style={{ color: '#4caf50' }}>
        ↑ 12% increase
      </div>
    </Card>
  );
}

Article Card

import { Card } from 'react-card-component-pkg';

function ArticleCard({ article }) {
  return (
    <Card 
      variant="outlined" 
      clickable 
      onClick={() => window.open(`/article/${article.slug}`)}
      hover
    >
      <div style={{ marginBottom: '12px' }}>
        <span style={{ color: '#757575', fontSize: '0.875rem' }}>
          {article.publishDate}
        </span>
      </div>
      <h3>{article.title}</h3>
      <p>{article.excerpt}</p>
      <div style={{ marginTop: '12px' }}>
        <span style={{ color: '#2196f3', fontWeight: '500' }}>
          Read more →
        </span>
      </div>
    </Card>
  );
}

Styling

The component comes with built-in CSS that can be customized using CSS variables or by overriding the CSS classes. All CSS classes are prefixed with rcc- to avoid conflicts.

CSS Classes

• .rcc-card - Main card container
• .rcc-card--{variant} - Variant-specific styles
• .rcc-card--{size} - Size-specific styles
• .rcc-card--clickable - Clickable card styles
• .rcc-card--hover - Hover effect styles
• .rcc-card__header - Card header container
• .rcc-card__title - Card title
• .rcc-card__subtitle - Card subtitle
• .rcc-card__content - Card content container

Browser Support

• Chrome ≥ 60
• Firefox ≥ 60
• Safari ≥ 12
• Edge ≥ 79

TypeScript

This package includes TypeScript definitions. The main types exported are:

interface CardProps {
  children: React.ReactNode;
  title?: string;
  subtitle?: string;
  variant?: 'default' | 'outlined' | 'elevated' | 'filled';
  size?: 'small' | 'medium' | 'large';
  clickable?: boolean;
  onClick?: () => void;
  className?: string;
  width?: number | string;
  height?: number | string;
  hover?: boolean;
  style?: React.CSSProperties;
}

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © [Your Name]

Changelog

1.0.0

• Initial release
• Basic Card component with variants, sizes, and customization options
• TypeScript support
• Accessibility features
• Dark mode support