A client-side React component pair for rendering a vertical step-by-step progress indicator, automatically tracking active, completed, and pending states. ## Key Components - **`Steps`** — Container component that manages step state. Accepts `currentStep` (1-based index) and automatically injects `stepNumber`, `isActive`, `isCompleted`, and `isLast` props into child `Step` components. - **`Step`** — Individual step item displaying a numbered circle indicator, title, optional description, and a connecting vertical line. Renders a checkmark SVG when completed. ### Props **`Steps`** | Prop | Type | Description | |---|---|---| | `currentStep` | `number` | 1-based index of the currently active step | | `className` | `string` | Optional additional CSS classes | **`Step`** | Prop | Type | Description | |---|---|---| | `title` | `string` | Step label (required) | | `description` | `string` | Optional subtitle text | | `stepNumber` | `number` | Auto-injected by `Steps` | | `isActive` | `boolean` | Auto-injected by `Steps` | | `isCompleted` | `boolean` | Auto-injected by `Steps` | | `isLast` | `boolean` | Auto-injected by `Steps`; suppresses connecting line | ## Usage Example ```typescript import { Steps, Step } from "@/components/steps" export function OnboardingFlow() { const [currentStep, setCurrentStep] = React.useState(2) return ( ) } ``` > **Note:** Only direct `Step` children are enhanced with state props — other elements pass through unchanged. `stepNumber`, `isActive`, `isCompleted`, and `isLast` are injected automatically; do not pass them manually. **Source:** [`steps.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/steps.tsx)