Process Bar Tab

A step-by-step process component ideal for onboarding flows, product walkthroughs, feature tours, and "How It Works" sections.

It provides automatic step progression, animated content transitions, progress tracking, and a fully responsive experience across desktop and mobile devices.

Features

Auto-sliding process steps
Configurable auto-slide duration
Pause on hover support
Optional progress tab bar
Scroll-triggered activation
Animated step transitions
Desktop and mobile layouts
Image and custom content support
Badge support
Manual step selection
Framer Motion animations
Fully responsive

Import the component using:

import ProcessBarTab from "@/components/ui/processBarTab";

Preview

Props

interface ProcessStep {
  id: string;
  title: string;
  description: string;
  image?: string;
  content?: React.ReactNode;
}
 
interface SectionBadge {
  title: string;
  icon?: LucideIcon;
}
 
interface ProcessTabsProps {
  heading?: string;
  subheading?: string;
  badge?: SectionBadge;
 
  steps: ProcessStep[];
 
  autoSlide?: boolean;
  showProgressTabBar?: boolean;
  autoSliderDuration?: number;
  defaultActiveStep?: string;
  pauseOnHover?: boolean;
 
  className?: string;
}

Example Usage

import ProcessTabs from "@/components/ui/process-tabs";
import { Rocket } from "lucide-react";
 
export default function Example() {
  return (
    <ProcessTabs
      heading="How It Works"
      subheading="Launch your project in just a few simple steps."
      badge={{
        title: "Process",
        icon: Rocket,
      }}
      autoSlide
      autoSliderDuration={5000}
      pauseOnHover
      showProgressTabBar
      steps={[
        {
          id: "step-1",
          title: "Create Account",
          description:
            "Sign up and configure your workspace settings.",
          image: "/images/step-1.png",
        },
        {
          id: "step-2",
          title: "Customize",
          description:
            "Adjust branding, content, and integrations.",
          image: "/images/step-2.png",
        },
        {
          id: "step-3",
          title: "Launch",
          description:
            "Publish your project and start collecting users.",
          image: "/images/step-3.png",
        },
      ]}
    />
  );
}

Step Structure

Each process step requires a unique ID, title, and description.

const steps = [
  {
    id: "step-1",
    title: "Connect Account",
    description: "Link your platform account.",
    image: "/images/connect.png",
  },
];

Using Custom Content

Instead of an image, you can render any React content.

steps={[
  {
    id: "analytics",
    title: "Analytics",
    description: "View performance metrics.",
    content: (
      <div className="rounded-xl border p-8">
        Custom React Content
      </div>
    ),
  },
]}

Auto Sliding

Enable automatic progression through steps.

<ProcessTabs
  autoSlide
  autoSliderDuration={4000}
  steps={steps}
/>

Disable Auto Sliding

<ProcessTabs
  autoSlide={false}
  steps={steps}
/>

Pause On Hover

Pause automatic progression while users interact with a step.

<ProcessTabs
  pauseOnHover
  steps={steps}
/>

Disable Pause On Hover

<ProcessTabs
  pauseOnHover={false}
  steps={steps}
/>

Progress Tab Bar

The vertical progress indicator can be shown or removed.

Enabled

<ProcessTabs
  showProgressTabBar
  steps={steps}
/>

Disabled

<ProcessTabs
  showProgressTabBar={false}
  steps={steps}
/>

Set Default Active Step

Choose which step is active when the component loads.

<ProcessTabs
  defaultActiveStep="step-2"
  steps={steps}
/>

Badge

Display a badge above the heading.

badge={{
  title: "How It Works",
  icon: Rocket,
}}

Responsive Behavior

Desktop

Vertical process navigation
Animated content panel
Progress tab indicators
Auto-slide support

Mobile

All steps displayed sequentially
No active-state switching
No auto-slide behavior
Optimized touch-friendly layout

Notes

The component automatically pauses auto-sliding when outside the viewport.
Progress animations only run while auto-slide is active.
Supports both images and custom React content.
Auto-slide wraps back to the first step after the final step.
Mobile devices display all steps simultaneously for easier browsing.