Loading UI color preview

Update on loading-ui, the open-source loading component collection for Next.js + Tailwind.

New: color presets.

8 OKLCH colors as CSS variables, with a live picker on the homepage. Click a preset, all ~45 loader previews update instantly.

Stack details:

• app/colors.css generated from lib/colors.ts (run bun run build:colors)
• Works with next-themes dark mode (black preset flips to white in .dark)
• Loaders inherit color via currentColor

​

// app/(home)/page.tsx
<ColorPicker />
<Examples /> // all tiles inherit selected preset

/* auto-generated */
:root {
  --loader-blue: oklch(0.6204 0.195 253.83);
}
.dark {
  --loader-black: oklch(1 0 0); /* inverts for dark bg */
}

Use in your own loading.tsx:

export default function Loading() {
  return (
    <div className="flex justify-center" style={{ color: "var(--loader-sky)" }}>
      <Ring className="size-8" />
    </div>
  );
}

• https://loading-ui.com
• https://github.com/turbostarter/loading-ui

How do you handle accent colors for loading UI in App Router projects? Separate tokens or reuse shadcn theme vars?

Loading UI color presets

I've been building loading-ui, a collection of Tailwind-based loading components, and kept running into the same problem = every loader preview looked fine in neutral gray, then felt off once I tried brand colors.

So I shipped color presets: 8 OKLCH-based colors you can switch live on the site, and CSS variables you can drop into your own project.

The presets: black, blue, violet, orange, red, green, yellow, sky

Each preset exposes two CSS variables:

• --loader-blue (base OKLCH color)
• --loader-blue-gradient (auto-generated 3-stop gradient in OKLCH)

​

:root {
  --loader-blue: oklch(0.6204 0.195 253.83);
  --loader-blue-gradient: linear-gradient(
    in oklch 135deg,
    oklch(1 0.189 236.57) 0%,
    oklch(0.6204 0.195 253.83) 50%,
    oklch(0.3878 0.3086 281.84) 100%
  );
}

Gradients are generated from the base color with consistent lightness/chroma/hue modifiers, so they stay harmonious without hand-tuning every swatch.

Dark mode: the black preset flips to white in .dark, so neutral loaders still read correctly.

On https://loading-ui.com you can click a preset and preview all ~45 loaders in that color at once. Components use currentColor, so setting color: var(--loader-violet) on a parent tints everything inside.

Open source, MIT: https://github.com/turbostarter/loading-ui

Curious if anyone else is standardizing on OKLCH vars for component libraries, or still hand-picking hex values?

Stripe MRR chart screenshot

TL;DR: Launched RankGrow 7 days ago. $100+ MRR (proof), 3 paying customers, 130+ free signups, $0 ads. Biggest channel: X/Twitter. Biggest mistake: not niching down fast enough. Not life-changing money - but first proof strangers will pay for something I built.

The problem

I ship product between everything else. SEO tools gave me dashboards, exports, and 40 tabs. None answered the question I actually had:

“What should I actually fix this week?”

ChatGPT could write generic SEO advice. It couldn’t see that my /pricing page lost clicks, or that six blog posts were cannibalizing the same query.

So I built RankGrow: connect Google Search Console, ask questions in chat, get a prioritized task list backed by your real data (crawls, SERPs, technical checks - not vibes).

Pricing is simple: $29/mo Solo, $39/mo Startup (includes MCP for Cursor/Claude Code), $79/mo Agency. Free tier: 5 credits, no card.

Timeline

Day	What happened
Day 0	Soft Twitter launch (searching for early testers to get feedback) 30 signups, $0 revenue.
Day 1–2	Official X/Tweet launch. First paying customer on $39 plan (mom I’m rich)
Day 3–4	Engaging on Reddit like a madman. Searched for questions people already asked, helped them indirectly, finally plugged in the product. 100 more signups, 3 paying customers total.
Day 5–7	Crossed $100 MRR with 3 paying customers and 130+ free accounts.

• MRR: $122
• Paying customers: 3 (3× Startup @ $39)
• Free signups: 130+
• Ad spend: $0
• Tools / infra: ~$30/mo (Vercel, Neon, Stripe, AI, domain)
• Churn so far: 0 customers cancelled 🥳

