Four numbered step cards joined by a line that fills from start to end when the section scrolls into view. Each card carries a small looping illustration.
Relay plugs into the tools your team already uses. Most teams ship their first preview before lunch.
Install the GitHub app and pick the repositories Relay should watch. No YAML to write.
Choose which checks run on every pull request and who gets pinged when one fails.
Every branch gets its own URL with seeded data, so reviewers click instead of pulling.
Error rates, p95 latency and deploy health stream into one timeline the team shares.
npx shadcn@latest add https://hyperblur.dev/r/how-steps-line.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/how-steps-line.tsx.
import { HowStepsLine } from "@/components/hyperblur/how-steps-line"
<HowStepsLine title="Ship in four steps" steps={[{ title: "Connect", description: "Link your repo." }, { title: "Deploy", description: "Push to main." }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "How it works" | Pill above the headline. Empty string hides it. |
| title | string | "From first commit to production in four steps" | Section headline. |
| subtitle | string | sample text | Paragraph under the headline. Empty string hides it. |
| steps | { title: string; description: string; duration?: string; art?: "connect" | "configure" | "deploy" | "monitor" }[] | 4 sample steps | Steps in order. art picks the illustration; without it the four illustrations cycle by index. duration shows as a chip. |
| cta | { label: string; href: string } | null | { label: "Read the setup guide", href: "#" } | Pill link under the steps. Pass null to hide it. |
| note | string | "Average setup time: 11 minutes" | Muted text next to the link. Empty string hides it. |
| accent | string | "#8b7bff" | Color of the filling line, active badges, glows and illustrations. |
| className | string | Extra class names on the section root. | |
| style | CSSProperties | Inline styles on the section root, merged after the accent variable. |