--- title: "Steps" description: "A step-by-step guide component with numbered steps, vertical connecting lines, and copy-to-clipboard functionality for step links." author: "ReadMe" version: "1.0.0" license: "MIT" --- import React, { useState, Children, isValidElement, cloneElement } from "react"; export const Steps = ({ name = "steps", children }) => { const childArray = Children.toArray(children); const count = childArray.length; return (

{childArray.map((child, index) => { if (isValidElement(child)) { return cloneElement(child, { key: index, stepIndex: index, stepsName: name, isFirst: index === 0, isLast: index === count - 1, }); } return child; })}

); }; export const Step = ({ number, stepIndex = 0, title = "", stepsName = "steps", isFirst = false, isLast = false, children, }) => { const [isHovered, setIsHovered] = useState(false); const [copied, setCopied] = useState(false); const displayNumber = number !== undefined ? number : stepIndex + 1; const stepId = `${stepsName}-${displayNumber}`; const copyLink = () => { if (typeof window === 'undefined') return; try { const url = `${window.location.origin}${window.location.pathname}#${stepId}`; navigator.clipboard.writeText(url); setCopied(true); setTimeout(() => setCopied(false), 1500); } catch (error) { console.error('Failed to copy link:', error); } }; return (

{/* Vertical line - positioned behind the number, extends into padding */}

{/* Number button - positioned on top of line */} {/* Right column: title + content */}

{title}

{children}

); }; Sign up for an Acme account and navigate to your API settings to generate a new API key. ```json Request POST https://api.acme.com/v1/keys ``` Include your API key in the Authorization header of your requests. ```javascript const response = await fetch('https://api.acme.com/v1/data', { headers: { 'Authorization': 'Bearer YOUR_API_KEY' } }); ``` You're all set! Start making requests to the Acme API.

Common Troubleshooting Steps