# nostr web components

you want to display a nostr username when you just have a pubkey? no build systems, just do this:

```javascript
<script src="https://cdn.jsdelivr.net/npm/nostr-web-components/dist/nostr-name.js"></script>
<div>hello, <nostr-name pubkey="npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6" /></div>
```

## demo

a more complete demo of all available components and how to use them can be found at https://unpkg.com/nostr-web-components/demo.html.

## how to use

bundled builds -- a single file that contains one component and all the dependencies, can be found at https://cdn.jsdelivr.net/npm/nostr-web-components/dist/, while unbundled builds are under the `./lib` directory. the unbundled files can either be imported using a normal bundler or directly in a browser using es6 imports.

### using standalone component bundles

there is one bundled file for each component, so if you’re just importing one component just get the one you need, as in the demo above.

### using the big bundle with all components

just include a script like `<script src="https://cdn.jsdelivr.net/npm/nostr-web-components/dist/index.js"></script>` and all components will be available globally.

see https://unpkg.com/nostr-web-components/bigbundledemo.html for a demo of this.

### using es6

in this case you must do something horrible like this (but it works!):

```html
<script type="importmap">
  {
    "imports": {
      "@nostr/tools/": "https://esm.sh/*jsr/@nostr/tools@2.17.4/",
      "@nostr/gadgets/": "https://esm.sh/*jsr/@nostr/gadgets@0.0.43/",
      "@noble/curves/": "https://esm.sh/*@noble/curves@1.2.0/",
      "@noble/hashes/": "https://esm.sh/*@noble/hashes@1.3.1/",
      "@scure/base/": "https://esm.sh/*@scure/base@1.1.1/",
      "@scure/base": "https://esm.sh/*@scure/base@1.1.1",
      "idb-keyval": "https://esm.sh/idb-keyval@6.2.1"
    },
    "scopes": {
      "https://esm.sh/": {
        "@jsr/nostr__tools/": "https://esm.sh/*@jsr/nostr__tools@2.17.4/",
        "@jsr/nostr__gadgets/": "https://esm.sh/*@jsr/nostr__gadgets@0.0.43/",
        "@jsr/fiatjaf__lru-cache/": "https://esm.sh/jsr/@fiatjaf/lru-cache@0.0.1/"
      }
    }
  }
</script>

<script type="module">
  import 'https://esm.sh/nostr-web-components/lib/nostr-name.js'
  import 'https://esm.sh/nostr-web-components/lib/nostr-picture.js'
</script>

<nostr-name pubkey="npub137gavftkelnara27cx56uchxr6qxvf4ragjfpe8qmlsl64kwrf3q34fpat"></nostr-name>
<nostr-picture pubkey="npub137gavftkelnara27cx56uchxr6qxvf4ragjfpe8qmlsl64kwrf3q34fpat"></nostr-picture>
```

see https://unpkg.com/nostr-web-components/importmapdemo.html for a demo of this.

## styling components

all components expose named [`part`s](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) that can be accessed with CSS like `nostr-picture::part(img) { border: 12px solid fuchsia; }`, see rendered HTML in browser console for part names available.

### styling components with tailwind

if you use tailwind you can use `part-[img]:border-2`, `part-[...]:text-red-500` (and so on) at the component directly in order to style its internal parts, it works like other special variant selectors like `hover:...` (the [demo](https://unpkg.com/nostr-web-components/demo.html) page is using this). you just need to add this to your `tailwind.config.js`:

```diff
+const plugin = require('tailwindcss/plugin')

 module.exports = {
   content: ["./src/**/*.{html,js}"],
+  plugins: [
+    plugin(({ matchVariant }) => {
+      matchVariant('part', value => {
+        return `&::part(${value})`
+      })
+    }),
+  ],
 }
```