ReUI stepper - Stepper with color-coded bottom bars

Component

About

4 billing setup steps as colored bars along the panel's bottom edge, the active one thicker, under the current step's icon, name and hint.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds ReUI stepper - Stepper with color-coded bottom bars to your project and fits it to your theme.

Code

How ReUI stepper - Stepper with color-coded bottom bars is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import Component from "@/components/ui/reui-stepper-22";
import {ThemeProvider} from "next-themes";
export default function LibraryRegistryPreview(){const theme=typeof window!=="undefined"&&new URLSearchParams(window.location.search).get("theme")==="light"?"light":"dark";return <ThemeProvider defaultTheme={theme} enableSystem={false}><div data-component-demo data-theme={theme} className={theme+" style-nova"}><div><Component/></div></div></ThemeProvider>}