diff --git a/demo/partials/avatar.html b/demo/partials/avatar.html
index dd0e42e..c6455c1 100644
--- a/demo/partials/avatar.html
+++ b/demo/partials/avatar.html
@@ -1,4 +1,4 @@
-<section class="section section-tokens" aria-labelledby="avatar-heading">
+<section class="demo-section" aria-labelledby="avatar-heading">
   <h2 id="avatar-heading">Avatar</h2>
 
   <h3>Sizes</h3>
@@ -34,4 +34,22 @@
     <span class="avatar avatar-md avatar-accent" data-status="offline">VL</span>
     <span class="avatar avatar-md avatar-danger" data-status="busy">AW</span>
   </div>
+
+  <h3>Vue avatar</h3>
+  <div id="vue-avatar-app" class="vue-mount"></div>
+  <script type="module">
+    import { createApp } from "vue";
+    import { GnAvatar } from "/vue/index.js";
+
+    createApp({
+      components: { GnAvatar },
+      template: `
+        <div class="cluster">
+          <gn-avatar initials="JD" size="md" variant="primary" status="online"></gn-avatar>
+          <gn-avatar icon="ph-user" size="md" variant="secondary"></gn-avatar>
+          <gn-avatar src="/assets/avatar-placeholder.png" alt="User" size="md"></gn-avatar>
+        </div>
+      `
+    }).mount("#vue-avatar-app");
+  </script>
 </section>
diff --git a/demo/partials/chips.html b/demo/partials/chips.html
index bdc47dc..d5aee5e 100644
--- a/demo/partials/chips.html
+++ b/demo/partials/chips.html
@@ -1,4 +1,4 @@
-<section class="section section-tokens" aria-labelledby="chips-heading">
+<section class="demo-section" aria-labelledby="chips-heading">
   <h2 id="chips-heading">Chips</h2>
 
   <h3>Default chips</h3>
@@ -21,4 +21,31 @@
     <span class="chip chip-sm">Small<button class="chip-remove" aria-label="Remove" type="button"><i class="ph ph-x"></i></button></span>
     <span class="chip chip-sm chip-secondary">Tiny<button class="chip-remove" aria-label="Remove" type="button"><i class="ph ph-x"></i></button></span>
   </div>
+
+  <h3>Vue chips</h3>
+  <div id="vue-chips-app" class="vue-mount"></div>
+  <script type="module">
+    import { createApp, ref } from "vue";
+    import { GnChip } from "/vue/index.js";
+
+    createApp({
+      components: { GnChip },
+      setup() {
+        const chips = ref([
+          { label: "Tag", variant: "default" },
+          { label: "Primary", variant: "primary" },
+          { label: "Removable", variant: "secondary", removable: true }
+        ]);
+        const remove = index => chips.value.splice(index, 1);
+        return { chips, remove };
+      },
+      template: `
+        <div class="cluster">
+          <gn-chip v-for="(chip, index) in chips" :key="chip.label"
+            :variant="chip.variant" :removable="chip.removable" @remove="remove(index)"
+          >{{ chip.label }}</gn-chip>
+        </div>
+      `
+    }).mount("#vue-chips-app");
+  </script>
 </section>
diff --git a/demo/partials/choices.html b/demo/partials/choices.html
index 088e718..81f2ccc 100644
--- a/demo/partials/choices.html
+++ b/demo/partials/choices.html
@@ -64,4 +64,28 @@
       <span class="switch-label">Disabled on</span>
     </label>
   </div>
+
+  <h3>Vue controls</h3>
+  <div id="vue-choices-app" class="vue-mount"></div>
+  <script type="module">
+    import { createApp, ref } from "vue";
+    import { GnCheckbox, GnRadio, GnSwitch } from "/vue/index.js";
+
+    createApp({
+      components: { GnCheckbox, GnRadio, GnSwitch },
+      setup() {
+        const checked = ref(true);
+        const radio = ref("b");
+        const toggled = ref(false);
+        return { checked, radio, toggled };
+      },
+      template: `
+        <div class="demo-row">
+          <gn-checkbox v-model="checked">Vue checkbox</gn-checkbox>
+          <gn-radio v-model="radio" value="b">Vue radio</gn-radio>
+          <gn-switch v-model="toggled">Vue switch</gn-switch>
+        </div>
+      `
+    }).mount("#vue-choices-app");
+  </script>
 </section>
