diff --git a/demo/partials/alerts.html b/demo/partials/alerts.html
index 5ec78cd..5b49085 100644
--- a/demo/partials/alerts.html
+++ b/demo/partials/alerts.html
@@ -47,4 +47,21 @@
       </div>
     </div>
   </div>
+
+  <h3>Vue alerts</h3>
+  <div id="vue-alerts-app" class="vue-mount"></div>
+  <script type="module">
+    import { createApp } from "vue";
+    import { GnAlert } from "/vue/index.js";
+
+    createApp({
+      components: { GnAlert },
+      template: `
+        <div class="demo-row demo-row-vertical">
+          <gn-alert variant="success" title="Vue success" dismissible>Operation completed.</gn-alert>
+          <gn-alert variant="warning">Vue warning alert.</gn-alert>
+        </div>
+      `
+    }).mount("#vue-alerts-app");
+  </script>
 </section>
diff --git a/demo/partials/badges.html b/demo/partials/badges.html
index 8aee007..7fa4f9a 100644
--- a/demo/partials/badges.html
+++ b/demo/partials/badges.html
@@ -37,4 +37,22 @@
       Failed
     </span>
   </div>
+
+  <h3>Vue badges</h3>
+  <div id="vue-badges-app" class="vue-mount"></div>
+  <script type="module">
+    import { createApp } from "vue";
+    import { GnBadge } from "/vue/index.js";
+
+    createApp({
+      components: { GnBadge },
+      template: `
+        <div class="demo-row">
+          <gn-badge variant="primary">Vue primary</gn-badge>
+          <gn-badge variant="success">Vue success</gn-badge>
+          <gn-badge variant="warning">Vue warning</gn-badge>
+        </div>
+      `
+    }).mount("#vue-badges-app");
+  </script>
 </section>
diff --git a/demo/partials/buttons.html b/demo/partials/buttons.html
index ba81256..1f87a82 100644
--- a/demo/partials/buttons.html
+++ b/demo/partials/buttons.html
@@ -92,4 +92,34 @@
     <button class="btn btn-danger-secondary btn-md">Danger secondary</button>
     <button class="btn btn-danger-tertiary btn-md">Danger tertiary</button>
   </div>
+
+  <h3>Vue buttons</h3>
+  <div id="vue-buttons-app" class="vue-mount"></div>
+  <script type="module">
+    import { createApp } from "vue";
+    import { GnButton } from "/vue/index.js";
+
+    createApp({
+      components: { GnButton },
+      data() {
+        return {
+          variants: ["primary", "secondary", "accent", "success", "warning", "info", "danger"],
+          sizes: ["lg", "md", "sm", "xs", "xxs"]
+        };
+      },
+      template: `
+        <div class="demo-row">
+          <gn-button v-for="v in variants" :key="v" :variant="v" size="md">{{ v }}</gn-button>
+        </div>
+        <div class="demo-row">
+          <gn-button v-for="s in sizes" :key="s" variant="primary" :size="s">{{ s }}</gn-button>
+        </div>
+        <div class="demo-row">
+          <gn-button variant="primary" icon="essentials/plus">With icon</gn-button>
+          <gn-button variant="secondary" loading>Loading</gn-button>
+          <gn-button variant="tertiary" disabled>Disabled</gn-button>
+        </div>
+      `
+    }).mount("#vue-buttons-app");
+  </script>
 </section>
diff --git a/demo/partials/cards.html b/demo/partials/cards.html
index 7a6fb4f..a9e6895 100644
--- a/demo/partials/cards.html
+++ b/demo/partials/cards.html
@@ -65,4 +65,25 @@
       <div class="card-content">Generous padding and larger radius.</div>
     </article>
   </div>
+
+  <h3>Vue cards</h3>
+  <div id="vue-cards-app" class="vue-mount"></div>
+  <script type="module">
+    import { createApp } from "vue";
+    import { GnCard, GnButton } from "/vue/index.js";
+
+    createApp({
+      components: { GnCard, GnButton },
+      template: `
+        <div class="demo-row" style="align-items: stretch;">
+          <gn-card title="Vue card" style="max-width: 320px;">
+            Content rendered through the Vue adapter.
+            <template #footer>
+              <gn-button variant="primary" size="sm">Action</gn-button>
+            </template>
+          </gn-card>
+        </div>
+      `
+    }).mount("#vue-cards-app");
+  </script>
 </section>
diff --git a/demo/partials/inputs.html b/demo/partials/inputs.html
index 08c269d..fb3ccd7 100644
--- a/demo/partials/inputs.html
+++ b/demo/partials/inputs.html
@@ -61,4 +61,29 @@
       </label>
     </div>
   </div>
+
+  <h3>Vue inputs</h3>
+  <div id="vue-inputs-app" class="vue-mount"></div>
+  <script type="module">
+    import { createApp } from "vue";
+    import { GnInput } from "/vue/index.js";
+
+    createApp({
+      components: { GnInput },
+      data() {
+        return {
+          search: "",
+          email: "hello@example.com",
+          errorValue: "Invalid value"
+        };
+      },
+      template: `
+        <div class="demo-row" style="align-items: flex-end;">
+          <gn-input v-model="search" label="Search" icon="essentials/zoom/search" placeholder="Search..." />
+          <gn-input v-model="email" label="Email" type="email" />
+          <gn-input v-model="errorValue" label="Error" state="error" help="This field has an error." />
+        </div>
+      `
+    }).mount("#vue-inputs-app");
+  </script>
 </section>
