milestone-tracker-react

A beautiful animated milestone tracker component with ocean wave animations for React. Perfect for tracking progress, sign-ups, or any milestone-based goals with stunning visual feedback.

Features

• 🌊 Animated Ocean Waves - Dynamic wave animations that intensify as progress increases
• 📊 Progress Visualization - Beautiful milestone markers with progress bars
• 🎯 Customizable Milestones - Built-in milestones (0, 50, 250, 500, омер, 1000) with reward descriptions
• 📱 Responsive Design - Works seamlessly on desktop and mobile devices
• ⚡ Lightweight - Built with React and Motion (Framer Motion)
• 🎨 Styling Ready - Includes Tailwind CSS classes (requires Tailwind CSS setup in your project)

Installation

npm install milestone-tracker-react motion

or

yarn add @milestone-tracker/react motion

or

pnpm add @milestone-tracker/react motion

Peer Dependencies

• react ^18.0.0
• react-dom ^18.0.0
• motion (Framer Motion) - for animations

Setup

1. Install Tailwind CSS

This component uses Tailwind CSS classes. You need to have Tailwind CSS configured in your project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Configure Tailwind

Add the component paths to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/milestone-tracker-react/**/*.{js,ts,jsx,tsx}", // Add this
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Import Styles

Import the component styles in your main CSS file (usually index.css or App.css):

@import 'milestone-tracker-react/styles';

Or import it directly in your JavaScript/TypeScript:

import 'milestone-tracker-react/styles';

4. Use the Component

import { MilestoneTracker } from 'milestone-tracker-react';
import 'milestone-tracker-react/styles'; // Don't forget the styles!

function App() {
  return (
    <div>
      <MilestoneTracker currentSignups={125} />
    </div>
  );
}

Usage

import { MilestoneTracker } from 'milestone-tracker-react';
import type { MilestoneTrackerProps } from 'milestone-tracker-react';

function MyComponent() {
  const [signups, setSignups] = useState(0);

  return (
    <div className="container">
      <MilestoneTracker currentSignups={signups} />
      <button onClick={() => setSignups(prev => prev + 1)}>
        Add Signup
      </button>
    </div>
  );
}

Props

MilestoneTrackerProps

| Prop | Type | Required | Description | |------|------|----------|-------------| | currentSignups | number | Yes | The current number of sign-ups/progress value |

Default Milestones

The component includes the following milestones by default:

• 0 - Welcome milestone
• 50 - Early Adopter Badge
• 250 - Premium features tier 1
• 500 - Advanced analytics dashboard
• 750 - API access
• 1000 - Enterprise features

Styling

The component uses Tailwind CSS utility classes with a custom color palette:

• Ocean blues: #001b36, #015e8b, #0a86a5
• Warm accents: #a13931, #ab5c34, #c4853f
• Neutral backgrounds: #e3dac9, #f1ece4, #eae3d7

TypeScript Support

Full TypeScript support is included with exported types:

import { MilestoneTracker, type MilestoneTrackerProps } from 'milestone-tracker-react';

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.