Skip to content
React components made for Product Hunt users 😽
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

React Product Hunt

React Components for Product Hunt Tweet

React Components for Product Hunt users

NPM JavaScript Style Guide


Requires React and a Product Hunt account!


yarn add react-producthunt
# or
npm install --save react-producthunt


1. Ship Widget Component

The Ship widget is a little bubble that appears on the bottom left or bottom right of the page that lets you capture email subscribers. See more about Ship at

React Product Hunt

ES6 import

import { ShipWidget } from "react-producthunt";

JSX (example)

<ShipWidget appId={12345} position="bottomLeft">


  • appId: Number

    • Default: No default
    • Options: You can find your App ID in your Ship dashboard at a URL like this:[your-upcoming-product]/embed

  • position: String

    • Default: "bottomLeft"
    • Options: "bottomLeft" or "bottomRight"

2. Badge Component

A badge component based off of LinkedIn's Badges that you can put on your site to show off your Product Hunt profile.

Light Badge

React Product Hunt

Dark Badge

React Product Hunt

ES6 import

import { Badge } from "react-producthunt";

JSX (example)

<Badge username="thomaswangio" darkMode={true}>


  • username: String

    • Default: No default
    • Options: Any Product Hunt username!
  • darkMode: Boolean

    • Default: false
    • Options: true or false


This package is open for PR's of any kind! There's room for many creative components using the Product Hunt API. See the Product Hunt API GitHub Repo for their starter kit and more references on what data you can pull.

Makers Festival

This package was made for Product Hunt's Makers Festival 2019 - API Edition.


MIT © thomaswangio

You can’t perform that action at this time.