vibecodng.com

Free MCP betaIndex and tools live

Measured entry

clay-progress

progressclaymorphismfirst party

A compact React progress bar with a claymorphism treatment, an optional label, and an optional displayed value. It ships as a single default-exported JSX component with no package dependencies, but its appearance relies heavily on Tailwind utilities, including arbitrary colors, shadows, radii, and transitions.

Specimen
Harness screenshot of clay-progress at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of clay-progress at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of clay-progress 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 clay-progress
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal18.0 KB (83.4 KB build, 65.4 KB baseline)
Bare modeOK
Provider requiredNO
Demo usedwritten from the component source API

Verdict

A charming, focused choice when its soft clay styling already fits the product. The accessible determinate semantics and small API make it easy to place, but the fixed visual recipe and stepped fill behavior keep it from serving as a general progress primitive.

Use it if

  • You want a playful, tactile progress indicator for a pastel or claymorphism interface.
  • Your React project already compiles Tailwind arbitrary utilities used directly in component markup.
  • A labeled determinate bar with an optional visible value covers the product state you need.

Skip it if

  • You need a theme-neutral primitive whose colors, spacing, and shadows come from design tokens.
  • Your progress must move with fine-grained precision, since the fill width advances in discrete steps.
  • You need indeterminate, segmented, circular, or buffered progress states.
  • Your project does not use React or cannot process Tailwind arbitrary utility syntax.

Install

Installation record for clay-progress
Declared dependenciesnone declared
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

First-party component from the sir-originals set. In a non-shadcn project, add the component file to a React codebase and configure Tailwind to scan it. The Tailwind setup must preserve arbitrary color, shadow, radius, and transition utilities. No provider or additional package is required.

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

mrkeyoor/sir-originals
License
MIT
Record published
2026-08-13

Alternatives

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