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 use window.nostr.js which supports:
- NIP-07 Browser Extensions (Alby, nos2x, etc.)
- NIP-46 Remote Signers (Bunkers)
The script is loaded automatically on first interaction — no setup required. Users without an extension will see a floating widget to connect their Nostr account.
A Zap button that allows users to send sats to any Nostr user or a URL associated with a User. 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"
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 any URL on the web. When URL is not specified, current URL is taken.
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! 🚀