diff --git a/assets/images/guide/glossary/address/address-component.png b/assets/images/guide/glossary/address/address-component.png
new file mode 100644
index 000000000..9847969ab
Binary files /dev/null and b/assets/images/guide/glossary/address/address-component.png differ
diff --git a/assets/images/guide/glossary/address/address-component@2x.png b/assets/images/guide/glossary/address/address-component@2x.png
new file mode 100644
index 000000000..8733c1186
Binary files /dev/null and b/assets/images/guide/glossary/address/address-component@2x.png differ
diff --git a/guide/glossary/address.md b/guide/glossary/address.md
index e015ddb97..5b7d172c1 100644
--- a/guide/glossary/address.md
+++ b/guide/glossary/address.md
@@ -161,6 +161,23 @@ Address reuse is the practice of receiving more than one transaction to a single
 
 </div>
 
+## Componentry
+
+When displaying addresses in your application, consider building interactive components that go beyond static text. A truncated preview with the option to expand, paired with a copy button, reduces the need for manual selection and the errors that come with it.
+
+Apply the same formatting principles from above: mono-space fonts, character grouping, and prefix highlighting. Add a toast or visual confirmation after copying so users know the address was captured correctly. Supporting light and dark themes helps the component fit into different application contexts.
+
+{% include image.html
+   image = "/assets/images/guide/glossary/address/address-component.png"
+   retina = "/assets/images/guide/glossary/address/address-component@2x.png"
+   width = 735
+   height = 735
+   link-url = "https://matthewball.me/bitcoin-address-component/"
+   caption = 'An address component with expand, collapse, and copy-to-clipboard interactions ([source code](https://github.com/matthewrball/beautiful-bitcoin-address-component)).'
+   alt-text = "Bitcoin address display component showing Native SegWit and Wrapped SegWit addresses with copy and expand controls."
+   layout = "-background"
+%}
+
 ---
 
 Next, learn about the different kinds of [wallets]({{ '/guide/glossary/wallet/' | relative_url }}) that exist with bitcoin.
diff --git a/guide/resources/code-resources.md b/guide/resources/code-resources.md
index 499b311a4..454daf653 100644
--- a/guide/resources/code-resources.md
+++ b/guide/resources/code-resources.md
@@ -53,6 +53,15 @@ The [BDK Swift example wallet](https://github.com/reez/BDKSwiftExampleWallet) is
 
 The [BDG Wallet](https://github.com/bdgwallet) is a work in process project for implementing the reference designs from the guide in Swift and Flutter. It is also built using [LDK Node](https://lightningdevkit.org).
 
+## UI components
+
+### Bitcoin address display
+
+A vanilla JavaScript [web component](https://matthewball.me/bitcoin-address-component/) for displaying bitcoin addresses with truncation, expand/collapse, and copy-to-clipboard. Implements the [visual formatting]({{ '/guide/glossary/address/#visual-formatting' | relative_url }}) principles from the guide including prefix highlighting, character grouping, and mono-space fonts. Zero dependencies, Shadow DOM encapsulation, dark mode support.
+
+- [Live demo](https://matthewball.me/bitcoin-address-component/)
+- [Source code on GitHub](https://github.com/matthewrball/beautiful-bitcoin-address-component)
+
 ## Guides and blog posts
 
 Various guides on how to build bitcoin wallets that are related to the Bitcoin Design Community.