diff --git a/demo/partials/tables.html b/demo/partials/tables.html
index 50f8044..fe92bcc 100644
--- a/demo/partials/tables.html
+++ b/demo/partials/tables.html
@@ -1,4 +1,4 @@
-<section class="section section-tokens" aria-labelledby="tables-heading">
+<section class="demo-section" aria-labelledby="tables-heading">
   <h2 id="tables-heading">Tables</h2>
 
   <div class="table-container">
@@ -58,4 +58,44 @@
       </tbody>
     </table>
   </div>
+
+  <h3>Vue table</h3>
+  <div id="vue-tables-app" class="vue-mount"></div>
+  <script type="module">
+    import { createApp } from "vue";
+    import { GnTable, GnTableHeader, GnTableRow, GnBadge } from "/vue/index.js";
+
+    createApp({
+      components: { GnTable, GnTableHeader, GnTableRow, GnBadge },
+      data() {
+        return {
+          rows: [
+            { name: "Alice", role: "Admin", status: "success", label: "Active", score: 94 },
+            { name: "Bob", role: "Editor", status: "warning", label: "Pending", score: 72 },
+            { name: "Carol", role: "Viewer", status: "secondary", label: "Offline", score: 88 }
+          ]
+        };
+      },
+      template: `
+        <gn-table sortable selectable style="max-width: 640px;">
+          <thead>
+            <tr>
+              <gn-table-header sortable>Name</gn-table-header>
+              <gn-table-header sortable>Role</gn-table-header>
+              <gn-table-header sortable>Status</gn-table-header>
+              <gn-table-header sortable>Score</gn-table-header>
+            </tr>
+          </thead>
+          <tbody>
+            <gn-table-row v-for="row in rows" :key="row.name">
+              <td>{{ row.name }}</td>
+              <td>{{ row.role }}</td>
+              <td><gn-badge :variant="row.status">{{ row.label }}</gn-badge></td>
+              <td>{{ row.score }}</td>
+            </gn-table-row>
+          </tbody>
+        </gn-table>
+      `
+    }).mount("#vue-tables-app");
+  </script>
 </section>
diff --git a/src/scss/components/_alerts.scss b/src/scss/components/_alerts.scss
index df06ce9..0915558 100644
--- a/src/scss/components/_alerts.scss
+++ b/src/scss/components/_alerts.scss
@@ -71,4 +71,31 @@
     background-color: $danger-bg;
     color: $danger-text;
   }
+
+  .alert-close {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    margin: -$space-1 0;
+    border: 0;
+    border-radius: $radius-full;
+    background: transparent;
+    color: currentColor;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity $motion-base $motion-ease, background-color $motion-base $motion-ease;
+
+    &:hover {
+      opacity: 1;
+      background-color: rgba($neutral-900, 0.08);
+    }
+
+    &:focus-visible {
+      @include focus_ring;
+    }
+  }
 }
diff --git a/src/vue/components/GnAlert.js b/src/vue/components/GnAlert.js
index 24b155d..a0daafe 100644
--- a/src/vue/components/GnAlert.js
+++ b/src/vue/components/GnAlert.js
@@ -16,9 +16,11 @@
 		variant: { type: String, default: "primary" },
 		icon: { type: String, default: "" },
 		role: { type: String, default: "status" },
-		title: { type: String, default: "" }
+		title: { type: String, default: "" },
+		dismissible: { type: Boolean, default: false }
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["dismiss"],
+	setup(props, { attrs, slots, emit }) {
 		return () => {
 			const variant = normalizeVariant(props.variant);
 			const iconName = props.icon || STATE_ICONS[variant] || "";
@@ -32,7 +34,13 @@
 				h("div", { class: "alert-content" }, [
 					props.title && h("div", { class: "alert-title" }, props.title),
 					slots.default?.()
-				])
+				]),
+				props.dismissible && h("button", {
+					type: "button",
+					class: "alert-close",
+					"aria-label": "Dismiss",
+					onClick: () => emit("dismiss")
+				}, [iconNode("ph-x")])
 			]);
 		};
 	}
diff --git a/tests/demo-screenshot.spec.js b/tests/demo-screenshot.spec.js
index 46010c6..97aff12 100644
--- a/tests/demo-screenshot.spec.js
+++ b/tests/demo-screenshot.spec.js
@@ -8,7 +8,7 @@
 const SECTIONS = [
   { name: "palette", label: "Palette" },
   { name: "buttons", label: "Buttons" },
-  { name: "forms", label: "Forms" },
+  { name: "inputs", label: "Inputs" },
   { name: "alerts", label: "Alerts" },
   { name: "badges", label: "Badges" },
   { name: "cards", label: "Cards" },