diff --git a/docs/app/components/content/ComponentProps.vue b/docs/app/components/content/ComponentProps.vue
index 3f9a3496..71ec270a 100644
--- a/docs/app/components/content/ComponentProps.vue
+++ b/docs/app/components/content/ComponentProps.vue
@@ -24,6 +24,8 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
     return !props.ignore?.includes(prop.name)
   }).map((prop) => {
     prop.default = prop.default ?? prop.tags?.find(tag => tag.name === 'defaultValue')?.text ?? componentTheme?.defaultVariants?.[prop.name]
+    // @ts-expect-error - Type is not correct
+    prop.type = !['boolean'].includes(prop.type) && prop.schema?.kind === 'enum' && Object.keys(prop.schema.schema)?.length ? Object.values(prop.schema.schema).map(schema => schema?.type ? schema.type : schema).join(' | ') : prop.type
     return prop
   }).sort((a, b) => {
     if (a.name === 'as') {
diff --git a/docs/app/components/content/ComponentPropsSchema.vue b/docs/app/components/content/ComponentPropsSchema.vue
index 9d2e0217..1422497a 100644
--- a/docs/app/components/content/ComponentPropsSchema.vue
+++ b/docs/app/components/content/ComponentPropsSchema.vue
@@ -25,9 +25,8 @@ const schemaProps = computed(() => getSchemaProps(props.prop.schema))
     <ProseUl>
       <ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
         <HighlightInlineType :type="`${schemaProp.name}${schemaProp.required === false ? '?' : ''}: ${schemaProp.type}`" />
-        <p v-if="schemaProp.description" class="text-gray-600 dark:text-gray-400">
-          {{ schemaProp.description }}
-        </p>
+
+        <MDC v-if="schemaProp.description" :value="schemaProp.description" class="text-gray-500 dark:text-gray-400 my-1" />
       </ProseLi>
     </ProseUl>
   </Collapsible>