Cartlify
Cartlify — a React e-commerce UI kit
Hey IH community!
npm install cartlify
Quick update for anyone following the Cartlify journey:
After launching on Gumroad, I've now published the library on npm so developers can install it directly into their projects.
---
What changed:
The npm package ships the compiled dist/ output — ESM + CJS + TypeScript types via tsup. The full source code, Storybook config, hooks, design tokens, and tests are still available on Gumroad for $29.
This gives developers two ways to use Cartlify:
→ Install via npm (free, compiled)
npm install cartlify
→ Get full source on Gumroad ($29)
Full TypeScript source + Storybook + hooks + tokens
---
What's included:
🛍️ ProductCard — 3 variants, gallery, wishlist, badges, skeleton
🛒 CartDrawer — animated, accessible, focus trap, quantity stepper
✅ CheckoutStepper — horizontal/vertical, keyboard navigation
⏳ PageLoader — 4 animation styles, 3 position modes
React 18 · TypeScript strict · Tailwind CSS · 141 tests · WCAG 2.1
---
Links:
🔗 npm → https://www.npmjs.com/package/cartlify
🔗 Storybook → https://cartlify.vercel.app/
🛒 Gumroad → https://karthiksoftengg.gumroad.com/l/cartlify-react-ui-kit
Still working on getting the first sale. Would love feedback from the IH community — especially on the free npm + paid source model. Is this the right approach?
Hey IH community!
I just launched my first paid digital product this week and wanted to share the full story.
The Problem I Was Solving
After 10+ years as a frontend engineer, I noticed I was rebuilding the same 3–4 e-commerce components on every project. ProductCard, CartDrawer, CheckoutStepper — same logic, same accessibility fixes, same edge cases. So I packaged them properly and sold them.
---
What I Built
Cartlify — a React + TypeScript + Tailwind CSS component library for e-commerce UIs.
4 components:
→ ProductCard (3 variants, image gallery, wishlist, skeleton loading)
→ CartDrawer (animated, accessible, focus trap, quantity controls)
→ CheckoutStepper (horizontal/vertical, animated, keyboard nav)
→ PageLoader (4 styles — Spinner, Dots, Bars, Pulse)
Plus 3 hooks, 11 icons, 40+ design tokens, dark mode, 141 tests, WCAG 2.1 accessible.
---
How I Built It
- React 18 + TypeScript strict
- Tailwind CSS v3
- Storybook v7 for documentation
- tsup for bundling (ESM + CJS)
- Jest + React Testing Library (141 tests)
- Hosted demo on Vercel (free)
- Sold via Gumroad ($29 one-time)
Total build time: evenings and weekends over several weeks.
---
How I'm Marketing It
- LinkedIn post (already live)
- LinkedIn demo GIF post (scheduled)
- Dev.to article (drafted)
- Reddit (got auto-removed twice — trying IH instead!)
- Twitter/X thread (next)
- Product Hunt (planned)
---
Current Numbers
🗓 Launched this week
🔗 Live Storybook → https://cartlify.vercel.app/
🛒 Gumroad → https://karthiksoftengg.gumroad.com/l/cartlify-react-ui-kit
💰 Price: $29 one-time
---
Would love feedback from this community on:
- Pricing — is $29 too high, too low?
- What components would make you buy immediately?
- Any marketing channels I'm missing?
Happy to answer anything about the build or launch process!
-
1
The build looks solid, especially the accessibility/tests side.
The thing I’d be careful with is pricing Cartlify as “4 React components.”
At $29, the buyer probably is not paying for ProductCard or CartDrawer alone. They’re paying to avoid rebuilding the annoying e-commerce UI layer before a launch or client project.
So I’d test the page around the job-to-be-done, not the component count:
“Ship a polished e-commerce UI faster without rebuilding cart, product, and checkout patterns from scratch.”
Small hint: before Product Hunt, I’d tighten the buyer frame. Is this for indie devs shipping stores, freelance frontend devs doing client work, or small agencies trying to speed up Shopify/custom commerce builds? Those are different purchase triggers.
Happy to put the pricing + launch angle together properly if useful.
-
1
This is genuinely the most useful feedback I've received since launching, thank you.
You're absolutely right. I've been leading with "4 components" instead of the outcome. Nobody wakes up thinking "I need a CartDrawer", they think "I need to ship this store before my client deadline."
The job to be done framing you suggested is sharper:
"Ship a polished e-commerce UI faster without rebuilding cart, product, and checkout patterns from scratch."
That's the actual purchase trigger. I'm updating the Gumroad page around this today.
On the buyer's frame, honestly, I've been vague about this. Right now, I think the strongest fit is freelance frontend devs doing client work, but I haven't validated that properly yet.
If you're open to it, I'd genuinely love your input on tightening the pricing and launch angle. Happy to share more context about what I've built if that helps.
-
1
Appreciate that.
Send me your email and I’ll write the tighter pricing + launch angle properly instead of crowding the thread.
-
-
Comment