r/reactjs

Quick update on , the open-source loading component registry I shared here before.

New: color presets. 8 colors (black, blue, violet, orange, red, green, yellow, sky) you can switch on and instantly preview every loader in that color.

How it works in React:

Components use currentColor, so theming is just setting color on a parent:

<div style={{ color: "var(--loader-blue)" }}>
  <Ring className="size-8" />
  <TextShimmer>Loading...</TextShimmer>
</div>

CSS variables are OKLCH-based with auto-generated gradients:

--loader-violet: oklch(0.7217 0.1768 305.49);
--loader-violet-gradient: linear-gradient(in oklch 135deg, ...);

Dark mode: black preset flips to white in .dark.

Still install components the same way:

npx shadcn add @loading-ui/ring

• Site:

• Repo:

If you use loading-ui already, curious whether preset CSS vars are useful or you'd rather stick with Tailwind text-blue-500 utilities?