diff --git a/demo/partials/divider.html b/demo/partials/divider.html
index 7bfea68..8a57c53 100644
--- a/demo/partials/divider.html
+++ b/demo/partials/divider.html
@@ -11,4 +11,22 @@
   <span>Before</span>
   <hr class="divider" data-orientation="vertical">
   <span>After</span>
+
+  <h3>Vue divider</h3>
+  <div id="vue-divider-app" class="vue-mount"></div>
+  <script type="module">
+    import { createApp } from "vue";
+    import { GnDivider } from "/vue/index.js";
+
+    createApp({
+      components: { GnDivider },
+      template: `
+        <div class="demo-row" style="align-items: center;">
+          <span>Before</span>
+          <gn-divider orientation="vertical"></gn-divider>
+          <span>After</span>
+        </div>
+      `
+    }).mount("#vue-divider-app");
+  </script>
 </section>
diff --git a/demo/partials/loader.html b/demo/partials/loader.html
index 6072611..187db6d 100644
--- a/demo/partials/loader.html
+++ b/demo/partials/loader.html
@@ -17,4 +17,22 @@
     <span class="loader loader-lg" role="status" aria-label="Saving"><span class="loader-spin"></span></span>
     <span>Saving changes...</span>
   </div>
+
+  <h3>Vue loader</h3>
+  <div id="vue-loader-app" class="vue-mount"></div>
+  <script type="module">
+    import { createApp } from "vue";
+    import { GnLoader } from "/vue/index.js";
+
+    createApp({
+      components: { GnLoader },
+      template: `
+        <div class="demo-row">
+          <gn-loader type="spin" size="md"></gn-loader>
+          <gn-loader type="dots" size="md"></gn-loader>
+          <gn-loader type="bar" size="md" label="Progress"></gn-loader>
+        </div>
+      `
+    }).mount("#vue-loader-app");
+  </script>
 </section>
diff --git a/demo/partials/pagination.html b/demo/partials/pagination.html
index 1dea582..6840c6c 100644
--- a/demo/partials/pagination.html
+++ b/demo/partials/pagination.html
@@ -10,4 +10,22 @@
     <button type="button" class="pagination-item">5</button>
     <button type="button" class="pagination-item" aria-label="Next page"><i class="ph ph-caret-right" aria-hidden="true"></i></button>
   </nav>
+
+  <h3>Vue pagination</h3>
+  <div id="vue-pagination-app" class="vue-mount"></div>
+  <script type="module">
+    import { createApp, ref } from "vue";
+    import { GnPagination } from "/vue/index.js";
+
+    createApp({
+      components: { GnPagination },
+      setup() {
+        const page = ref(1);
+        return { page };
+      },
+      template: `
+        <gn-pagination v-model:page="page" :total-pages="5"></gn-pagination>
+      `
+    }).mount("#vue-pagination-app");
+  </script>
 </section>
diff --git a/demo/partials/select-textarea.html b/demo/partials/select-textarea.html
index 9d6f7ca..1b85bdd 100644
--- a/demo/partials/select-textarea.html
+++ b/demo/partials/select-textarea.html
@@ -35,4 +35,31 @@
       </label>
     </div>
   </div>
+
+  <h3>Vue select & textarea</h3>
+  <div id="vue-select-textarea-app" class="vue-mount"></div>
+  <script type="module">
+    import { createApp, ref } from "vue";
+    import { GnSelect, GnTextarea } from "/vue/index.js";
+
+    createApp({
+      components: { GnSelect, GnTextarea },
+      setup() {
+        const selected = ref("");
+        const message = ref("");
+        const options = ref([
+          { value: "", label: "Choose an option" },
+          { value: "one", label: "Option one" },
+          { value: "two", label: "Option two" }
+        ]);
+        return { selected, message, options };
+      },
+      template: `
+        <div class="demo-row">
+          <gn-select label="Vue select" v-model="selected" :options="options"></gn-select>
+          <gn-textarea label="Vue textarea" v-model="message" placeholder="Type a message..." rows="3"></gn-textarea>
+        </div>
+      `
+    }).mount("#vue-select-textarea-app");
+  </script>
 </section>
