Plan

A React component for displaying step-by-step plans or processes with completion status, active states, and smooth animations. Perfect for workflows, onboarding steps, or progress tracking. Built with TypeScript and GSAP animations.

Installation

npm install @sarthakb009/plan

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom lucide-react gsap @gsap/react

Required versions:

• react ^18.0.0
• react-dom ^18.0.0
• lucide-react ^0.294.0
• gsap ^3.13.0
• @gsap/react ^2.1.2

Usage

Basic Example

import { Plan } from '@sarthakb009/plan';

function App() {
  const steps = [
    { label: 'Initialize project', completed: true },
    { label: 'Set up dependencies', completed: true },
    { label: 'Configure build tools', completed: false, active: true },
    { label: 'Deploy to production', completed: false },
  ];

  return (
    <Plan
      title="Setup Plan"
      steps={steps}
    />
  );
}

With Active Step

import { Plan } from '@sarthakb009/plan';

function App() {
  const steps = [
    { label: 'Step 1', completed: true },
    { label: 'Step 2', completed: true },
    { label: 'Step 3', completed: false, active: true }, // Currently active
    { label: 'Step 4', completed: false },
  ];

  return (
    <Plan
      steps={steps}
      title="Current Progress"
    />
  );
}

All Completed

import { Plan } from '@sarthakb009/plan';

function App() {
  const steps = [
    { label: 'Step 1', completed: true },
    { label: 'Step 2', completed: true },
    { label: 'Step 3', completed: true },
    { label: 'Step 4', completed: true },
  ];

  return (
    <Plan
      steps={steps}
      title="Completed Plan"
    />
  );
}

Custom Title

import { Plan } from '@sarthakb009/plan';

function App() {
  return (
    <Plan
      steps={steps}
      title="Implementation Steps"
      className="my-plan"
    />
  );
}

Props

| Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | steps | PlanStep[] | undefined | No | Array of plan steps to display | | title | string | undefined | No | Header title text | | className | string | undefined | No | Additional CSS classes for container |

PlanStep Type

interface PlanStep {
  label: string;
  completed?: boolean;
  active?: boolean;
}

Features

• ✅ Step Display: Clear visual representation of steps
• ✅ Completion Status: Visual indicators for completed steps
• ✅ Active State: Highlight currently active step
• ✅ Connecting Lines: Visual connection between steps
• ✅ Smooth Animations: GSAP-powered entrance animations
• ✅ TypeScript: Full TypeScript support with exported types
• ✅ Accessible: Proper ARIA labels and semantic HTML

TypeScript

The component is written in TypeScript and exports all types:

import { Plan, PlanProps, PlanStep } from '@sarthakb009/plan';

const step: PlanStep = {
  label: 'Complete step',
  completed: true,
  active: false,
};

const props: PlanProps = {
  steps: [step],
  title: 'My Plan',
};

License

MIT