@iamshyam/react-countdown-cards v1.0.0

React Countdown Cards

A customizable countdown card component for React applications with Tailwind CSS styling.

Installation

npm install @iamshyam/react-countdown-cards

or

yarn add @iamshyam/react-countdown-cards

Usage

import { CountdownCard } from '@iamshyam/react-countdown-cards';
import { Heart } from 'lucide-react';

function App() {
  return (
    <CountdownCard
      title="Valentine's Day"
      date="2025-02-14"
      icon={Heart}
      theme={{
        background: "bg-white",
        titleColor: "text-pink-600",
        numberBackground: "bg-pink-50",
        numberColor: "text-pink-500",
        unitColor: "text-gray-500"
      }}
    />
  );
}

Props

Theme Object Properties

interface Theme {
  background: string;     // Background color class
  titleColor: string;     // Title text color class
  numberBackground: string; // Number container background class
  numberColor: string;    // Number text color class
  unitColor: string;      // Unit text color class
}

Requirements

• React 16.8.0 or higher
• Tailwind CSS 3.0.0 or higher
• lucide-react 0.263.1 or higher

License

MIT © Ssbhattarai