@sundaywong/launched-badges v0.1.8

Launched Badges

Universal badges for your product launches. Product Hunt isn’t the only place. Celebrate launches anywhere — Lovable, Reddit, X, Hacker News, and beyond — with drop-in React components.

Launched Badges is a set of reusable, plug-and-play React components that showcase your product launches across platforms. Whether it’s Lovable, Reddit, X, or Hacker News, highlight your milestones where your users are — not just on Product Hunt.

🚀 Features

• 🏷️ Prebuilt badges for Lovable, Reddit, Hacker News, X, Facebook, Instagram, LinkedIn, GitHub, MicroLaunch
• 🎨 Light/dark themes with flexible sizing and layout control
• ⚙️ Fine-grained over display — customize logo, text, icons, and count (upvotes, likes, followers, link-only, or none)
• 🖼️ Scalable SVG components built for React — plug-and-play and pixel-perfect
• 🧩 Powerful base component for full customizability

✨ Try it now

Visit our interactive demo on Homepage to customize and preview badges for your projects.

📋 Supported Platforms

• Lovable
• Reddit
• Hacker News
• X (Twitter)
• Facebook
• Instagram
• LinkedIn
• GitHub
• MicroLaunch
• Custom - Create your own badges with the generic base component

🔧 Prerequisites

Launched Badges are built with React. Please ensure React is installed and properly configured in your project.

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

Installation

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

Usage

Lovable Badge

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

const MyComponent = () => {
  return (
    <LovableBadge 
      count="234" // Can use string or number
      linkUrl="https://launched.lovable.dev/<project-slug>"
      theme="dark"
      iconType="upvote"
    />
  );
};

Reddit Badge

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

const MyComponent = () => {
  return (
    <RedditBadge 
      count={"1.2k"}
      linkUrl="https://reddit.com/..."
      iconType="upvote"
    />
  );
};

Hacker News Badge

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

const MyComponent = () => {
  return (
    <HackerNewsBadge 
      count={567}
      linkUrl="https://news.ycombinator.com/item?id=<post-id>"
      iconType="upvote"
    />
  );
};

Facebook Badge

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

const MyComponent = () => {
  return (
    <FacebookBadge 
      count="10k+" // Formatted count
      featuredText="FOLLOW US ON"
      linkUrl="https://facebook.com/..."
      iconType="likes"
    />
  );
};

Instagram Badge

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

const MyComponent = () => {
  return (
    <InstagramBadge 
      count={9876}
      featuredText="FOLLOW US ON"
      linkUrl="https://instagram.com/..."
      iconType="followers"
    />
  );
};

LinkedIn Badge

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

const MyComponent = () => {
  return (
    <LinkedInBadge 
      count={101}
      featuredText="FEATURED ON"
      linkUrl="https://linkedin.com/..."
      iconType="likes"
      theme="light"
    />
  );
};

Twitter Badge

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

const MyComponent = () => {
  return (
    <TwitterBadge 
      linkUrl="https://x.com/..."
      theme="light"
      height={54}
      featuredText="FIND US ON"
      displayMode="link"
    />
  );
};

GitHub Badge

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

const MyComponent = () => {
  return (
    <GitHubBadge 
      count={1205}
      linkUrl="https://github.com/..."
      theme="light"
      iconType="star"
    />
  );
};

MicroLaunch Badge

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

const MyComponent = () => {
  return (
    <MicroLaunchBadge 
      count={570}
      linkUrl="https://microlaunch.net/p/<project-slug>"
      theme="light"
      iconType="upvote"
    />
  );
};

Creating Custom Platform Badges

You can easily create custom badges for other platforms by extending the SocialBadge component:

import React from 'react';
import { SocialBadge, SocialBadgeProps } from '@sundaywong/launched-badges';

interface MyCustomBadgeProps extends Omit<SocialBadgeProps, 'platformName' | 'colors' | 'logoComponent'> {
  // Add any unique props for your custom badge if needed
}

export const MyCustomBadge: React.FC<MyCustomBadgeProps> = (props) => {
  // Custom logo
  const customLogo = (
    <svg width="29" height="29" viewBox="0 0 29 29">
      {/* Your custom SVG logo */}
    </svg>
  );

  // Custom colors
  const customColors = {
    light: {
      border: '#ff000020',
      text: '#ff0000',
      background: '#FFFFFF',
    },
    dark: {
      border: '#363636',
      text: '#FFFFFF',
      background: '#201e1e',
    },
  };
  
  const colors = props.theme === 'dark' ? customColors.dark : customColors.light;

  return (
    <SocialBadge
      {...props}
      platformName="My Platform"
      colors={colors}
      logoComponent={customLogo}
    />
  );
};

API

SocialBadge Props

Platform-specific Badge Props

Platform-specific badges (LovableBadge, RedditBadge, etc.) accept all SocialBadge props except platformName, colors, and logoComponent, as these are pre-configured for each platform. They provide a convenient way to use styled badges without manual configuration.

Testing

This package includes a comprehensive test suite using Vitest.

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Run tests in watch mode during development
npm run test:watch