Launched Badges - Universal Launch Badges for Your Products

TL;DR

TL;DR: Launched Badges is an open-source React component library that generates shareable SVG badges for product launches across Hacker News, Reddit, X, Lovable, and other platforms — not just Product Hunt.

Source and Accuracy Notes

• Project page: launched-badges.lovable.app
• Source repository: github.com/wongsunday/launched-badges
• License: MIT (per npm package @sundaywong/launched-badges)
• HN launch thread: news.ycombinator.com/item?id=43967557
• Source last checked: 2026-07-26 (commit main branch)

What Is Launched Badges?

Product Hunt has long been the default launch pad for indie developers — but many products find their audience on Hacker News, Reddit, or social platforms instead. Launched Badges solves the problem of having no consistent, attractive way to celebrate those off-Product-Hunt launches.

It is a set of open-source React components that render lightweight, scalable SVG badges. Each badge links back to your launch page and can display platform-specific counts (upvotes, likes, followers) or go link-only.

From the README: “Universal badges for your product launches. Product Hunt is not the only place. Celebrate launches anywhere — Lovable, Reddit, X, Hacker News, and beyond — with drop-in React components.”

Supported Platforms

• Lovable
• Reddit
• Hacker News
• X (Twitter)
• Facebook
• Instagram
• LinkedIn
• GitHub
• MicroLaunch
• Custom (base component for full control)

Setup

Prerequisites

React 18 or 19:

{
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0"
}

Install

npm install @sundaywong/launched-badges
# or
yarn add @sundaywong/launched-badges
# or
pnpm add @sundaywong/launched-badges

Basic Usage

import { LovableBadge } from '@sundaywong/launched-badges';

// Basic with count
<LovableBadge count={359} linkUrl="https://example.com/my-project" />

// Dark theme
<LovableBadge count={359} linkUrl="https://example.com/my-project" theme="dark" />

// Formatted count string
<LovableBadge count="10.5k" linkUrl="https://example.com/my-project" />

Hacker News Badge

import { HackerNewsBadge } from '@sundaywong/launched-badges';

<HackerNewsBadge
  count={142}
  linkUrl="https://news.ycombinator.com/item?id=43967557"
  theme="light"
/>

Interactive Playground

The project homepage includes an interactive playground where you can preview badges in different themes, customize counts, and generate copy-paste code snippets — SVG or PNG download also available.

Deeper Analysis

Why this matters for indie developers: If you launch on HN or Reddit instead of Product Hunt, you have no standard embed to show “this got 500+ upvotes on HN.” Launched Badges fills that gap with a single React component.

Customization depth: The component goes beyond static images — you control the count display (numeric, formatted string like “1.2k”, or none), link-only mode, and a base <Badge> component for completely custom badges. Theming supports light/dark with flexible sizing.

The Lovable angle: The project itself is hosted on Lovable, which is notable — it demonstrates Lovable’s own developer tooling ecosystem rather than just being a product built with it.

Comparison to alternatives: There is no direct equivalent that covers non-Product-Hunt platforms. Shields.io generates static badges but not platform-specific launch badges with live count support.

Practical Evaluation Checklist

• Works with React 18 and 19
• SVG output scales cleanly at any size
• Dark/light theme support across all platforms
• npm, yarn, and pnpm all documented
• Playground and code generator on the homepage
• MIT license
• HN, Reddit, X, Lovable, GitHub, and more supported

FAQ

Q: Do the badges auto-fetch live counts? A: No — counts are passed as props. You supply the number (upvotes, likes, etc.) at render time. This keeps the components lightweight and avoids API dependencies.

Q: Can I use this outside React? A: The core is React-only, but the SVG output can be rendered anywhere if you extract the SVG markup from the component output.

Q: Is there a WordPress or plain HTML version? A: Not currently — it is React-first. The playground does let you download SVG/PNG directly without a React setup.

Q: Which platforms are supported beyond Product Hunt? A: Hacker News, Reddit, X, Lovable, GitHub, MicroLaunch, Facebook, Instagram, LinkedIn, and a generic base component for custom badges.

Conclusion

Launched Badges solves a niche but real problem: celebrating product launches on the platform where they actually happened. The React component API is clean, the SVG output is production-quality, and the interactive playground makes experimentation frictionless. If you are an indie developer who ships on HN or Reddit, this is a free, zero-dependency way to add polish to your launch announcements.

npm install @sundaywong/launched-badges