feat(registry): add Product Hunt button component#6
Merged
Conversation
Now an official shadcn registry. Install commands change from: npx shadcn@latest add https://ui.justinlevine.me/r/code-line.json to: npx shadcn@latest add jalco/code-line Updated: install-command component, component-docs-page, prompts, installation page, ai-copy-button docs, and README.
- Async server component showing upvote count with official PH icon - Two layouts: inline button and expanded card - Seven visual variants including branded Product Hunt orange - Three icon styles: currentColor (evenodd cutout), brand, muted - Fetches PH GraphQL API with ISR caching, or accepts pre-fetched data - Docs page with playground, variant grid, API reference - Card preview, screenshots, sidebar nav entry
…uide, move to Open Source nav - Replace geometric triangle with official PH rounded upvote SVG - Return null when no post data and no pre-fetched props - Add 'Getting a Product Hunt Token' section with step-by-step instructions - Move nav entry from Marketing to Open Source group
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
New Component:
producthunt-buttonLink button showing a Product Hunt post's upvote count with the official PH icon. Two layouts (inline button and expanded card), seven visual variants including branded Product Hunt orange, and three icon styles. Async server component that fetches the PH GraphQL API with ISR caching, or accepts pre-fetched data.
Checklist
Implementation
registry/producthunt-button/registry.jsonentry added with accurate title, description, categories, dependencies, and files"use client"only where requiredSidebar & Navigation
lib/docs.tswith correct group, title, and hrefbadge: "New"andbadgeAdded: "2026-03-12"set with today's dateDocs Page
app/docs/components/producthunt-button/page.tsxComponentDocsPagewithtitle,description,registryName,sourceFiles,preview,usageregistry.json, andlib/docs.tsCard Preview
components/docs/previews/producthunt-button.tsxpnpm previews:generaterun to update import mapScreenshots
/dev/screenshotspagepublic/previews/producthunt-button-dark.pngexistspublic/previews/producthunt-button-light.pngexistsRegistry Build
pnpm registry:buildpassespnpm buildpasses with no errorsnpx shadcn@latest add http://localhost:3000/r/producthunt-button.jsonScreenshots
Notes
#DA552Fmatches official PH brandingcurrentColoricon usesevenoddfill rule so the P is a true transparent cutout — works on any backgroundPRODUCTHUNT_TOKENfor live API fetching; works without it whenupvotes/nameprops are pre-fetchedclass-variance-authority