diff --git a/src/frontend/src/components/QuantAvatar.vue b/src/frontend/src/components/QuantAvatar.vue
new file mode 100644
index 00000000..1f4a8a69
--- /dev/null
+++ b/src/frontend/src/components/QuantAvatar.vue
@@ -0,0 +1,32 @@
+<!-- PrimeVue Avatar Transparent Adapter Wrapper: QuantAvatar -->
+<template>
+  <Avatar
+    v-bind="$attrs"
+    :label="label"
+    :icon="icon"
+    :image="image"
+    :shape="shape || 'circle'"
+    :size="size || 'normal'"
+    class="quant-avatar font-bold text-xs"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Avatar>
+</template>
+
+<script setup lang="ts">
+import Avatar from 'primevue/avatar';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  label?: string;
+  icon?: string;
+  image?: string;
+  shape?: 'square' | 'circle';
+  size?: 'normal' | 'large' | 'xlarge';
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantBadge.vue b/src/frontend/src/components/QuantBadge.vue
new file mode 100644
index 00000000..240bbd71
--- /dev/null
+++ b/src/frontend/src/components/QuantBadge.vue
@@ -0,0 +1,26 @@
+<!-- PrimeVue Badge Transparent Adapter Wrapper: QuantBadge -->
+<template>
+  <Badge
+    v-bind="$attrs"
+    :value="value"
+    :severity="severity"
+    class="quant-badge font-bold font-mono text-[11px]"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Badge>
+</template>
+
+<script setup lang="ts">
+import Badge from 'primevue/badge';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  value?: string | number;
+  severity?: 'success' | 'info' | 'warn' | 'danger' | 'secondary' | 'contrast';
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantBreadcrumb.vue b/src/frontend/src/components/QuantBreadcrumb.vue
new file mode 100644
index 00000000..251528b6
--- /dev/null
+++ b/src/frontend/src/components/QuantBreadcrumb.vue
@@ -0,0 +1,29 @@
+<!-- PrimeVue Breadcrumb Transparent Adapter Wrapper: QuantBreadcrumb -->
+<template>
+  <div class="quant-breadcrumb-wrapper text-xs font-medium text-slate-600">
+    <Breadcrumb
+      v-bind="$attrs"
+      :model="items || model"
+      :home="home"
+      class="bg-transparent p-0 text-xs"
+    >
+      <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </Breadcrumb>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Breadcrumb from 'primevue/breadcrumb';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  items?: any[];
+  model?: any[];
+  home?: any;
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantButton.vue b/src/frontend/src/components/QuantButton.vue
new file mode 100644
index 00000000..771d1e20
--- /dev/null
+++ b/src/frontend/src/components/QuantButton.vue
@@ -0,0 +1,30 @@
+<!-- PrimeVue Button Transparent Adapter Wrapper: QuantButton -->
+<template>
+  <Button
+    v-bind="$attrs"
+    :label="label"
+    :icon="icon"
+    :loading="loading"
+    :disabled="disabled"
+    class="quant-button font-bold text-xs shadow-2xs transition-all duration-150"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  label?: string;
+  icon?: string;
+  loading?: boolean;
+  disabled?: boolean;
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantCard.vue b/src/frontend/src/components/QuantCard.vue
new file mode 100644
index 00000000..2e68724f
--- /dev/null
+++ b/src/frontend/src/components/QuantCard.vue
@@ -0,0 +1,36 @@
+<!-- PrimeVue Card Transparent Adapter Wrapper: QuantCard -->
+<template>
+  <Card v-bind="$attrs" class="quant-card border border-slate-300 rounded-lg shadow-sm bg-white overflow-hidden">
+    <template #title v-if="title || $slots.title">
+      <slot name="title">
+        <h4 class="text-sm font-extrabold text-slate-900">{{ title }}</h4>
+      </slot>
+    </template>
+    <template #subtitle v-if="subtitle || $slots.subtitle">
+      <slot name="subtitle">
+        <p class="text-xs text-slate-500 font-medium">{{ subtitle }}</p>
+      </slot>
+    </template>
+    <template #content>
+      <div class="text-xs text-slate-800">
+        <slot></slot>
+      </div>
+    </template>
+    <template #footer v-if="$slots.footer">
+      <slot name="footer"></slot>
+    </template>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import Card from 'primevue/card';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  title?: string;
+  subtitle?: string;
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantColorPicker.vue b/src/frontend/src/components/QuantColorPicker.vue
new file mode 100644
index 00000000..918520e4
--- /dev/null
+++ b/src/frontend/src/components/QuantColorPicker.vue
@@ -0,0 +1,32 @@
+<!-- PrimeVue ColorPicker Transparent Adapter Wrapper: QuantColorPicker -->
+<template>
+  <div class="quant-colorpicker-wrapper flex items-center gap-2">
+    <ColorPicker
+      v-bind="$attrs"
+      :modelValue="modelValue"
+      :disabled="disabled"
+      :format="format || 'hex'"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+    <label v-if="label" class="text-xs font-bold text-slate-800">
+      {{ label }}
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ColorPicker from 'primevue/colorpicker';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  label?: string;
+  modelValue?: string;
+  disabled?: boolean;
+  format?: 'hex' | 'rgb' | 'hsb';
+}>();
+
+defineEmits(['update:modelValue']);
+</script>
diff --git a/src/frontend/src/components/QuantDialog.vue b/src/frontend/src/components/QuantDialog.vue
new file mode 100644
index 00000000..e366cef9
--- /dev/null
+++ b/src/frontend/src/components/QuantDialog.vue
@@ -0,0 +1,43 @@
+<!-- PrimeVue Dialog Transparent Adapter Wrapper: QuantDialog -->
+<template>
+  <Dialog
+    v-bind="$attrs"
+    :visible="visible"
+    :header="title || header || '알림'"
+    :modal="modal !== false"
+    :closable="closable !== false"
+    :dismissableMask="dismissableMask !== false"
+    class="quant-dialog max-w-lg w-full"
+    @update:visible="onVisibleChange"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import Dialog from 'primevue/dialog';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  visible?: boolean;
+  title?: string;
+  header?: string;
+  modal?: boolean;
+  closable?: boolean;
+  dismissableMask?: boolean;
+}>();
+
+const emit = defineEmits(['update:visible', 'close']);
+
+const onVisibleChange = (val: boolean) => {
+  emit('update:visible', val);
+  if (!val) {
+    emit('close');
+  }
+};
+</script>
diff --git a/src/frontend/src/components/QuantDivider.vue b/src/frontend/src/components/QuantDivider.vue
new file mode 100644
index 00000000..47ca7cbb
--- /dev/null
+++ b/src/frontend/src/components/QuantDivider.vue
@@ -0,0 +1,26 @@
+<!-- PrimeVue Divider Transparent Adapter Wrapper: QuantDivider -->
+<template>
+  <Divider
+    v-bind="$attrs"
+    :layout="layout || 'horizontal'"
+    :align="align"
+    class="quant-divider my-3 border-slate-200"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Divider>
+</template>
+
+<script setup lang="ts">
+import Divider from 'primevue/divider';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  layout?: 'horizontal' | 'vertical';
+  align?: 'left' | 'center' | 'right' | 'top' | 'bottom';
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantDrawer.vue b/src/frontend/src/components/QuantDrawer.vue
new file mode 100644
index 00000000..b69673c4
--- /dev/null
+++ b/src/frontend/src/components/QuantDrawer.vue
@@ -0,0 +1,39 @@
+<!-- PrimeVue Drawer Transparent Adapter Wrapper: QuantDrawer -->
+<template>
+  <Drawer
+    v-bind="$attrs"
+    :visible="visible"
+    :position="position || 'left'"
+    :header="header || title"
+    class="quant-drawer"
+    @update:visible="onVisibleChange"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Drawer>
+</template>
+
+<script setup lang="ts">
+import Drawer from 'primevue/drawer';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  visible?: boolean;
+  position?: 'left' | 'right' | 'top' | 'bottom';
+  header?: string;
+  title?: string;
+}>();
+
+const emit = defineEmits(['update:visible', 'close']);
+
+const onVisibleChange = (val: boolean) => {
+  emit('update:visible', val);
+  if (!val) {
+    emit('close');
+  }
+};
+</script>
diff --git a/src/frontend/src/components/QuantMessage.vue b/src/frontend/src/components/QuantMessage.vue
new file mode 100644
index 00000000..292c828d
--- /dev/null
+++ b/src/frontend/src/components/QuantMessage.vue
@@ -0,0 +1,26 @@
+<!-- PrimeVue Message Transparent Adapter Wrapper: QuantMessage -->
+<template>
+  <Message
+    v-bind="$attrs"
+    :severity="severity || 'info'"
+    :closable="closable"
+    class="quant-message text-xs font-medium my-1"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Message>
+</template>
+
+<script setup lang="ts">
+import Message from 'primevue/message';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  severity?: 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast';
+  closable?: boolean;
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantNumber.vue b/src/frontend/src/components/QuantNumber.vue
new file mode 100644
index 00000000..e3283242
--- /dev/null
+++ b/src/frontend/src/components/QuantNumber.vue
@@ -0,0 +1,60 @@
+<!-- PrimeVue InputNumber Transparent Adapter Wrapper: QuantNumber -->
+<template>
+  <div class="quant-number-wrapper flex flex-col gap-1 w-full">
+    <label v-if="label" class="text-xs font-bold text-slate-800">
+      {{ label }} <span v-if="required" class="text-rose-600">*</span>
+    </label>
+    <InputNumber
+      v-bind="$attrs"
+      :id="id"
+      :modelValue="numericValue"
+      :placeholder="placeholder || '0'"
+      :readonly="readonly"
+      :disabled="disabled"
+      locale="ko-KR"
+      :minFractionDigits="minFractionDigits || 0"
+      :maxFractionDigits="maxFractionDigits || 2"
+      inputClass="w-full h-9 px-3 border border-slate-300 rounded text-right font-mono text-xs text-slate-900 font-bold bg-white placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none disabled:bg-slate-100 readonly:bg-slate-50"
+      @update:modelValue="handleInput"
+    >
+      <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </InputNumber>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import InputNumber from 'primevue/inputnumber';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+const props = defineProps<{
+  id?: string;
+  label?: string;
+  modelValue?: string | number;
+  placeholder?: string;
+  required?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+  minFractionDigits?: number;
+  maxFractionDigits?: number;
+}>();
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const numericValue = computed(() => {
+  if (props.modelValue === undefined || props.modelValue === null || props.modelValue === '') return null;
+  const num = Number(String(props.modelValue).replace(/,/g, ''));
+  return isNaN(num) ? null : num;
+});
+
+const handleInput = (val: number | null) => {
+  const finalVal = val === null ? '' : String(val);
+  emit('update:modelValue', finalVal);
+  emit('change', finalVal);
+};
+</script>
diff --git a/src/frontend/src/components/QuantPopover.vue b/src/frontend/src/components/QuantPopover.vue
new file mode 100644
index 00000000..11bbb50c
--- /dev/null
+++ b/src/frontend/src/components/QuantPopover.vue
@@ -0,0 +1,41 @@
+<!-- PrimeVue Popover Transparent Adapter Wrapper: QuantPopover -->
+<template>
+  <Popover
+    ref="op"
+    v-bind="$attrs"
+    class="quant-popover shadow-xl border border-slate-200 rounded-lg p-3 text-xs"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Popover from 'primevue/popover';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+const op = ref();
+
+const toggle = (event: any) => {
+  op.value?.toggle(event);
+};
+
+const show = (event: any) => {
+  op.value?.show(event);
+};
+
+const hide = () => {
+  op.value?.hide();
+};
+
+defineExpose({
+  toggle,
+  show,
+  hide
+});
+</script>
diff --git a/src/frontend/src/components/QuantProgressBar.vue b/src/frontend/src/components/QuantProgressBar.vue
new file mode 100644
index 00000000..129ccda4
--- /dev/null
+++ b/src/frontend/src/components/QuantProgressBar.vue
@@ -0,0 +1,33 @@
+<!-- PrimeVue ProgressBar Transparent Adapter Wrapper: QuantProgressBar -->
+<template>
+  <div class="quant-progressbar-wrapper w-full flex flex-col gap-1">
+    <div v-if="label" class="flex justify-between text-xs font-bold text-slate-800">
+      <span>{{ label }}</span>
+      <span class="font-mono text-blue-600">{{ value }}%</span>
+    </div>
+    <ProgressBar
+      v-bind="$attrs"
+      :value="value"
+      :showValue="showValue !== false"
+      class="h-3 text-[10px] font-bold rounded overflow-hidden"
+    >
+      <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </ProgressBar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProgressBar from 'primevue/progressbar';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  value?: number;
+  label?: string;
+  showValue?: boolean;
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantRating.vue b/src/frontend/src/components/QuantRating.vue
new file mode 100644
index 00000000..c3ec1961
--- /dev/null
+++ b/src/frontend/src/components/QuantRating.vue
@@ -0,0 +1,35 @@
+<!-- PrimeVue Rating Transparent Adapter Wrapper: QuantRating -->
+<template>
+  <Rating
+    v-bind="$attrs"
+    :modelValue="modelValue"
+    :stars="stars || 5"
+    :cancel="cancel !== false"
+    :disabled="disabled"
+    :readonly="readonly"
+    class="quant-rating"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Rating>
+</template>
+
+<script setup lang="ts">
+import Rating from 'primevue/rating';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  modelValue?: number;
+  stars?: number;
+  cancel?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+}>();
+
+defineEmits(['update:modelValue']);
+</script>
diff --git a/src/frontend/src/components/QuantSkeleton.vue b/src/frontend/src/components/QuantSkeleton.vue
new file mode 100644
index 00000000..82973de1
--- /dev/null
+++ b/src/frontend/src/components/QuantSkeleton.vue
@@ -0,0 +1,28 @@
+<!-- PrimeVue Skeleton Transparent Adapter Wrapper: QuantSkeleton -->
+<template>
+  <Skeleton
+    v-bind="$attrs"
+    :width="width"
+    :height="height"
+    :shape="shape || 'rectangle'"
+    class="quant-skeleton animate-pulse bg-slate-200 rounded"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Skeleton>
+</template>
+
+<script setup lang="ts">
+import Skeleton from 'primevue/skeleton';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  width?: string;
+  height?: string;
+  shape?: 'rectangle' | 'circle';
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantSlider.vue b/src/frontend/src/components/QuantSlider.vue
new file mode 100644
index 00000000..1a171236
--- /dev/null
+++ b/src/frontend/src/components/QuantSlider.vue
@@ -0,0 +1,38 @@
+<!-- PrimeVue Slider Transparent Adapter Wrapper: QuantSlider -->
+<template>
+  <div class="quant-slider-wrapper w-full flex flex-col gap-1">
+    <div v-if="label" class="flex justify-between text-xs font-bold text-slate-800">
+      <span>{{ label }}</span>
+      <span class="font-mono text-blue-600">{{ modelValue }}</span>
+    </div>
+    <Slider
+      v-bind="$attrs"
+      :modelValue="modelValue"
+      :min="min || 0"
+      :max="max || 100"
+      :step="step || 1"
+      :disabled="disabled"
+      class="w-full"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Slider from 'primevue/slider';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  label?: string;
+  modelValue?: number | number[];
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+}>();
+
+defineEmits(['update:modelValue']);
+</script>
diff --git a/src/frontend/src/components/QuantTag.vue b/src/frontend/src/components/QuantTag.vue
new file mode 100644
index 00000000..ca4c522d
--- /dev/null
+++ b/src/frontend/src/components/QuantTag.vue
@@ -0,0 +1,28 @@
+<!-- PrimeVue Tag Transparent Adapter Wrapper: QuantTag -->
+<template>
+  <Tag
+    v-bind="$attrs"
+    :value="value"
+    :severity="severity"
+    :icon="icon"
+    class="quant-tag font-bold text-[11px] px-2 py-0.5 rounded shadow-2xs"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Tag>
+</template>
+
+<script setup lang="ts">
+import Tag from 'primevue/tag';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  value?: string;
+  severity?: 'success' | 'info' | 'warn' | 'danger' | 'secondary' | 'contrast';
+  icon?: string;
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantTimeline.vue b/src/frontend/src/components/QuantTimeline.vue
new file mode 100644
index 00000000..0fc02657
--- /dev/null
+++ b/src/frontend/src/components/QuantTimeline.vue
@@ -0,0 +1,27 @@
+<!-- PrimeVue Timeline Transparent Adapter Wrapper: QuantTimeline -->
+<template>
+  <Timeline
+    v-bind="$attrs"
+    :value="items || value"
+    :align="align || 'left'"
+    class="quant-timeline text-xs"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Timeline>
+</template>
+
+<script setup lang="ts">
+import Timeline from 'primevue/timeline';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  items?: any[];
+  value?: any[];
+  align?: 'left' | 'right' | 'alternate' | 'top' | 'bottom';
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantToggleSwitch.vue b/src/frontend/src/components/QuantToggleSwitch.vue
new file mode 100644
index 00000000..9fc0b94e
--- /dev/null
+++ b/src/frontend/src/components/QuantToggleSwitch.vue
@@ -0,0 +1,41 @@
+<!-- PrimeVue ToggleSwitch Transparent Adapter Wrapper: QuantToggleSwitch -->
+<template>
+  <div class="quant-toggleswitch-wrapper flex items-center gap-2 cursor-pointer select-none">
+    <ToggleSwitch
+      v-bind="$attrs"
+      :id="id"
+      :modelValue="modelValue"
+      :disabled="disabled"
+      @update:modelValue="onChange"
+    >
+      <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </ToggleSwitch>
+    <label v-if="label" :for="id" class="text-xs font-bold text-slate-800 cursor-pointer">
+      {{ label }}
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ToggleSwitch from 'primevue/toggleswitch';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  id?: string;
+  modelValue?: boolean;
+  label?: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const onChange = (val: boolean) => {
+  emit('update:modelValue', val);
+  emit('change', val);
+};
+</script>
diff --git a/src/frontend/src/components/QuantTree.vue b/src/frontend/src/components/QuantTree.vue
new file mode 100644
index 00000000..9e764f36
--- /dev/null
+++ b/src/frontend/src/components/QuantTree.vue
@@ -0,0 +1,33 @@
+<!-- PrimeVue Tree Transparent Adapter Wrapper: QuantTree -->
+<template>
+  <div class="quant-tree-wrapper w-full border border-slate-300 rounded p-2 bg-white text-xs">
+    <Tree
+      v-bind="$attrs"
+      :value="value"
+      :selectionMode="selectionMode"
+      :selectionKeys="selectionKeys"
+      class="w-full text-xs"
+      @update:selectionKeys="$emit('update:selectionKeys', $event)"
+    >
+      <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </Tree>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Tree from 'primevue/tree';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  value?: any[];
+  selectionMode?: 'single' | 'multiple' | 'checkbox';
+  selectionKeys?: any;
+}>();
+
+defineEmits(['update:selectionKeys']);
+</script>