diff --git a/packages/vue-vanilla/src/complex/CategorizationRenderer.vue b/packages/vue-vanilla/src/complex/CategorizationRenderer.vue
new file mode 100644
index 000000000..cb2287e5a
--- /dev/null
+++ b/packages/vue-vanilla/src/complex/CategorizationRenderer.vue
@@ -0,0 +1,192 @@
+<template>
+  <div :class="styles.categorization.root">
+    <div :class="styles.categorization.category">
+      <template v-for="(item, index) in categories" :key="`tab-${index}`">
+        <div @click="selected = index">
+          <button
+            :class="[selected === index ? styles.categorization.selected : '']"
+            :disabled="!item.isEnabled"
+          >
+            <label>{{ item.label }}</label>
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <div :class="styles.categorization.panel">
+      <DispatchRenderer
+        :schema="layout.schema"
+        :uischema="currentUischema"
+        :path="layout.path"
+        :enabled="layout.enabled"
+        :renderers="layout.renderers"
+        :cells="layout.cells"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import type {
+  Categorization,
+  JsonFormsRendererRegistryEntry,
+  Layout,
+  UISchemaElement,
+} from '@jsonforms/core';
+import {
+  and,
+  categorizationHasCategory,
+  createAjv,
+  deriveLabelForUISchemaElement,
+  isEnabled,
+  isVisible,
+  rankWith,
+  isCategorization,
+} from '@jsonforms/core';
+import {
+  DispatchRenderer,
+  rendererProps,
+  type RendererProps,
+  useJsonFormsLayout,
+} from '@jsonforms/vue';
+import { type CategoryItem, useTranslator, useVanillaLayout } from '../util';
+
+const layoutRenderer = defineComponent({
+  name: 'CategorizationRenderer',
+  components: {
+    DispatchRenderer,
+  },
+  props: {
+    ...rendererProps<Layout>(),
+  },
+  setup(props: RendererProps<Layout>) {
+    const input = useVanillaLayout(useJsonFormsLayout(props));
+
+    return {
+      ...input,
+      ajv: createAjv(),
+      t: useTranslator(),
+    };
+  },
+  data() {
+    return {
+      selected: 0,
+    };
+  },
+
+  computed: {
+    currentUischema(): UISchemaElement {
+      return this.categories[this.selected].element;
+    },
+    categories(): CategoryItem[] {
+      const { data, path } = this.layout;
+      return (this.layout.uischema as Categorization).elements
+        .filter((category) => isVisible(category, data, path, this.ajv))
+        .map((category): CategoryItem => {
+          return {
+            element: category,
+            isEnabled: isEnabled(category, data, path, this.ajv),
+            label: deriveLabelForUISchemaElement(category, this.t),
+          };
+        });
+    },
+  },
+});
+
+export default layoutRenderer;
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: layoutRenderer,
+  tester: rankWith(2, and(isCategorization, categorizationHasCategory)),
+};
+</script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/vue-vanilla/src/complex/Categorization.vue b/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
similarity index 71%
rename from packages/vue-vanilla/src/complex/Categorization.vue
rename to packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
index 023099dc2..e8e5631dc 100644
--- a/packages/vue-vanilla/src/complex/Categorization.vue
+++ b/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
@@ -1,30 +1,22 @@
 <template>
   <div :class="styles.categorization.root">
-    <div
-      :class="[
-        isStepper
-          ? styles.categorization.stepper
-          : styles.categorization.category,
-      ]"
-    >
+    <div :class="styles.categorization.stepper">
       <template v-for="(item, index) in categories" :key="`tab-${index}`">
         <div @click="selected = index">
           <button
             :class="[selected === index ? styles.categorization.selected : '']"
             :disabled="!item.isEnabled"
           >
-            <span
-              v-if="isStepper"
-              :class="styles.categorization.stepperBadge"
-              >{{ index + 1 }}</span
-            >
+            <span :class="styles.categorization.stepperBadge">{{
+              index + 1
+            }}</span>
 
             <label>{{ item.label }}</label>
           </button>
         </div>
 
         <hr
-          v-if="isStepper && index !== categories.length - 1"
+          v-if="index !== categories.length - 1"
           :class="styles.categorization.stepperLine"
         />
       </template>
@@ -75,13 +67,13 @@ import {
   isEnabled,
   and,
   categorizationHasCategory,
-  uiTypeIs,
   deriveLabelForUISchemaElement,
+  optionIs,
+  isCategorization,
 } from '@jsonforms/core';
 import type {
   JsonFormsRendererRegistryEntry,
   Layout,
-  Category,
   Categorization,
   UISchemaElement,
 } from '@jsonforms/core';
