@veeyaainnovatives/flip-card

A reusable Flip card component for React applications with CSS included.

Installation

npm install @veeyaainnovatives/flip-card --save

Peer Dependencies

This package requires the following peer dependencies:

• react (^16.8.0 || ^17.0.0 || ^18.0.0)
• react-dom (^16.8.0 || ^17.0.0 || ^18.0.0)

Usage

Basic Usage

import { FlipCard } from '@veeyaainnovatives/flip-card';
import '@veeyaainnovatives/flip-card/styles.css';

function App() {
  return (
    <FlipCard
      icon="fa-regular fa-chess-queen"
      frontTitle="Awards"
      backTitle="Awarded: Chennai's First Single-Window Online Plan Approval Studio"
      backDescription="Clients submit documents digitally → we manage design + approvals + construction flawlessly."
    />
  );
}

With Custom Content

<FlipCard
  frontContent={
    <div>
      <div className="acheivements-icon">
        <img src={icon} alt="icon" className="img-icon" />
      </div>
      <div className="acheivements-content pt-4">
        <h3>Vision</h3>
      </div>
    </div>
  }
  backContent={
    <div className="acheivements-content pt-4">
      <h3>Our Vision</h3>
      <p>To make home building in Chennai 100% transparent, tech-driven, and stress-free.</p>
    </div>
  }
/>

With Custom Colors

<FlipCard
  frontBackgroundColor="#ffffff"
  backBackgroundColor="#e9ecef"
  icon="fa-regular fa-comments"
  frontTitle="Live Project Tracker"
  backTitle="Live Project Tracker – 24/7 Client Access"
  backDescription="Track site progress, materials, approvals, payments, and timelines from your phone."
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | frontContent | ReactNode | undefined | Custom content for the front of the card | | backContent | ReactNode | undefined | Custom content for the back of the card | | frontBackgroundColor | string | '#ffffff' | Background color for the front of the card | | backBackgroundColor | string | '#e9ecef' | Background color for the back of the card | | height | string | '260px' | Height of the flip card | | width | string | undefined | Width of the flip card (defaults to 100% with max-width: 350px) | | maxWidth | string | undefined | Max width of the flip card (defaults to 350px in CSS) | | className | string | '' | Additional CSS classes for the flip card container | | frontClassName | string | '' | Additional CSS classes for the front side | | backClassName | string | '' | Additional CSS classes for the back side | | innerClassName | string | '' | Additional CSS classes for the inner container | | iconClassName | string | '' | Additional CSS classes for the icon container | | contentClassName | string | '' | Additional CSS classes for the content | | icon | string\|ReactNode | undefined | Icon (FontAwesome class string or React node) | | frontTitle | string | undefined | Title text for the front side | | backTitle | string | undefined | Title text for the back side | | backDescription | string | undefined | Description text for the back side | | flipOnHover | boolean | true | Whether to flip on hover (if false, card stays flipped) | | customStyles | object | {} | Custom inline styles for the flip card container |

CSS Classes

The package includes the following CSS classes that you can use:

• .flip-card - Main container (default: width 100%, max-width 350px, centered with margin: 0 auto)
• .flip-card-inner - Inner container that rotates
• .flip-card-front - Front side of the card
• .flip-card-back - Back side of the card
• .acheivements-icon - Icon container (circular background)
• .acheivements-content - Content container
• .acheivements-card.mission-vission - Larger variant for mission/vision cards

Note: The flip card has a default max-width of 350px and is centered. You can override the width using the width or maxWidth props, or by adding custom CSS classes.

Examples

With Image Icon

<FlipCard
  frontContent={
    <div>
      <div className="acheivements-icon">
        <img src={vision} alt="vision" className="img-icon" />
      </div>
      <div className="acheivements-content pt-4">
        <h3>Vision</h3>
      </div>
    </div>
  }
  backContent={
    <div className="acheivements-content pt-4">
      <h3>Our Vision</h3>
      <p>To make home building in Chennai 100% transparent, tech-driven, and stress-free.</p>
    </div>
  }
  className="mission-vission"
/>

Without Hover (Always Flipped)

<FlipCard
  flipOnHover={false}
  frontTitle="Front"
  backTitle="Back"
  backDescription="This card is always flipped"
/>

Importing Styles

You need to import the CSS file in your application:

import '@veeyaainnovatives/flip-card/styles.css';

Or if using the package's CSS export:

import '@veeyaainnovatives/flip-card/dist/styles.css';

License

MIT