Embed Nostr anywhere on the internet, a Zap Button for every webpage.
Nostr Components makes it easy to embed Zap button, Nostr profiles, posts, and follow buttons in any website. Inspired by fiatjaf's Nostr Web Components, this project adds a beautiful UI, a Storybook component generator (for webmasters), and allows embedding Nostr content anywhere on the Internet.
Add the component script to your HTML's <head>. Each component can be loaded individually or use the full bundle.
<head>
<!-- Load individual component (recommended for smaller bundles) -->
<script type="module" src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/components/nostr-profile.es.js"></script>
<!-- Or load the full bundle: ES -->
<script type="module" src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/nostr-components.es.js"></script>
<!-- Or load the full bundle: UMD -->
<script src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/nostr-components.umd.js"></script>
<!-- Optional: Dark theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/themes/dark.css">
</head>
<body>
<h1> Welcome to My home page </h1>
<nostr-zap-button nip05="saiy2k@iris.to" url="https://nostr-components.web.app/"></nostr-zap-button>
<nostr-profile npub="npub1qsvv5ttv6mrlh38q8ydmw3gzwq360mdu8re2vr7rk68sqmhmsh4svhsft3"></nostr-profile>
<nostr-like-button></nostr-like-button>
<!-- For more components, see below -->
</body>Install the package via npm:
npm install nostr-componentsThen import components in your JavaScript/TypeScript:
// [Will update here soon for individual components]
// Or import the full bundle
import 'nostr-components';All interactive components (Follow, Like, Zap) require user authentication. Components lazily load window.nostr.js on first interaction, which supports:
- NIP-07 Browser Extensions (Alby, nos2x, etc.)
- NIP-46 Remote Signers (Bunkers)
No host-page setup is required. Users can connect with an existing signer or through the floating window.nostr.js widget when prompted.
A Zap button that sends sats to a Nostr user and can optionally scope those zaps to a specific URL for open-web attribution.
When url is provided, the component uses a deterministic ["a", "39735:<pubkey>:<normalized_url>"] tag so relays can apply URL-specific #a filtering when fetching zap receipts.
What is Zap?
Usage:
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/components/nostr-zap-button.es.js">
</script>
</head>
<body>
<nostr-zap-button
npub="npub1qsvv5ttv6mrlh38q8ydmw3gzwq360mdu8re2vr7rk68sqmhmsh4svhsft3"
data-theme="dark"
url="https://nostr-components.web.app/"
text="⚡ Zap Me"
></nostr-zap-button>
</body>Preview:
A simple button that allows users to follow a Nostr profile.
Usage:
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/components/nostr-follow-button.es.js"
></script>
</head>
<body>
<nostr-follow-button
npub="npub1qsvv5ttv6mrlh38q8ydmw3gzwq360mdu8re2vr7rk68sqmhmsh4svhsft3"
></nostr-follow-button>
</body>Preview:
A like button that uses NIP-25 external content reactions to like or unlike any URL on the web and display the net reaction count.
If url is omitted, the component automatically uses the current page URL.
Usage:
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/components/nostr-like-button.es.js">
</script>
</head>
<body>
<!-- Like the current page URL -->
<nostr-like-button></nostr-like-button>
<!-- Like a specific URL with custom text -->
<nostr-like-button
url="https://github.com/saiy2k/nostr-components"
text="❤️">
</nostr-like-button>
</body>Preview:
A small badge displaying a Nostr profile with a username and avatar.
Usage:
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/components/nostr-profile-badge.es.js"
></script>
</head>
<body>
<nostr-profile-badge
pubkey="npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6"
></nostr-profile-badge>
</body>Preview:
A detailed profile card showing avatar, name, bio, notes count, followers, etc.
Usage:
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/components/nostr-profile.es.js">
</script>
</head>
<body>
<nostr-profile
pubkey="npub1a2cww4kn9wqte4ry70vyfwqyqvpswksna27rtxd8vty6c74era8sdcw83a"
></nostr-profile>
</body>Preview:
Embed any Nostr post by providing the event ID.
Usage:
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/components/nostr-post.es.js"></script>
</head>
<body>
<nostr-post
eventId="note1t2jvt5vpusrwrxkfu8x8r7q65zzvm32xuur6y7am4zn475r8ucjqmwwhd2"
></nostr-post>
</body>Preview:
Display Nostr livestreams (NIP-53) with video playback, participant information, and live status indicators.
Usage:
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/components/nostr-livestream.es.js">
</script>
</head>
<body>
<nostr-livestream
naddr="naddr1qq8xumn8ghj7un9d3shjtnyv9khzuewd9hsz6tn0v4kx2t99wumn8ghj7mn0wvhxcmmv9uq32amnwvaz7tmwdaehgu3wvfskuctwvyhxxmmd9u3x7a3x"
show-participants="true"
show-participant-count="true"
auto-play="false"
></nostr-livestream>
</body>Preview:
The Nostr Components WordPress plugin provides Gutenberg blocks and shortcodes for all components, making it easy to embed Nostr functionality in your WordPress site.
For more details, see the WordPress Plugin.
Check out our full documentation here.
If you encounter dependency resolution errors (ERESOLVE) when running npm install
with newer versions of npm, use:
npm install --legacy-peer-deps
### Storybook Setup
This project uses Storybook for component development and testing. The setup includes both public showcase stories and private testing stories.
**Development Commands:**
```bash
# Start Storybook in development mode (includes testing stories)
npm run storybook
# Build Storybook for production (excludes testing stories)
STORYBOOK_ENV=production npm run build-storybookStory Organization:
- Public Stories: Showcase stories for component demos and documentation
- Testing Stories: Private stories for development testing (excluded from production builds)
The production build automatically excludes all testing stories to keep the public Storybook clean and focused on showcasing components.
We welcome contributions!
Feel free to submit issues, feature requests, or PRs on GitHub.
This project is licensed under the MIT License.
💙 Spread Nostr Everywhere! 🚀