diff --git a/docs/components/content/ComponentCard.vue b/docs/components/content/ComponentCard.vue
index 4896148c..63ae3c0d 100644
--- a/docs/components/content/ComponentCard.vue
+++ b/docs/components/content/ComponentCard.vue
@@ -56,7 +56,6 @@ import { transformContent } from '@nuxt/content/transformers'
 // @ts-ignore
 import { useShikiHighlighter } from '@nuxtjs/mdc/runtime'
 import { upperFirst, camelCase, kebabCase } from 'scule'
-import * as config from '#ui/ui.config'
 
 // eslint-disable-next-line vue/no-dupe-keys
 const props = defineProps({
@@ -92,8 +91,8 @@ const props = defineProps({
     type: Array,
     default: () => []
   },
-  extraColors: {
-    type: Array,
+  options: {
+    type: Array as PropType<{ name: string; values: string[]; restriction: 'expected' | 'included' | 'excluded' | 'only' }[]>,
     default: () => []
   },
   backgroundClass: {
@@ -125,8 +124,6 @@ const meta = await fetchComponentMeta(name)
 
 // Computed
 
-const ui = computed(() => ({ ...config[camelName], ...props.ui }))
-
 const fullProps = computed(() => ({ ...baseProps, ...componentProps }))
 const vModel = computed({
   get: () => baseProps.modelValue,
@@ -135,19 +132,47 @@ const vModel = computed({
   }
 })
 
+const generateOptions = (key: string, schema: { kind: string, schema: [], type: string }) => {
+  let options = []
+  const optionItem = props?.options?.find(item => item?.name === key) || null
+  const types = schema?.type?.split('|')?.map(item => item.trim()?.replaceAll('"', '')) || []
+  const hasIgnoredTypes = types?.every(item => ['string', 'number', 'boolean', 'array', 'object', 'Function'].includes(item))
+
+  if (key.toLowerCase().endsWith('color')) {
+    options = [...appConfig.ui.colors]
+  }
+
+  if (schema?.schema?.length > 0 && schema?.kind === 'enum' && !hasIgnoredTypes && optionItem?.restriction !== 'only') {
+    options = schema.schema.filter(option => typeof option === 'string').map((option: string) => option.replaceAll('"', ''))
+  }
+
+  if (optionItem?.restriction === 'only') {
+    options = optionItem.values
+  }
+
+  if (optionItem?.restriction === 'expected') {
+    options = options.filter(item => optionItem.values.includes(item))
+  }
+
+  if (optionItem?.restriction === 'included') {
+    options = [...options, ...optionItem.values]
+  }
+
+  if (optionItem?.restriction === 'excluded') {
+    options = options.filter(item => !optionItem.values.includes(item))
+  }
+
+  return options
+}
+
 const propsToSelect = computed(() => Object.keys(componentProps).map((key) => {
   if (props.excludedProps.includes(key)) {
     return null
   }
 
   const prop = meta?.meta?.props?.find((prop: any) => prop.name === key)
-  const dottedKey = kebabCase(key).replaceAll('-', '.')
-  const keys = ui.value[dottedKey] ?? {}
-  let options = typeof keys === 'object' && Object.keys(keys)
-  if (key.toLowerCase().endsWith('color')) {
-    // @ts-ignore
-    options = [...appConfig.ui.colors, ...props.extraColors]
-  }
+  const schema = prop?.schema || {}
+  const options = generateOptions(key, schema)
 
   return {
     type: prop?.type || 'string',
diff --git a/docs/content/2.elements/1.accordion.md b/docs/content/2.elements/1.accordion.md
index 9227382e..434ac93c 100644
--- a/docs/content/2.elements/1.accordion.md
+++ b/docs/content/2.elements/1.accordion.md
@@ -65,20 +65,24 @@ props:
   color: 'primary'
   variant: 'soft'
   size: 'sm'
-ui:
-  variant:
-    solid: 1
-    outline: 1
-    ghost: 1
-    soft: 1
-    link: 1
-  size:
-    2xs: ''
-    xs: ''
-    sm: ''
-    md: ''
-    lg: ''
-    xl: ''
+options:
+  - name: variant
+    restriction: included
+    values:
+      - solid
+      - outline
+      - ghost
+      - soft 
+      - link
+  - name: size
+    restriction: included
+    values:
+      - 2xs
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
 ---
 ::
 
diff --git a/docs/content/2.elements/2.alert.md b/docs/content/2.elements/2.alert.md
index d0c2aa81..cf543670 100644
--- a/docs/content/2.elements/2.alert.md
+++ b/docs/content/2.elements/2.alert.md
@@ -79,8 +79,11 @@ props:
   icon: 'i-heroicons-command-line'
   color: 'primary'
   variant: 'solid'
-extraColors:
-  - white
+options:
+  - name: color
+    restriction: included
+    values:
+      - white  
 excludedProps:
   - icon
 ---
diff --git a/docs/content/2.elements/3.avatar.md b/docs/content/2.elements/3.avatar.md
index e881bf3e..e33d79ca 100644
--- a/docs/content/2.elements/3.avatar.md
+++ b/docs/content/2.elements/3.avatar.md
@@ -41,8 +41,11 @@ props:
   chipText: ''
   chipPosition: 'top-right'
   size : 'sm'
-extraColors:
-  - gray
+options:
+  - name: 'chipColor'
+    restriction: 'included'
+    values:
+      - 'gray' 
 baseProps:
   src: 'https://avatars.githubusercontent.com/u/739984?v=4'
   alt: 'Avatar'
@@ -92,17 +95,6 @@ To stack avatars as a group, use the `AvatarGroup` component.
 props:
   size: 'sm'
   max: 2
-ui:
-  size:
-    '3xs': ''
-    '2xs': ''
-    xs: ''
-    sm: ''
-    md: ''
-    lg: ''
-    xl: ''
-    '2xl': ''
-    '3xl': ''
 code: |
   <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
     <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
diff --git a/docs/content/2.elements/4.badge.md b/docs/content/2.elements/4.badge.md
index fb7fb8eb..0ef061a9 100644
--- a/docs/content/2.elements/4.badge.md
+++ b/docs/content/2.elements/4.badge.md
@@ -52,9 +52,11 @@ Besides all the colors from the `ui.colors` object, you can also use the `white`
 props:
   color: 'white'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
 excludedProps:
   - color
 ---
@@ -69,9 +71,11 @@ Badge
 props:
   color: 'gray'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
 excludedProps:
   - color
 ---
@@ -86,10 +90,11 @@ Badge
 props:
   color: 'black'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
-    link: 1
+options:
+  - name: variant
+    restriction: only
+    values:
+      - solid
 excludedProps:
   - color
 ---
diff --git a/docs/content/2.elements/5.button.md b/docs/content/2.elements/5.button.md
index 0517d8b5..2267403d 100644
--- a/docs/content/2.elements/5.button.md
+++ b/docs/content/2.elements/5.button.md
@@ -51,10 +51,12 @@ backgroundClass: 'bg-gray-50 dark:bg-gray-800'
 props:
   color: 'white'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
-    ghost: 1
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
+      - ghost  
 excludedProps:
   - color
 ---
@@ -69,11 +71,13 @@ Button
 props:
   color: 'gray'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
-    ghost: 1
-    link: 1
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
+      - ghost
+      - link  
 excludedProps:
   - color
 ---
@@ -88,10 +92,12 @@ Button
 props:
   color: 'black'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
-    link: 1
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
+      - link      
 excludedProps:
   - color
 ---
@@ -284,17 +290,6 @@ To stack buttons as a group, use the `ButtonGroup` component.
 props:
   size: 'sm'
   orientation: 'horizontal'
-ui:
-  size:
-    2xs: ''
-    xs: ''
-    sm: ''
-    md: ''
-    lg: ''
-    xl: ''
-  orientation:
-    horizontal: ''
-    vertical: ''
 code: |
   <UButton label="Action" color="white" />
     <UButton icon="i-heroicons-chevron-down-20-solid" color="gray" />
diff --git a/docs/content/3.forms/1.input.md b/docs/content/3.forms/1.input.md
index 1f8a56e6..5a5a9d15 100644
--- a/docs/content/3.forms/1.input.md
+++ b/docs/content/3.forms/1.input.md
@@ -115,9 +115,12 @@ props:
   size: 'sm'
   color: 'white'
   trailing: false
-extraColors:
-  - white
-  - gray
+options:
+  - name: color
+    restriction: included
+    values:
+      - white   
+      - gray      
 excludedProps:
   - icon
 ---
diff --git a/docs/content/3.forms/3.select.md b/docs/content/3.forms/3.select.md
index 0d70a841..03181cd3 100644
--- a/docs/content/3.forms/3.select.md
+++ b/docs/content/3.forms/3.select.md
@@ -171,9 +171,12 @@ props:
   icon: 'i-heroicons-magnifying-glass-20-solid'
   color: 'white'
   size: 'sm'
-extraColors:
-  - white
-  - gray
+options:
+  - name: color
+    restriction: included
+    values:
+      - white
+      - gray   
 excludedProps:
   - icon
 ---
diff --git a/docs/content/5.navigation/3.pagination.md b/docs/content/5.navigation/3.pagination.md
index f5e5e424..a9ccc537 100644
--- a/docs/content/5.navigation/3.pagination.md
+++ b/docs/content/5.navigation/3.pagination.md
@@ -56,14 +56,6 @@ baseProps:
   total: 100
 props:
   size: 'sm'
-ui:
-  size:
-    2xs: true
-    xs: true
-    sm: true
-    md: true
-    lg: true
-    xl: true
 ---
 ::
 
diff --git a/docs/content/6.overlays/6.notification.md b/docs/content/6.overlays/6.notification.md
index f6b2f34b..bba52687 100644
--- a/docs/content/6.overlays/6.notification.md
+++ b/docs/content/6.overlays/6.notification.md
@@ -175,8 +175,11 @@ baseProps:
 props:
   icon: 'i-heroicons-check-badge'
   color: 'primary'
-extraColors:
-  - gray
+options:
+  - name: color
+    restriction: included
+    values:
+      - gray   
 excludedProps:
   - icon
 ---