vibecodng.com

Free MCP betaIndex and tools live

Measured entry

ruixen-milestone-stepper

formunclassifiedmotion on file

A client-side React and TypeScript vertical milestone timeline shipped as a shadcn registry component. It renders completed, current, and upcoming states with optional dates or custom icons, plus compact and detailed variants. Styling comes from Tailwind classes and a local cn helper, while Motion supplies the entrance and indicator animation.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of ruixen-milestone-stepper at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-milestone-stepper at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-milestone-stepper at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for ruixen-milestone-stepper
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal70.5 KB (136.0 KB build, 65.5 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 1m 46s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/cut/components/ruixen/milestone-stepper.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A tidy fit for passive progress timelines, with useful variants and predictable data props. It needs a shadcn-style setup and does not work as a bare drop-in because it imports the local cn utility. Fix the low-contrast muted states and add semantic status markup before using it in an accessibility-sensitive flow.

Use it if

  • You need a read-only order, delivery, or project progress timeline with a single current stage.
  • Your interface already uses Tailwind theme tokens and the usual shadcn cn utility.
  • You want optional descriptions, dates, custom icons, and solid or dashed connectors without interaction logic.

Skip it if

  • You need an interactive form stepper with navigation, validation, or editable stages.
  • You require accessible status semantics out of the box, since the stages are generic containers and the current state is conveyed visually.
  • You cannot revise the muted text colors, which fail contrast checks in the tested presentation.
  • You want to avoid adding an animation dependency for a small status display.

Install

Installation record for ruixen-milestone-stepper
Declared dependencieslucide-react, motion, clsx, tailwind-merge
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

In a non-shadcn project, install Motion, lucide-react, clsx, and tailwind-merge; configure Tailwind with foreground and background theme tokens; add a cn class-merging helper at the expected alias or change the import; and ensure the framework supports client components. Lucide is declared by the registry even though this source accepts icons from callers rather than importing one directly.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/ruixenui/ruixen.com
License
MIT
Record published
2026-08-16

Alternatives

Other published entries for the form pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.