Embed Nostr anywhere on the internet, a Zap Button for every website.
Nostr Components makes it easy to embed 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.
🔹 Nostr Zap - Lightning Network zap button for Nostr
🔹 Nostr Profile Badge - Compact badge-style profile display
🔹 Nostr Profile - Full Nostr profile with more details
🔹 Nostr Post - Embed a specific Nostr post
🔹 Nostr Follow - Follow button for Nostr
🔹 Nostr DM - Send a direct message on Nostr
🔹 Nostr Live Chat - Real-time chat with message history
🔹 Nostr Comment - Decentralized comment system for any website
🔹 Wordpress Integration - Wordpress Integration
-
Include the Script(s): Add the compiled component script to your HTML's
<head>. If using thenostr-postcomponent with multiple images/videos, also include Glide.js CSS for the carousel feature.<head> <!-- Required: Nostr Components Script (choose UMD or ES) --> <script src="./dist/nostr-components.umd.js"></script> <!-- Or nostr-components.es.js --> <script> // Initialize components (only needed for UMD build) NostrComponents.default.init(); </script> <!-- Optional: Glide.js CSS for Post Carousel --> <!-- Needed only if displaying posts that might contain multiple images/videos --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.theme.min.css" /> </head>
- UMD (Universal Module Definition): Use
<script src="./dist/nostr-components.umd.js"></script>and the initialization script. - ES Module: Use
<script type="module">import NostrComponents from './dist/nostr-components.es.js'; NostrComponents.init();</script>.
_Note: Replace
./dist/nostr-components._.jswith the actual path to the file on your server or use a CDN link if available (e.g.,https://nostr-components.web.app/dist/nostr-components.umd.js).* - UMD (Universal Module Definition): Use
-
Use the Components: Place the component tags anywhere in your
<body>.
A small badge displaying a Nostr profile with a username and avatar.
Usage:
<head>
<script
type="module"
src="./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="./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="./dist/components/nostr-post.es.js"></script>
</head>
<body>
<nostr-post
eventId="note1t2jvt5vpusrwrxkfu8x8r7q65zzvm32xuur6y7am4zn475r8ucjqmwwhd2"
></nostr-post>
<!-- Note: The previous example incorrectly used a pubkey, use eventId for posts -->
</body>Preview:
A simple button that allows users to follow a Nostr profile.
Usage:
<head>
<script
type="module"
src="./dist/components/nostr-follow-button.es.js"
></script>
</head>
<body>
<nostr-follow-button
pubkey="npub1qsvv5ttv6mrlh38q8ydmw3gzwq360mdu8re2vr7rk68sqmhmsh4svhsft3"
></nostr-follow-button>
</body>Preview:
A Lightning Network zap button that allows users to send sats to any Nostr user with a lightning address or LNURL.
Usage:
<head>
<script type="module" src="./dist/components/nostr-zap.es.js"></script>
</head>
<body>
<nostr-zap
npub="npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6"
theme="dark"
button-text="⚡ Zap Me"
button-color="#8a63d2"
amount="1000"
></nostr-zap>
</body>Preview:
A simple direct message composer for sending one-time messages to any Nostr user.
Usage:
<head>
<script type="module" src="./dist/components/nostr-dm.es.js"></script>
</head>
<body>
<!-- Basic DM, user will be prompted to enter a recipient -->
<nostr-dm theme="light"></nostr-dm>
<!-- Pre-configured recipient with npub -->
<nostr-dm
recipient-npub="npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk"
theme="light"
relays="wss://relay.damus.io,wss://relay.primal.net"
></nostr-dm>
<!-- Using NIP-05 identifier -->
<nostr-dm
nip05="user@domain.com"
theme="dark"
></nostr-dm>
</body>Preview:
Real-time chat component with persistent message history and live updates.
Usage:
<head>
<script type="module" src="./dist/components/nostr-live-chat.es.js"></script>
</head>
<body>
<!-- Basic live chat, user will be prompted to enter a recipient -->
<nostr-live-chat theme="light"></nostr-live-chat>
<!-- Pre-configured recipient with npub -->
<nostr-live-chat
recipient-npub="npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk"
theme="light"
relays="wss://relay.damus.io,wss://relay.primal.net,wss://relay.snort.social"
></nostr-live-chat>
<!-- Using NIP-05 identifier -->
<nostr-live-chat
nip05="user@domain.com"
theme="dark"
></nostr-live-chat>
</body>Preview:
A complete decentralized comment system that stores comments on the Nostr network instead of a traditional database.
Usage:
<head>
<script type="importmap">
{
"imports": {
"lit": "https://unpkg.com/lit@3.1.0/index.js?module",
"dayjs": "https://unpkg.com/dayjs@1.11.10/dayjs.min.js?module"
}
}
</script>
<script type="module" src="./dist/components/nostr-comment.es.js"></script>
</head>
<body>
<nostr-comment
theme="light"
placeholder="Write a comment..."
relays="wss://relay.damus.io,wss://nostr.wine,wss://relay.nostr.net"
></nostr-comment>
</body>Preview:
Install the Nostr Components plugin from the WordPress plugin directory to easily embed Nostr content in your posts and pages.
Check out our full documentation here.
This project uses Storybook for component development and testing. The setup includes both public showcase stories and private testing stories.
Development Commands:
# 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! 🚀