diff --git a/demo/partials/stepper.html b/demo/partials/stepper.html
index e7cde95..867d080 100644
--- a/demo/partials/stepper.html
+++ b/demo/partials/stepper.html
@@ -41,4 +41,26 @@
       <h3 class="step-title">Done</h3>
     </li>
   </ol>
+  <h3>Vue steps</h3>
+  <div id="vue-stepper-app" class="vue-mount"></div>
+  <script type="module">
+    import { createApp, ref } from "vue";
+    import { GnSteps, GnStep } from "/vue/index.js";
+
+    createApp({
+      components: { GnSteps, GnStep },
+      setup() {
+        const items = ref([
+          { title: "Cart", text: "Items added.", status: "complete" },
+          { title: "Shipping", text: "Choose address.", status: "current" },
+          { title: "Payment", text: "Enter details.", status: "disabled" },
+          { title: "Review", status: "" }
+        ]);
+        return { items };
+      },
+      template: `
+        <gn-steps :items="items"></gn-steps>
+      `
+    }).mount("#vue-stepper-app");
+  </script>
 </section>
diff --git a/src/vue/components/GnDivider.js b/src/vue/components/GnDivider.js
new file mode 100644
index 0000000..b431d26
--- /dev/null
+++ b/src/vue/components/GnDivider.js
@@ -0,0 +1,28 @@
+/**
+ * GnDivider - Horizontal or vertical divider.
+ * Keeps API compatible with gnexus-ui-kit.
+ */
+
+import { defineComponent, h } from "vue";
+import { cx } from "../utils.js";
+
+export default defineComponent({
+	name: "GnDivider",
+	props: {
+		orientation: { type: String, default: "horizontal" },
+		variant: { type: String, default: "default" },
+		dashed: { type: Boolean, default: false }
+	},
+	setup(props, { slots }) {
+		return () => h("hr", {
+			class: cx("divider", {
+				"divider-strong": props.variant === "strong",
+				"divider-dashed": props.dashed,
+				"divider-vertical": props.orientation === "vertical"
+			}),
+			"data-variant": props.variant !== "default" ? props.variant : undefined,
+			"data-orientation": props.orientation !== "horizontal" ? props.orientation : undefined,
+			"aria-hidden": "true"
+		}, slots.default?.());
+	}
+});
diff --git a/src/vue/components/GnStep.js b/src/vue/components/GnStep.js
new file mode 100644
index 0000000..c3bc7ac
--- /dev/null
+++ b/src/vue/components/GnStep.js
@@ -0,0 +1,38 @@
+/**
+ * GnStep - Single step for use inside GnSteps.
+ * Keeps API compatible with gnexus-ui-kit.
+ */
+
+import { defineComponent, h } from "vue";
+import { cx, iconNode } from "../utils.js";
+
+export default defineComponent({
+	name: "GnStep",
+	props: {
+		title: { type: String, default: "" },
+		text: { type: String, default: "" },
+		marker: { type: [String, Number], default: "" },
+		status: { type: String, default: "" },
+		disabled: { type: Boolean, default: false }
+	},
+	setup(props, { slots }) {
+		const isComplete = () => props.status === "complete";
+		const resolvedMarker = () => {
+			if(slots.marker) return slots.marker();
+			if(props.marker) return props.marker;
+			return isComplete() ? iconNode("ph-check") : "";
+		};
+
+		return () => h("li", {
+			class: cx("step", {
+				"step-complete": isComplete(),
+				"step-current": props.status === "current",
+				"step-disabled": props.disabled || props.status === "disabled"
+			})
+		}, [
+			h("span", { class: "step-marker" }, resolvedMarker()),
+			h("h3", { class: "step-title" }, slots.title?.() || props.title),
+			(props.text || slots.text) && h("p", { class: "step-text" }, slots.text?.() || props.text)
+		]);
+	}
+});
diff --git a/src/vue/components/GnSteps.js b/src/vue/components/GnSteps.js
index 0d2403d..81c89db 100644
--- a/src/vue/components/GnSteps.js
+++ b/src/vue/components/GnSteps.js
@@ -4,7 +4,7 @@
  */
 
 import { defineComponent, h } from "vue";