@@ -91,10 +83,10 @@ import {
   useJsonFormsLayout,
   type RendererProps,
 } from '@jsonforms/vue';
-import { useTranslator, useVanillaLayout } from '../util';
+import { type CategoryItem, useTranslator, useVanillaLayout } from '../util';
 
 const layoutRenderer = defineComponent({
-  name: 'CategorizationRenderer',
+  name: 'CategorizationStepperRenderer',
   components: {
     DispatchRenderer,
   },
@@ -103,13 +95,10 @@ const layoutRenderer = defineComponent({
   },
   setup(props: RendererProps<Layout>) {
     const input = useVanillaLayout(useJsonFormsLayout(props));
-    const isStepper = 'stepper' === input.appliedOptions?.value.variant;
-    const showNavButtons =
-      isStepper && !!input.appliedOptions?.value.showNavButtons;
+    const showNavButtons = !!input.appliedOptions?.value.showNavButtons;
 
     return {
       ...input,
-      isStepper,
       showNavButtons,
       ajv: createAjv(),
       t: useTranslator(),
@@ -125,22 +114,16 @@ const layoutRenderer = defineComponent({
     currentUischema(): UISchemaElement {
       return this.categories[this.selected].element;
     },
-    categories(): any {
+    categories(): CategoryItem[] {
+      const { data, path } = this.layout;
       return (this.layout.uischema as Categorization).elements
-        .filter((category: Category | Categorization) =>
-          isVisible(category, this.layout.data, this.layout.path, this.ajv)
-        )
-        .map((category: Category | Categorization) => {
+        .filter((category) => isVisible(category, data, path, this.ajv))
+        .map((category) => {
           return {
             element: category,
-            isEnabled: isEnabled(
-              category,
-              this.layout.data,
-              this.layout.path,
-              this.ajv
-            ),
+            isEnabled: isEnabled(category, data, path, this.ajv),
             label: deriveLabelForUISchemaElement(category, this.t),
-          };
+          } as CategoryItem;
         });
     },
   },
@@ -150,8 +133,12 @@ export default layoutRenderer;
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: layoutRenderer,
   tester: rankWith(
-    2,
-    and(uiTypeIs('Categorization'), categorizationHasCategory)
+    3,
+    and(
+      isCategorization,
+      categorizationHasCategory,
+      optionIs('variant', 'stepper')
+    )
   ),
 };
 </script>
diff --git a/packages/vue-vanilla/src/complex/index.ts b/packages/vue-vanilla/src/complex/index.ts
index 4916b88e8..5eb9262a5 100644
--- a/packages/vue-vanilla/src/complex/index.ts
+++ b/packages/vue-vanilla/src/complex/index.ts
@@ -1,16 +1,19 @@
 export { default as ObjectRenderer } from './ObjectRenderer.vue';
 export { default as OneOfRenderer } from './OneOfRenderer.vue';
 export { default as EnumArrayRenderer } from './EnumArrayRenderer.vue';
-export { default as CategorizationRenderer } from './Categorization.vue';
+export { default as CategorizationRenderer } from './CategorizationRenderer.vue';
+export { default as CategorizationStepperRenderer } from './CategorizationStepperRenderer.vue';
 
 import { entry as objectRendererEntry } from './ObjectRenderer.vue';
 import { entry as oneOfRendererEntry } from './OneOfRenderer.vue';
 import { entry as enumArrayRendererEntry } from './EnumArrayRenderer.vue';
-import { entry as categorizationEntry } from './Categorization.vue';
+import { entry as categorizationEntry } from './CategorizationRenderer.vue';
+import { entry as categorizationStepperEntry } from './CategorizationStepperRenderer.vue';
 
 export const complexRenderers = [
   objectRendererEntry,
   oneOfRendererEntry,
   enumArrayRendererEntry,
   categorizationEntry,
+  categorizationStepperEntry,
 ];
diff --git a/packages/vue-vanilla/src/util/categorization.ts b/packages/vue-vanilla/src/util/categorization.ts
new file mode 100644
index 000000000..c2941b8ef
--- /dev/null
+++ b/packages/vue-vanilla/src/util/categorization.ts
@@ -0,0 +1,7 @@
+import { Categorization, Category } from '@jsonforms/core';
+
+export type CategoryItem = {
+  element: Category | Categorization;
+  isEnabled: boolean;
+  label?: string;
+};
diff --git a/packages/vue-vanilla/src/util/index.ts b/packages/vue-vanilla/src/util/index.ts
index e1d5a5963..1c7fcd421 100644
--- a/packages/vue-vanilla/src/util/index.ts
+++ b/packages/vue-vanilla/src/util/index.ts
@@ -1,2 +1,3 @@
 export * from './options';
 export * from './composition';
+export * from './categorization';
diff --git a/packages/vue-vanilla/tests/unit/complex/CategorizationRenderer.spec.ts b/packages/vue-vanilla/tests/unit/complex/CategorizationRenderer.spec.ts
index 7eba7a8c6..7c1bfc2e9 100644
--- a/packages/vue-vanilla/tests/unit/complex/CategorizationRenderer.spec.ts
+++ b/packages/vue-vanilla/tests/unit/complex/CategorizationRenderer.spec.ts
@@ -25,20 +25,6 @@ const uischema = {
   ],
 };
 
-const uischemaStepper = {
-  ...uischema,
-  options: {
-    variant: 'stepper',
-  },
-};
-const uischemaStepperNav = {
-  ...uischema,
-  options: {
-    variant: 'stepper',
-    showNavButtons: true,
-  },
-};
-
 describe('CategorizationRenderer.vue', () => {
   it('renders categorization', () => {
     const wrapper = mountJsonForms('', schema, uischema);
@@ -56,28 +42,4 @@ describe('CategorizationRenderer.vue', () => {
     const inputs = wrapper.findAll('.categorization-panel > *');
     expect(inputs.length).to.equal(1);
   });
-
-  it('renders categorization as stepper', () => {
-    const wrapper = mountJsonForms('', schema, uischemaStepper);
-    expect(wrapper.find('.categorization-stepper').exists()).to.be.true;
-  });
-
-  it('renders 2 stepper items and one line', () => {
-    const wrapper = mountJsonForms('', schema, uischemaStepper);
-    const inputs = wrapper.findAll('.categorization-stepper > div');
-    expect(inputs.length).to.equal(2);
-    const lines = wrapper.findAll('.categorization-stepper > hr');
-    expect(lines.length).to.equal(1);
-  });
-
-  it('renders a next button at stepper nav bar', () => {
-    const wrapper = mountJsonForms('', schema, uischemaStepperNav);
-    expect(
-      wrapper
-        .find(
-          '.categorization footer.categorization-stepper-footer > div.categorization-stepper-button-next'
-        )
-        .exists()
-    ).to.be.true;
-  });
 });
diff --git a/packages/vue-vanilla/tests/unit/complex/CategorizationStepperRenderer.spec.ts b/packages/vue-vanilla/tests/unit/complex/CategorizationStepperRenderer.spec.ts
new file mode 100644
index 000000000..9fd0f01ae
--- /dev/null
+++ b/packages/vue-vanilla/tests/unit/complex/CategorizationStepperRenderer.spec.ts
@@ -0,0 +1,63 @@
+import { expect } from 'chai';
+import { mountJsonForms } from '../util';
+
+const schema = {
+  type: 'string',
+};
+const uischema = {
+  type: 'Categorization',
+  elements: [
+    {
+      type: 'Category',
+      label: 'A',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#',
+        },
+      ],
+    },
+    {
+      type: 'Category',
+      label: 'B',
+      elements: [],
+    },
+  ],
+  options: {
+    variant: 'stepper',
+  },
+};
+
+const uischemaNav = {
+  ...uischema,
+  options: {
+    variant: 'stepper',
+    showNavButtons: true,
+  },
+};
+
+describe('CategorizationStepperRenderer.vue', () => {
+  it('renders categorization as stepper', () => {
+    const wrapper = mountJsonForms('', schema, uischema);
+    expect(wrapper.find('.categorization-stepper').exists()).to.be.true;
+  });
+
+  it('renders 2 stepper items and one line', () => {
+    const wrapper = mountJsonForms('', schema, uischema);
+    const inputs = wrapper.findAll('.categorization-stepper > div');
+    expect(inputs.length).to.equal(2);
+    const lines = wrapper.findAll('.categorization-stepper > hr');
+    expect(lines.length).to.equal(1);
+  });
+
+  it('renders a next button at stepper nav bar', () => {
+    const wrapper = mountJsonForms('', schema, uischemaNav);
+    expect(
+      wrapper
+        .find(
+          '.categorization footer.categorization-stepper-footer > div.categorization-stepper-button-next'
+        )
+        .exists()
+    ).to.be.true;
+  });
+});