WoldUI

WoldUI started when HeroUI moved to its 3.0 major version. I had relied on the look of version 2, with its soft radii, tonal colour scales, layered shadows and springy motion, and when I went looking for a replacement I found that none of the design systems that were easy to use and comprehensive in their components had the visual polish and animation I wanted. So I set out to build it myself.

The result is a design system for React and Tailwind CSS v4 that I design and maintain as an open-source package. It reproduces HeroUI v2's visual language but builds it on shadcn/ui and Radix, so that it can be dropped into any React project without depending on HeroUI itself.

It ships more than sixty components, from buttons, forms and overlays to navigation, data display and charts, alongside a small set of layout and typography atoms such as Stack, Inline, Grid, Heading and Text. Every colour, radius, shadow and motion timing is a CSS variable, so a team can retune the whole system by overriding a handful of values, and dark mode is a single class away.

Accessibility is treated as a contract rather than a checklist. Every component story doubles as a test that renders the component and runs it through axe in CI, the Field atom enforces how labels and errors are wired, and the motion primitives respect the user's reduced-motion setting while still rendering visibly on the server.

The package is published to npm with provenance through a changeset-driven release workflow, imports are per component so an app only pays for what it uses, and it is built to work with Next.js server components out of the box. It grew out of the design systems I built at Movinn and Raw Power Labs, and is the version I wished I had been able to install back then.