From 2a61caa9220094537222ee16496daa1908ea6faf Mon Sep 17 00:00:00 2001
From: Ayo <ayo@ayco.io>
Date: Thu, 14 May 2026 09:13:32 +0200
Subject: [PATCH] chore: update readme on how to use import maps

---
 README.md | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
diff --git a/README.md b/README.md
index 50a8890..76ef41e 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,32 @@ pnpm add web-component-base @ayo-run/status-indicator
 
 ## Usage
 
+Without a bundler that resolves `node_module` imports for you, you can use [import
+maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap):
+
+```html
+<html>
+  <head>
+    <script type="importmap">
+      {
+        "imports": {
+          "web-component-base": "./node_modules/web-component-base/dist/index.js",
+          "status-indicator": "./node_modules/@ayo-run/status-indicator/dist/status-indicator.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import StatusIndicator from "status-indicator";
+    </script>
+  </head>
+  <body>
+    <!-- you can use the status-indicator component now -->
+  </body>
+</html>
+```
+
+## Attributes
+
 ### 1. `status` attribute
 
 To indicate the status that determines the color of the circle, set the `status` attribute of the `status-indicator` component to any of the following values: `positive`, `negative`, `active`, or `intermediary`.
