React Countdown Cards

ssbhattarai

A React Countdown Card Componet using tailwind

React Countdown Cards

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

Installation

npm install @iamshyam/react-countdown-cards

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

Prop	Type	Description
title	string	The title of the countdown
date	string	Target date for the countdown (YYYY-MM-DD format)
icon	Component	Optional icon component (lucide-react icons supported)
className	string	Additional CSS classes
theme	object	Customization object for colors and styling

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

Top categories