-import { cx } from "../utils.js";
+import { cx, iconNode } from "../utils.js";
 
 export default defineComponent({
 	name: "GnSteps",
@@ -17,16 +17,21 @@
 		return () => h("ol", {
 			...attrs,
 			class: cx("steps", { "steps-vertical": props.vertical }, attrs.class)
-		}, props.items.map((item, index) => h("li", {
+		}, props.items.map((item, index) => {
+		const isComplete = item.status === "complete";
+		const marker = item.marker || (isComplete ? iconNode("ph-check") : String(index + 1));
+
+		return h("li", {
 			class: cx("step", {
-				"step-complete": item.status === "complete",
+				"step-complete": isComplete,
 				"step-current": item.status === "current",
 				"step-disabled": item.disabled || item.status === "disabled"
 			})
 		}, [
-			h("span", { class: "step-marker" }, item.marker || String(index + 1)),
+			h("span", { class: "step-marker" }, marker),
 			h("h3", { class: "step-title" }, item.title),
 			item.text && h("p", { class: "step-text" }, item.text)
-		])));
+		]);
+	}));
 	}
 });
diff --git a/src/vue/index.js b/src/vue/index.js
index 2e8a52b..e48491d 100644
--- a/src/vue/index.js
+++ b/src/vue/index.js
@@ -46,6 +46,8 @@
 export { default as GnBreadcrumbItem } from "./components/GnBreadcrumbItem.js";
 export { default as GnAccordion } from "./components/GnAccordion.js";
 export { default as GnSteps } from "./components/GnSteps.js";
+export { default as GnStep } from "./components/GnStep.js";
+export { default as GnDivider } from "./components/GnDivider.js";
 export { default as GnFileUpload } from "./components/GnFileUpload.js";
 export { default as GnFileAttachment } from "./components/GnFileAttachment.js";
 export { default as GnPopover } from "./components/GnPopover.js";
diff --git a/src/vue/plugin.js b/src/vue/plugin.js
index 3310246..612a357 100644
--- a/src/vue/plugin.js
+++ b/src/vue/plugin.js
@@ -46,6 +46,8 @@
 import GnBreadcrumbItem from "./components/GnBreadcrumbItem.js";
 import GnAccordion from "./components/GnAccordion.js";
 import GnSteps from "./components/GnSteps.js";
+import GnStep from "./components/GnStep.js";
+import GnDivider from "./components/GnDivider.js";
 import GnFileUpload from "./components/GnFileUpload.js";
 import GnFileAttachment from "./components/GnFileAttachment.js";
 import GnPopover from "./components/GnPopover.js";
@@ -97,6 +99,8 @@
 	GnBreadcrumbItem,
 	GnAccordion,
 	GnSteps,
+	GnStep,
+	GnDivider,
 	GnFileUpload,
 	GnFileAttachment,
 	GnPopover,
diff --git a/tests/demo-screenshot.spec.js b/tests/demo-screenshot.spec.js
index 7496a0c..46010c6 100644
--- a/tests/demo-screenshot.spec.js
+++ b/tests/demo-screenshot.spec.js
@@ -31,7 +31,15 @@
   { name: "timeline", label: "Timeline" },
   { name: "drawer", label: "Drawers" },
   { name: "toasts", label: "Toasts" },
-  { name: "breadcrumbs", label: "Breadcrumbs" }
+  { name: "breadcrumbs", label: "Breadcrumbs" },
+  { name: "choices", label: "Choice controls" },
+  { name: "select-textarea", label: "Select & Textarea" },
+  { name: "divider", label: "Divider" },
+  { name: "stepper", label: "Stepper" },
+  { name: "pagination", label: "Pagination" },
+  { name: "loader", label: "Loader" },
+  { name: "chips", label: "Chips" },
+  { name: "avatar", label: "Avatar" }
 ];
 
 test.describe("@screenshot", () => {