What worked

1. X/Twitter (~67% of paid conversions)

I’d been DMing founders I knew who complained about SEO on X for ~2 weeks before launch - not pitching, just asking what they’d actually pay for. When I posted the launch thread on Jun 8, several of those people signed up same day because they’d already seen the problem around. The post itself did ~21K views; what converted wasn’t virality - it was warm DMs + a simple hook: connect GSC, ask questions, get a fix list (not another dashboard).

2. Free tier with no card

People ran a real audit before paying. All of the paid users started on free credits.

3. Pain-specific messaging

“Connect GSC, get this week’s fix list” converted better than “AI SEO platform.”

4. Replying in existing threads

Searched Google for how to fix [pain] reddit and left helpful comments where threads still rank. Slow but compounding.

5. Talking to every signup

DMed / emailed first 10 users, learned they wanted X, shipped/clarified Y (that’s how I shipped MCP in 3 days now)

What didn’t work (save yourself the time)

• Indie directories → zero conversions
• “AI SEO” positioning too vague + posting in wrong subs
• Generic cold DMs - “Hey, check out my new tool” got ignored. DMs only worked when I replied to a specific pain tweet first and offered help

Biggest surprise

I expected solo founders (like myself) to be my target audience, however most of my first paying customers were agencies or freelancers running 2-3 client sites - they didn’t care about “AI SEO,” they cared about an action plan instead of another report. One person upgraded to Startup ($39) on day 2 just for MCP in Cursor so they could fix issues while shipping client work.

What’s next

• Goal: $500 MRR without ads
• MCP to make it available in existing AI tools (actually done ✅)
• Experimentation - free playbooks with product plugged-in inside

I’m around for questions - acquisition, pricing, product, whatever. AMA.

Loading UI live preview

I've been using Tailwind on React/Next.js projects for a while, and one thing I always end up redoing is loading UI, the same animate-spin border trick, slightly different every time, never quite matching the rest of the design system.

So I built loading-ui: ~45 loading components built with Tailwind CSS, spinners, skeletons, dot loaders, text shimmer, and a few more opinionated ones.

Highlights:

• Pure Tailwind + CSS/SVG for most components (lightweight)
• Install via shadcn CLI, copies into your project, you own the code
• Easy to restyle with your existing text-muted-foreground, bg-muted, spacing tokens
• MIT license

​

"registries": {
  "@loading-ui": "https://loading-ui.com/r/{name}.json"
}

npx shadcn add @loading-ui/ring
npx shadcn add @loading-ui/skeleton
npx shadcn add @loading-ui/text-shimmer

Live previews: https://loading-ui.com
GitHub: https://github.com/turbostarter/loading-ui

Would love to know if these fit how you actually use Tailwind in production, or if there's a loader pattern you keep writing from scratch.

loading-ui.com live preview

Hey,

I built loading-ui as a custom registry for one thing shadcn doesn't really cover out of the box: loading states.

What's in the registry (~45 items as of today):

• Ring / arc spinners
• Dot loaders
• Text loaders
• Layout loaders
• A few opinionated ones - analyzing-image, wandering-eyes, morphing-infinity

Most are lightweight CSS/SVG, a few use Motion.

• License: MIT
• Live previews + docs: https://loading-ui.com
• Repo: https://github.com/turbostarter/loading-ui

Installation

If you're already using the CLI, setup is just adding a registry entry and pulling components like anything else from shadcn.

1. Add the registry to components.json:

​

{
  "registries": {
    "@loading-ui": "https://loading-ui.com/r/{name}.json"
  }
}

2. Install what you need:

npx shadcn add @loading-ui/ring
npx shadcn add @loading-ui/text-shimmer
npx shadcn add @loading-ui/skeleton

Same copy-paste flow - code lands in your project, you own it after install.

There's also a short contributing guide if you want to add your own loader to the registry - the build step is pretty lightweight.

Are there any loaders you keep rewriting that should be in here?

Happy to make it the most extensive loader collection in the world ;)

Hey, just wanted to ask what micro SaaS you're currently on and how do you plan to distribute it?

No course selling, no hidden marketing technique from me, just a genuine question :D