diff --git a/packages/runtime/src/components/chakra-ui/Box.tsx b/packages/runtime/src/components/chakra-ui/Box.tsx
index c7042097..b6916e2f 100644
--- a/packages/runtime/src/components/chakra-ui/Box.tsx
+++ b/packages/runtime/src/components/chakra-ui/Box.tsx
@@ -293,12 +293,7 @@ export default {
       description: 'chakra-ui box',
     },
     spec: {
-      properties: Object.entries(StyleSchema.properties).map(
-        ([key, value]) => ({
-          name: key,
-          ...value,
-        })
-      ),
+      properties: StyleSchema,
       acceptTraits: [],
       state: {},
       methods: [],
diff --git a/packages/runtime/src/components/chakra-ui/Button.tsx b/packages/runtime/src/components/chakra-ui/Button.tsx
index 582e2680..c62bebe0 100644
--- a/packages/runtime/src/components/chakra-ui/Button.tsx
+++ b/packages/runtime/src/components/chakra-ui/Button.tsx
@@ -2,15 +2,11 @@ import React, { useEffect, useRef } from 'react';
 import { createComponent } from '@meta-ui/core';
 import { Static, Type } from '@sinclair/typebox';
 import { Button as BaseButton } from '@chakra-ui/react';
-import Text, { TextProps, TextPropertySchema } from '../_internal/Text';
+import Text, { TextPropertySchema } from '../_internal/Text';
 import { ComponentImplementation } from '../../registry';
 import { ColorSchemePropertySchema } from './Types/ColorScheme';
 
-const Button: ComponentImplementation<{
-  text: TextProps['value'];
-  colorScheme?: Static<typeof ColorSchemePropertySchema>;
-  isLoading?: Static<typeof IsLoadingPropertySchema>;
-}> = ({
+const Button: ComponentImplementation<Static<typeof PropsSchema>> = ({
   text,
   mergeState,
   subscribeMethods,
@@ -41,12 +37,16 @@ const Button: ComponentImplementation<{
   );
 };
 
-const IsLoadingPropertySchema = Type.Optional(Type.Boolean());
-
 const StateSchema = Type.Object({
   value: Type.String(),
 });
 
+const PropsSchema = Type.Object({
+  text: TextPropertySchema,
+  colorScheme: ColorSchemePropertySchema,
+  isLoading: Type.Optional(Type.Boolean()),
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -55,20 +55,7 @@ export default {
       description: 'chakra-ui button',
     },
     spec: {
-      properties: [
-        {
-          name: 'text',
-          ...TextPropertySchema,
-        },
-        {
-          name: 'colorScheme',
-          ...ColorSchemePropertySchema,
-        },
-        {
-          name: 'isLoading',
-          ...IsLoadingPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: StateSchema,
       methods: [
diff --git a/packages/runtime/src/components/chakra-ui/Checkbox.tsx b/packages/runtime/src/components/chakra-ui/Checkbox.tsx
index 0a351ace..c34e09de 100644
--- a/packages/runtime/src/components/chakra-ui/Checkbox.tsx
+++ b/packages/runtime/src/components/chakra-ui/Checkbox.tsx
@@ -6,17 +6,10 @@ import {
   useCheckboxGroupContext,
 } from '@chakra-ui/react';
 import { ComponentImplementation } from '../../registry';
-import Text, { TextProps, TextPropertySchema } from '../_internal/Text';
+import Text, { TextPropertySchema } from '../_internal/Text';
 import { ColorSchemePropertySchema } from './Types/ColorScheme';
 
-const ValueSchema = Type.Union([Type.String(), Type.Number()]);
-const DefaultIsCheckedSchema = Type.Optional(Type.Boolean());
 export const IsDisabledSchema = Type.Optional(Type.Boolean());
-const IsFocusableSchema = Type.Optional(Type.Boolean());
-const IsInvalidSchema = Type.Optional(Type.Boolean());
-const IsReadOnlySchema = Type.Optional(Type.Boolean());
-const IsRequiredSchema = Type.Optional(Type.Boolean());
-const SpacingSchema = Type.Optional(Type.String());
 export const SizePropertySchema = Type.KeyOf(
   Type.Object({
     sm: Type.String(),
@@ -31,19 +24,7 @@ export const CheckboxStateSchema = Type.Object({
   checked: Type.Boolean(),
 });
 
-const Checkbox: ComponentImplementation<{
-  text: TextProps['value'];
-  value: Static<typeof ValueSchema>;
-  defaultIsChecked?: Static<typeof DefaultIsCheckedSchema>;
-  isDisabled?: Static<typeof IsDisabledSchema>;
-  isFocusable?: Static<typeof IsFocusableSchema>;
-  isInValid?: Static<typeof IsInvalidSchema>;
-  isReadOnly?: Static<typeof IsReadOnlySchema>;
-  isRequired?: Static<typeof IsRequiredSchema>;
-  size?: Static<typeof SizePropertySchema>;
-  spacing?: Static<typeof SpacingSchema>;
-  colorScheme?: Static<typeof ColorSchemePropertySchema>;
-}> = ({
+const Checkbox: ComponentImplementation<Static<typeof PropsSchema>> = ({
   text,
   value,
   defaultIsChecked,
@@ -110,6 +91,20 @@ const Checkbox: ComponentImplementation<{
   );
 };
 
+const PropsSchema = Type.Object({
+  text: TextPropertySchema,
+  value: Type.Union([Type.String(), Type.Number()]),
+  defaultIsChecked: Type.Optional(Type.Boolean()),
+  isDisabled: IsDisabledSchema,
+  isFocusable: Type.Optional(Type.Boolean()),
+  isInValid: Type.Optional(Type.Boolean()),
+  isReadOnly: Type.Optional(Type.Boolean()),
+  isRequired: Type.Optional(Type.Boolean()),
+  size: SizePropertySchema,
+  spacing: Type.Optional(Type.String()),
+  colorScheme: ColorSchemePropertySchema,
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -118,52 +113,7 @@ export default {
       description: 'chakra-ui checkbox',
     },
     spec: {
-      properties: [
-        {
-          name: 'text',
-          ...TextPropertySchema,
-        },
-        {
-          name: 'value',
-          ...ValueSchema,
-        },
-        {
-          name: 'defaultIsChecked',
-          ...DefaultIsCheckedSchema,
-        },
-        {
-          name: 'isDisabled',
-          ...IsDisabledSchema,
-        },
-        {
-          name: 'isFocusable',
-          ...IsFocusableSchema,
-        },
-        {
-          name: 'isInValid',
-          ...IsInvalidSchema,
-        },
-        {
-          name: 'isReadOnly',
-          ...IsReadOnlySchema,
-        },
-        {
-          name: 'isRequired',
-          ...IsReadOnlySchema,
-        },
-        {
-          name: 'size',
-          ...SizePropertySchema,
-        },
-        {
-          name: 'spacing',
-          ...SpacingSchema,
-        },
-        {
-          name: 'colorScheme',
-          ...ColorSchemePropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: CheckboxStateSchema,
       methods: [],
diff --git a/packages/runtime/src/components/chakra-ui/CheckboxGroup.tsx b/packages/runtime/src/components/chakra-ui/CheckboxGroup.tsx
index 2f79ead5..cca60e6a 100644
--- a/packages/runtime/src/components/chakra-ui/CheckboxGroup.tsx
+++ b/packages/runtime/src/components/chakra-ui/CheckboxGroup.tsx
@@ -14,11 +14,7 @@ const StateSchema = Type.Object({
   value: Type.String(),
 });
 
-const CheckboxGroup: ComponentImplementation<{
-  size?: Static<typeof SizePropertySchema>;
-  defaultValue?: Static<typeof DefaultValueSchema>;
-  isDisabled?: Static<typeof IsDisabledSchema>;
-}> = ({
+const CheckboxGroup: ComponentImplementation<Static<typeof PropsSchema>> = ({
   size,
   defaultValue,
   isDisabled,
@@ -41,6 +37,12 @@ const CheckboxGroup: ComponentImplementation<{
   );
 };
 
+const PropsSchema = Type.Object({
+  size: SizePropertySchema,
+  isDisabled: IsDisabledSchema,
+  defaultValue: DefaultValueSchema,
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -49,20 +51,7 @@ export default {
       description: 'chakra-ui checkbox group',
     },
     spec: {
-      properties: [
-        {
-          name: 'size',
-          ...SizePropertySchema,
-        },
-        {
-          name: 'isDisabled',
-          ...IsDisabledSchema,
-        },
-        {
-          name: 'defaultValue',
-          ...DefaultValueSchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: StateSchema,
       methods: [],
diff --git a/packages/runtime/src/components/chakra-ui/Dialog.tsx b/packages/runtime/src/components/chakra-ui/Dialog.tsx
index 0622b76c..3b85adcf 100644
--- a/packages/runtime/src/components/chakra-ui/Dialog.tsx
+++ b/packages/runtime/src/components/chakra-ui/Dialog.tsx
@@ -14,20 +14,12 @@ import { Static, Type } from '@sinclair/typebox';
 import Slot from '../_internal/Slot';
 import { ColorSchemePropertySchema } from './Types/ColorScheme';
 
-const TitlePropertySchema = Type.Optional(Type.String());
-const DisableConfirmPropertySchema = Type.Optional(Type.Boolean());
-
 const HandleButtonPropertySchema = Type.Object({
   text: Type.Optional(Type.String()),
   colorScheme: ColorSchemePropertySchema,
 });
 
-const Dialog: ComponentImplementation<{
-  title?: Static<typeof TitlePropertySchema>;
-  confirmButton?: Static<typeof HandleButtonPropertySchema>;
-  cancelButton?: Static<typeof HandleButtonPropertySchema>;
-  disableConfirm?: Static<typeof DisableConfirmPropertySchema>;
-}> = ({
+const Dialog: ComponentImplementation<Static<typeof PropsSchema>> = ({
   slotsMap,
   subscribeMethods,
   callbackMap: callbacks,
@@ -97,6 +89,13 @@ const Dialog: ComponentImplementation<{
   );
 };
 
+const PropsSchema = Type.Object({
+  title: Type.Optional(Type.String()),
+  confirmButton: HandleButtonPropertySchema,
+  cancelButton: HandleButtonPropertySchema,
+  disableConfirm: Type.Optional(Type.Boolean()),
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -105,24 +104,7 @@ export default {
       description: 'chakra_ui dialog',
     },
     spec: {
-      properties: [
-        {
-          name: 'title',
-          ...TitlePropertySchema,
-        },
-        {
-          name: 'confirmButton',
-          ...HandleButtonPropertySchema,
-        },
-        {
-          name: 'cancelButton',
-          ...HandleButtonPropertySchema,
-        },
-        {
-          name: 'disableConfirm',
-          ...DisableConfirmPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: {},
       methods: [
diff --git a/packages/runtime/src/components/chakra-ui/Form/Form.tsx b/packages/runtime/src/components/chakra-ui/Form/Form.tsx
index 9b40ac33..bc72b65d 100644
--- a/packages/runtime/src/components/chakra-ui/Form/Form.tsx
+++ b/packages/runtime/src/components/chakra-ui/Form/Form.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Type } from '@sinclair/typebox';
+import { Type, Static } from '@sinclair/typebox';
 import { createComponent } from '@meta-ui/core';
 import Slot from '@components/_internal/Slot';
 import { Button } from '@chakra-ui/react';
@@ -8,9 +8,13 @@ import { ComponentImplementation } from 'src/registry';
 import { stateStore } from 'src/store';
 import { apiService } from 'src/api-service';
 
-const FormImpl: ComponentImplementation<{
-  hideSubmit?: boolean;
-}> = ({ mergeState, subscribeMethods, hideSubmit, slotsMap, callbackMap }) => {
+const FormImpl: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  mergeState,
+  subscribeMethods,
+  hideSubmit,
+  slotsMap,
+  callbackMap,
+}) => {
   const [invalidArray, setInvalidArray] = useState<boolean[]>([]);
   const [isFormInvalid, setIsFormInvalid] = useState<boolean>(false);
   const formDataRef = useRef<Record<string, any>>({});
@@ -107,6 +111,10 @@ const FormImpl: ComponentImplementation<{
   );
 };
 
+const PropsSchema = Type.Object({
+  hideSubmit: Type.Boolean(),
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -115,12 +123,7 @@ export default {
       description: 'chakra-ui form',
     },
     spec: {
-      properties: [
-        {
-          name: 'hideSubmit',
-          ...Type.Boolean(),
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: Type.Object({
         data: Type.Any(),
diff --git a/packages/runtime/src/components/chakra-ui/Form/FormControl.tsx b/packages/runtime/src/components/chakra-ui/Form/FormControl.tsx
index b44be72e..26b306c2 100644
--- a/packages/runtime/src/components/chakra-ui/Form/FormControl.tsx
+++ b/packages/runtime/src/components/chakra-ui/Form/FormControl.tsx
@@ -105,6 +105,13 @@ const FormControlImpl: ComponentImplementation<{
   );
 };
 
+const PropsSchema = Type.Object({
+  label: Type.String(),
+  fieldName: Type.String(),
+  isRequired: Type.Boolean(),
+  helperText: Type.String(),
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -113,24 +120,7 @@ export default {
       description: 'chakra-ui formControl',
     },
     spec: {
-      properties: [
-        {
-          name: 'label',
-          ...Type.String(),
-        },
-        {
-          name: 'fieldName',
-          ...Type.String(),
-        },
-        {
-          name: 'isRequired',
-          ...Type.Boolean(),
-        },
-        {
-          name: 'helperText',
-          ...Type.String(),
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: Type.Object({
         inputId: Type.String(),
diff --git a/packages/runtime/src/components/chakra-ui/HStack.tsx b/packages/runtime/src/components/chakra-ui/HStack.tsx
index 6c0a49ad..3c907e07 100644
--- a/packages/runtime/src/components/chakra-ui/HStack.tsx
+++ b/packages/runtime/src/components/chakra-ui/HStack.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { createComponent } from '@meta-ui/core';
-import { Static } from '@sinclair/typebox';
+import { Static, Type } from '@sinclair/typebox';
 import { HStack as BaseHStack } from '@chakra-ui/react';
 import { ComponentImplementation } from '../../registry';
 import Slot from '../_internal/Slot';
@@ -12,13 +12,14 @@ import {
   SpacingSchema,
 } from './Stack';
 
-const HStack: ComponentImplementation<{
-  direction?: Static<typeof DirectionSchema>;
-  wrap?: Static<typeof FlexWrapSchema>;
-  align?: Static<typeof AlignItemsSchema>;
-  justify?: Static<typeof JustifyContentSchema>;
-  spacing?: Static<typeof SpacingSchema>;
-}> = ({ direction, wrap, align, justify, spacing, slotsMap }) => {
+const HStack: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  direction,
+  wrap,
+  align,
+  justify,
+  spacing,
+  slotsMap,
+}) => {
   return (
     <BaseHStack {...{ direction, wrap, align, justify, spacing }}>
       <Slot slotsMap={slotsMap} slot="content" />
@@ -26,6 +27,14 @@ const HStack: ComponentImplementation<{
   );
 };
 
+const PropsSchema = Type.Object({
+  direction: DirectionSchema,
+  wrap: FlexWrapSchema,
+  align: AlignItemsSchema,
+  justify: JustifyContentSchema,
+  spacing: SpacingSchema,
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -34,28 +43,7 @@ export default {
       description: 'chakra-ui hstack',
     },
     spec: {
-      properties: [
-        {
-          name: 'diection',
-          ...DirectionSchema,
-        },
-        {
-          name: 'wrap',
-          ...FlexWrapSchema,
-        },
-        {
-          name: 'align',
-          ...AlignItemsSchema,
-        },
-        {
-          name: 'justify',
-          ...JustifyContentSchema,
-        },
-        {
-          name: 'spacing',
-          ...SpacingSchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: {},
       methods: [],
diff --git a/packages/runtime/src/components/chakra-ui/Image.tsx b/packages/runtime/src/components/chakra-ui/Image.tsx
index 952c59c5..1073a3bf 100644
--- a/packages/runtime/src/components/chakra-ui/Image.tsx
+++ b/packages/runtime/src/components/chakra-ui/Image.tsx
@@ -4,11 +4,6 @@ import { createComponent } from '@meta-ui/core';
 import { Static, Type } from '@sinclair/typebox';
 import { ComponentImplementation } from '../../registry';
 
-const SrcPropertySchema = Type.String();
-const OptionalStringPropertySchema = Type.Optional(Type.String());
-const IgnoreFallbackPropertySchema = Type.Optional(Type.Boolean());
-const HeightSchema = Type.Optional(Type.Union([Type.String(), Type.Number()]));
-
 const BoxSizePropertySchema = Type.Optional(
   Type.Union([
     Type.KeyOf(
@@ -69,27 +64,7 @@ const BorderRadiusSchema = Type.Optional(
   ])
 );
 
-const CrossOriginSchema = Type.Optional(
-  Type.KeyOf(
-    Type.Object({
-      anonymous: Type.String(),
-      'use-credentials': Type.String(),
-    })
-  )
-);
-
-const Image: ComponentImplementation<{
-  boxSize?: Static<typeof BoxSizePropertySchema>;
-  src: Static<typeof SrcPropertySchema>;
-  fallbackSrc?: Static<typeof OptionalStringPropertySchema>;
-  alt?: Static<typeof OptionalStringPropertySchema>;
-  ignoreFallback?: Static<typeof IgnoreFallbackPropertySchema>;
-  objectFit?: Static<typeof ObjectFitSchema>;
-  borderRadius?: Static<typeof BorderRadiusSchema>;
-  htmlHeight?: Static<typeof HeightSchema>;
-  htmlWidth?: Static<typeof HeightSchema>;
-  crossOrigin?: Static<typeof CrossOriginSchema>;
-}> = ({
+const Image: ComponentImplementation<Static<typeof PropsSchema>> = ({
   boxSize,
   src,
   alt,
@@ -123,6 +98,26 @@ const StateSchema = Type.Object({
   value: Type.String(),
 });
 
+const PropsSchema = Type.Object({
+  src: Type.String(),
+  fallbackSrc: Type.Optional(Type.String()),
+  boxSize: BoxSizePropertySchema,
+  objectFit: ObjectFitSchema,
+  borderRadius: BorderRadiusSchema,
+  ignoreFallback: Type.Optional(Type.Boolean()),
+  alt: Type.Optional(Type.String()),
+  htmlHeight: Type.Optional(Type.Union([Type.String(), Type.Number()])),
+  htmlWidth: Type.Optional(Type.Union([Type.String(), Type.Number()])),
+  crossOrigin: Type.Optional(
+    Type.KeyOf(
+      Type.Object({
+        anonymous: Type.String(),
+        'use-credentials': Type.String(),
+      })
+    )
+  ),
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -131,48 +126,7 @@ export default {
       description: 'chakra_ui image',
     },
     spec: {
-      properties: [
-        {
-          name: 'src',
-          ...SrcPropertySchema,
-        },
-        {
-          name: 'fallbackSrc',
-          ...OptionalStringPropertySchema,
-        },
-        {
-          name: 'boxSize',
-          ...BoxSizePropertySchema,
-        },
-        {
-          name: 'objectFit',
-          ...ObjectFitSchema,
-        },
-        {
-          name: 'borderRadius',
-          ...BorderRadiusSchema,
-        },
-        {
-          name: 'ignoreFallback',
-          ...IgnoreFallbackPropertySchema,
-        },
-        {
-          name: 'alt',
-          ...OptionalStringPropertySchema,
-        },
-        {
-          name: 'htmlHeight',
-          ...HeightSchema,
-        },
-        {
-          name: 'htmlWidth',
-          ...HeightSchema,
-        },
-        {
-          name: 'crossOrigin',
-          ...CrossOriginSchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: StateSchema,
       methods: [{ name: 'onLoad' }],
diff --git a/packages/runtime/src/components/chakra-ui/Input.tsx b/packages/runtime/src/components/chakra-ui/Input.tsx
index 4b25a28a..cc67dd3e 100644
--- a/packages/runtime/src/components/chakra-ui/Input.tsx
+++ b/packages/runtime/src/components/chakra-ui/Input.tsx
@@ -11,31 +11,6 @@ import { createComponent } from '@meta-ui/core';
 import { Static, Type } from '@sinclair/typebox';
 import { ComponentImplementation } from '../../registry';
 
-const VariantPropertySchema = Type.KeyOf(
-  Type.Object({
-    outline: Type.String(),
-    unstyled: Type.String(),
-    filled: Type.String(),
-    flushed: Type.String(),
-  })
-);
-
-const PlaceholderPropertySchema = Type.Optional(Type.String());
-
-const SizePropertySchema = Type.KeyOf(
-  Type.Object({
-    sm: Type.String(),
-    md: Type.String(),
-    lg: Type.String(),
-    xs: Type.String(),
-  })
-);
-
-const FocusBorderColorPropertySchema = Type.Optional(Type.String());
-const IsDisabledPropertySchema = Type.Optional(Type.Boolean());
-const IsRequiredPropertySchema = Type.Optional(Type.Boolean());
-const DefaultValuePropertySchema = Type.Optional(Type.String());
-
 const AppendElementPropertySchema = Type.Union([
   Type.Object({
     type: Type.KeyOf(Type.Object({ addon: Type.String() })),
@@ -49,17 +24,7 @@ const AppendElementPropertySchema = Type.Union([
   }),
 ]);
 
-const Input: ComponentImplementation<{
-  variant?: Static<typeof VariantPropertySchema>;
-  placeholder?: Static<typeof PlaceholderPropertySchema>;
-  size?: Static<typeof SizePropertySchema>;
-  focusBorderColor?: Static<typeof FocusBorderColorPropertySchema>;
-  isDisabled?: Static<typeof IsDisabledPropertySchema>;
-  isRequired?: Static<typeof IsRequiredPropertySchema>;
-  left?: Static<typeof AppendElementPropertySchema>;
-  right?: Static<typeof AppendElementPropertySchema>;
-  defaultValue?: Static<typeof DefaultValuePropertySchema>;
-}> = ({
+const Input: ComponentImplementation<Static<typeof PropsSchema>> = ({
   variant,
   placeholder,
   size,
@@ -136,6 +101,32 @@ const StateSchema = Type.Object({
   value: Type.String(),
 });
 
+const PropsSchema = Type.Object({
+  variant: Type.KeyOf(
+    Type.Object({
+      outline: Type.String(),
+      unstyled: Type.String(),
+      filled: Type.String(),
+      flushed: Type.String(),
+    })
+  ),
+  placeholder: Type.Optional(Type.String()),
+  size: Type.KeyOf(
+    Type.Object({
+      sm: Type.String(),
+      md: Type.String(),
+      lg: Type.String(),
+      xs: Type.String(),
+    })
+  ),
+  focusBorderColor: Type.Optional(Type.String()),
+  isDisabled: Type.Optional(Type.Boolean()),
+  isRequired: Type.Optional(Type.Boolean()),
+  left: AppendElementPropertySchema,
+  right: AppendElementPropertySchema,
+  defaultValue: Type.Optional(Type.String()),
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -144,44 +135,7 @@ export default {
       description: 'chakra_ui input',
     },
     spec: {
-      properties: [
-        {
-          name: 'variant',
-          ...VariantPropertySchema,
-        },
-        {
-          name: 'placeholder',
-          ...PlaceholderPropertySchema,
-        },
-        {
-          name: 'size',
-          ...SizePropertySchema,
-        },
-        {
-          name: 'focusBorderColor',
-          ...FocusBorderColorPropertySchema,
-        },
-        {
-          name: 'isDisabled',
-          ...IsDisabledPropertySchema,
-        },
-        {
-          name: 'isRequired',
-          ...IsRequiredPropertySchema,
-        },
-        {
-          name: 'left',
-          ...AppendElementPropertySchema,
-        },
-        {
-          name: 'right',
-          ...AppendElementPropertySchema,
-        },
-        {
-          name: 'defaultValue',
-          ...DefaultValuePropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: StateSchema,
       methods: [
diff --git a/packages/runtime/src/components/chakra-ui/Kbd.tsx b/packages/runtime/src/components/chakra-ui/Kbd.tsx
index d78170df..ee7a3ee2 100644
--- a/packages/runtime/src/components/chakra-ui/Kbd.tsx
+++ b/packages/runtime/src/components/chakra-ui/Kbd.tsx
@@ -1,13 +1,14 @@
 import React, { useEffect } from 'react';
 import { Kbd as BaseKbd } from '@chakra-ui/react';
-import { Type } from '@sinclair/typebox';
+import { Static, Type } from '@sinclair/typebox';
 import { createComponent } from '@meta-ui/core';
 import { ComponentImplementation } from '../../registry';
-import Text, { TextProps, TextPropertySchema } from '../_internal/Text';
+import Text, { TextPropertySchema } from '../_internal/Text';
 
-const Kbd: ComponentImplementation<{
-  text: TextProps['value'];
-}> = ({ text, mergeState }) => {
+const Kbd: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  text,
+  mergeState,
+}) => {
   useEffect(() => {
     mergeState({ value: text.raw });
   }, [text.raw]);
@@ -23,6 +24,10 @@ const StateSchema = Type.Object({
   value: Type.String(),
 });
 
+const PropsSchema = Type.Object({
+  text: TextPropertySchema,
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -31,12 +36,7 @@ export default {
       description: 'chakra-ui keyboard',
     },
     spec: {
-      properties: [
-        {
-          name: 'text',
-          ...TextPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: StateSchema,
       methods: [],
diff --git a/packages/runtime/src/components/chakra-ui/List.tsx b/packages/runtime/src/components/chakra-ui/List.tsx
index 41c273e7..639f5172 100644
--- a/packages/runtime/src/components/chakra-ui/List.tsx
+++ b/packages/runtime/src/components/chakra-ui/List.tsx
@@ -28,11 +28,11 @@ export function parseTypeComponents(
   };
 }
 
-const List: ComponentImplementation<{
-  listData: Static<typeof ListDataPropertySchema>;
-  template: Static<typeof TemplatePropertySchema>;
-  onClick?: () => void;
-}> = ({ listData, template, app }) => {
+const List: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  listData,
+  template,
+  app,
+}) => {
   if (!listData) {
     return null;
   }
@@ -90,13 +90,10 @@ const List: ComponentImplementation<{
   return <BaseList>{listItems}</BaseList>;
 };
 
-const ListDataPropertySchema = Type.Array(
-  Type.Object(Type.String(), Type.String())
-);
-const TemplatePropertySchema = Type.Object(
-  Type.String(),
-  Type.Array(Type.Object(Type.String()))
-);
+const PropsSchema = Type.Object({
+  listData: Type.Array(Type.Object(Type.String(), Type.String())),
+  template: Type.Object(Type.String(), Type.Array(Type.Object(Type.String()))),
+});
 
 export default {
   ...createComponent({
@@ -106,16 +103,7 @@ export default {
       description: 'chakra-ui list',
     },
     spec: {
-      properties: [
-        {
-          name: 'listData',
-          ...ListDataPropertySchema,
-        },
-        {
-          name: 'template',
-          ...TemplatePropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       methods: [],
       state: {},
diff --git a/packages/runtime/src/components/chakra-ui/NumberInput.tsx b/packages/runtime/src/components/chakra-ui/NumberInput.tsx
index 1c56bd5f..a6e8582a 100644
--- a/packages/runtime/src/components/chakra-ui/NumberInput.tsx
+++ b/packages/runtime/src/components/chakra-ui/NumberInput.tsx
@@ -10,41 +10,7 @@ import { createComponent } from '@meta-ui/core';
 import { Static, Type } from '@sinclair/typebox';
 import { ComponentImplementation } from '../../registry';
 
-const DefaultValuePropertySchema = Type.Optional(Type.Number());
-const MinPropertySchema = Type.Optional(Type.Number());
-const MaxPropertySchema = Type.Optional(Type.Number());
-const StepPropertySchema = Type.Optional(Type.Number());
-const PrecisionPropertySchema = Type.Optional(Type.Number());
-const ClampValueOnBlurPropertySchema = Type.Optional(Type.Boolean());
-const AllowMouseWheelPropertySchema = Type.Optional(Type.Boolean());
-
-const SizePropertySchema = Type.KeyOf(
-  Type.Object({
-    sm: Type.String(),
-    md: Type.String(),
-    lg: Type.String(),
-    xs: Type.String(),
-  })
-);
-
-const CustomerStepStylePropertySchema = Type.Object({
-  bg: Type.Optional(Type.String()),
-  children: Type.Optional(Type.String()),
-  _active: Type.Object(Type.Object({ bg: Type.String() })),
-});
-
-const NumberInput: ComponentImplementation<{
-  defaultValue?: Static<typeof DefaultValuePropertySchema>;
-  min?: Static<typeof MinPropertySchema>;
-  max?: Static<typeof MaxPropertySchema>;
-  step?: Static<typeof StepPropertySchema>;
-  precision?: Static<typeof PrecisionPropertySchema>;
-  clampValueOnBlur?: Static<typeof ClampValueOnBlurPropertySchema>;
-  allowMouseWheel?: Static<typeof AllowMouseWheelPropertySchema>;
-  size?: Static<typeof SizePropertySchema>;
-  customerIncrement?: Static<typeof CustomerStepStylePropertySchema>;
-  customerDecrement?: Static<typeof CustomerStepStylePropertySchema>;
-}> = ({
+const NumberInput: ComponentImplementation<Static<typeof PropsSchema>> = ({
   defaultValue = 0,
   min,
   max,
@@ -102,6 +68,34 @@ const NumberInput: ComponentImplementation<{
   );
 };
 
+const PropsSchema = Type.Object({
+  defaultValue: Type.Optional(Type.Number()),
+  min: Type.Optional(Type.Number()),
+  max: Type.Optional(Type.Number()),
+  step: Type.Optional(Type.Number()),
+  precision: Type.Optional(Type.Number()),
+  clampValueOnBlur: Type.Optional(Type.Boolean()),
+  allowMouseWheel: Type.Optional(Type.Boolean()),
+  size: Type.KeyOf(
+    Type.Object({
+      sm: Type.String(),
+      md: Type.String(),
+      lg: Type.String(),
+      xs: Type.String(),
+    })
+  ),
+  customerIncrement: Type.Object({
+    bg: Type.Optional(Type.String()),
+    children: Type.Optional(Type.String()),
+    _active: Type.Object(Type.Object({ bg: Type.String() })),
+  }),
+  customerDecrement: Type.Object({
+    bg: Type.Optional(Type.String()),
+    children: Type.Optional(Type.String()),
+    _active: Type.Object(Type.Object({ bg: Type.String() })),
+  }),
+});
+
 const StateSchema = Type.Object({
   value: Type.Number(),
 });
@@ -114,48 +108,7 @@ export default {
       description: 'chakra_ui number input',
     },
     spec: {
-      properties: [
-        {
-          name: 'defaultValue',
-          ...DefaultValuePropertySchema,
-        },
-        {
-          name: 'min',
-          ...MinPropertySchema,
-        },
-        {
-          name: 'max',
-          ...MaxPropertySchema,
-        },
-        {
-          name: 'step',
-          ...StepPropertySchema,
-        },
-        {
-          name: 'precision',
-          ...PrecisionPropertySchema,
-        },
-        {
-          name: 'clampValueOnBlur',
-          ...ClampValueOnBlurPropertySchema,
-        },
-        {
-          name: 'allowMouseWheel',
-          ...AllowMouseWheelPropertySchema,
-        },
-        {
-          name: 'size',
-          ...SizePropertySchema,
-        },
-        {
-          name: 'customerIncrement',
-          ...CustomerStepStylePropertySchema,
-        },
-        {
-          name: 'customerDecrement',
-          ...CustomerStepStylePropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: StateSchema,
       methods: [
diff --git a/packages/runtime/src/components/chakra-ui/Radio.tsx b/packages/runtime/src/components/chakra-ui/Radio.tsx
index dcb664c8..4ba27405 100644
--- a/packages/runtime/src/components/chakra-ui/Radio.tsx
+++ b/packages/runtime/src/components/chakra-ui/Radio.tsx
@@ -3,42 +3,14 @@ import { createComponent } from '@meta-ui/core';
 import { Static, Type } from '@sinclair/typebox';
 import { Radio as BaseRadio } from '@chakra-ui/react';
 import { ComponentImplementation } from '../../registry';
-import Text, { TextProps, TextPropertySchema } from '../_internal/Text';
+import Text, { TextPropertySchema } from '../_internal/Text';
 import { ColorSchemePropertySchema } from './Types/ColorScheme';
 
-const IsDisabledSchema = Type.Optional(Type.Boolean());
-const IsFocusableSchema = Type.Optional(Type.Boolean());
-const IsInvalidSchema = Type.Optional(Type.Boolean());
-const IsReadOnlySchema = Type.Optional(Type.Boolean());
-const IsRequiredSchema = Type.Optional(Type.Boolean());
-const NameSchema = Type.Optional(Type.String());
-const ValueSchema = Type.Union([Type.String(), Type.Number()]);
-const SizePropertySchema = Type.KeyOf(
-  Type.Object({
-    sm: Type.String(),
-    md: Type.String(),
-    lg: Type.String(),
-  })
-);
-const SpacingSchema = Type.Optional(Type.String());
-
 const StateSchema = Type.Object({
   value: Type.String(),
 });
 
-const Radio: ComponentImplementation<{
-  text: TextProps['value'];
-  value: Static<typeof ValueSchema>;
-  isDisabled?: Static<typeof IsDisabledSchema>;
-  isFocusable?: Static<typeof IsFocusableSchema>;
-  isInValid?: Static<typeof IsInvalidSchema>;
-  isReadOnly?: Static<typeof IsReadOnlySchema>;
-  isRequired?: Static<typeof IsRequiredSchema>;
-  name?: Static<typeof NameSchema>;
-  size?: Static<typeof SizePropertySchema>;
-  spacing?: Static<typeof SpacingSchema>;
-  colorScheme?: Static<typeof ColorSchemePropertySchema>;
-}> = ({
+const Radio: ComponentImplementation<Static<typeof PropsSchema>> = ({
   text,
   value,
   isDisabled,
@@ -77,6 +49,26 @@ const Radio: ComponentImplementation<{
   );
 };
 
+const PropsSchema = Type.Object({
+  text: TextPropertySchema,
+  value: Type.Union([Type.String(), Type.Number()]),
+  isDisabled: Type.Optional(Type.Boolean()),
+  isFocusable: Type.Optional(Type.Boolean()),
+  isInValid: Type.Optional(Type.Boolean()),
+  isReadOnly: Type.Optional(Type.Boolean()),
+  isRequired: Type.Optional(Type.Boolean()),
+  name: Type.Optional(Type.String()),
+  size: Type.KeyOf(
+    Type.Object({
+      sm: Type.String(),
+      md: Type.String(),
+      lg: Type.String(),
+    })
+  ),
+  spacing: Type.Optional(Type.String()),
+  colorScheme: ColorSchemePropertySchema,
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -85,52 +77,7 @@ export default {
       description: 'chakra-ui radio',
     },
     spec: {
-      properties: [
-        {
-          name: 'text',
-          ...TextPropertySchema,
-        },
-        {
-          name: 'value',
-          ...ValueSchema,
-        },
-        {
-          name: 'isDisabled',
-          ...IsDisabledSchema,
-        },
-        {
-          name: 'isFocusable',
-          ...IsFocusableSchema,
-        },
-        {
-          name: 'isInValid',
-          ...IsInvalidSchema,
-        },
-        {
-          name: 'isReadOnly',
-          ...IsReadOnlySchema,
-        },
-        {
-          name: 'isRequired',
-          ...IsReadOnlySchema,
-        },
-        {
-          name: 'name',
-          ...NameSchema,
-        },
-        {
-          name: 'size',
-          ...SizePropertySchema,
-        },
-        {
-          name: 'spacing',
-          ...SpacingSchema,
-        },
-        {
-          name: 'colorScheme',
-          ...ColorSchemePropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: StateSchema,
       methods: [],
diff --git a/packages/runtime/src/components/chakra-ui/RadioGroup.tsx b/packages/runtime/src/components/chakra-ui/RadioGroup.tsx
index 2dd795ff..7aa93d9d 100644
--- a/packages/runtime/src/components/chakra-ui/RadioGroup.tsx
+++ b/packages/runtime/src/components/chakra-ui/RadioGroup.tsx
@@ -5,16 +5,16 @@ import { RadioGroup as BaseRadioGroup } from '@chakra-ui/react';
 import { ComponentImplementation } from '../../registry';
 import Slot from '../_internal/Slot';
 
-const DefaultValueSchema = Type.Union([Type.String(), Type.Number()]);
-const IsNumericalSchema = Type.Optional(Type.Boolean());
 const StateSchema = Type.Object({
   value: Type.String(),
 });
 
-const RadioGroup: ComponentImplementation<{
-  defaultValue?: Static<typeof DefaultValueSchema>;
-  isNumerical?: Static<typeof IsNumericalSchema>;
-}> = ({ defaultValue, isNumerical, slotsMap, mergeState }) => {
+const RadioGroup: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  defaultValue,
+  isNumerical,
+  slotsMap,
+  mergeState,
+}) => {
   const [value, setValue] = useState(defaultValue);
 
   useEffect(() => {
@@ -34,6 +34,11 @@ const RadioGroup: ComponentImplementation<{
   );
 };
 
+const PropsSchema = Type.Object({
+  defaultValue: Type.Union([Type.String(), Type.Number()]),
+  isNumerical: Type.Optional(Type.Boolean()),
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -42,16 +47,7 @@ export default {
       description: 'chakra-ui radio group',
     },
     spec: {
-      properties: [
-        {
-          name: 'defaultValue',
-          ...DefaultValueSchema,
-        },
-        {
-          name: 'isNumerical',
-          ...IsNumericalSchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: StateSchema,
       methods: [],
diff --git a/packages/runtime/src/components/chakra-ui/Root.tsx b/packages/runtime/src/components/chakra-ui/Root.tsx
index c34a9c3c..12616049 100644
--- a/packages/runtime/src/components/chakra-ui/Root.tsx
+++ b/packages/runtime/src/components/chakra-ui/Root.tsx
@@ -22,7 +22,7 @@ export default {
       description: 'chakra-ui provider',
     },
     spec: {
-      properties: [],
+      properties: {},
       acceptTraits: [],
       state: {},
       methods: [],
diff --git a/packages/runtime/src/components/chakra-ui/Select.tsx b/packages/runtime/src/components/chakra-ui/Select.tsx
index 4b5e5005..93dba85f 100644
--- a/packages/runtime/src/components/chakra-ui/Select.tsx
+++ b/packages/runtime/src/components/chakra-ui/Select.tsx
@@ -4,54 +4,11 @@ import { Static, Type } from '@sinclair/typebox';
 import { Select as BaseSelect } from '@chakra-ui/react';
 import { ComponentImplementation } from '../../registry';
 
-const OptionsSchema = Type.Array(
-  Type.Object({
-    label: Type.String(),
-    value: Type.String(),
-  })
-);
-const PlaceholderSchema = Type.Optional(Type.String());
-const DefaultValueSchema = Type.Optional(Type.String());
-const ErrorBorderColorSchema = Type.Optional(Type.String());
-const FocusBorderColorSchema = Type.Optional(Type.String());
-const IsDisabledSchema = Type.Optional(Type.Boolean());
-const IsInvalidSchema = Type.Optional(Type.Boolean());
-const IsReadOnlySchema = Type.Optional(Type.Boolean());
-const IsRequiredSchema = Type.Optional(Type.Boolean());
-const SizeSchema = Type.KeyOf(
-  Type.Object({
-    xs: Type.String(),
-    sm: Type.String(),
-    md: Type.String(),
-    lg: Type.String(),
-  })
-);
-const VariantSchema = Type.KeyOf(
-  Type.Object({
-    outline: Type.String(),
-    unstyled: Type.String(),
-    filled: Type.String(),
-    flushed: Type.String(),
-  })
-);
-
 const StateSchema = Type.Object({
   value: Type.String(),
 });
 
-const Select: ComponentImplementation<{
-  options: Static<typeof OptionsSchema>;
-  placeholder?: Static<typeof PlaceholderSchema>;
-  defaultValue?: Static<typeof DefaultValueSchema>;
-  errorBorderColor?: Static<typeof ErrorBorderColorSchema>;
-  focusBorderColor?: Static<typeof FocusBorderColorSchema>;
-  isDisabled?: Static<typeof IsDisabledSchema>;
-  isInvalid?: Static<typeof IsInvalidSchema>;
-  isReadOnly?: Static<typeof IsReadOnlySchema>;
-  isRequired?: Static<typeof IsRequiredSchema>;
-  size?: Static<typeof SizeSchema>;
-  variant?: Static<typeof VariantSchema>;
-}> = ({
+const Select: ComponentImplementation<Static<typeof PropsSchema>> = ({
   options,
   placeholder,
   defaultValue,
@@ -97,6 +54,39 @@ const Select: ComponentImplementation<{
   );
 };
 
+const PropsSchema = Type.Object({
+  options: Type.Array(
+    Type.Object({
+      label: Type.String(),
+      value: Type.String(),
+    })
+  ),
+  placeholder: Type.Optional(Type.String()),
+  defaultValue: Type.Optional(Type.String()),
+  errorBorderColor: Type.Optional(Type.String()),
+  focusBorderColor: Type.Optional(Type.String()),
+  isDisabled: Type.Optional(Type.Boolean()),
+  isInvalid: Type.Optional(Type.Boolean()),
+  isReadOnly: Type.Optional(Type.Boolean()),
+  isRequired: Type.Optional(Type.Boolean()),
+  size: Type.KeyOf(
+    Type.Object({
+      xs: Type.String(),
+      sm: Type.String(),
+      md: Type.String(),
+      lg: Type.String(),
+    })
+  ),
+  variant: Type.KeyOf(
+    Type.Object({
+      outline: Type.String(),
+      unstyled: Type.String(),
+      filled: Type.String(),
+      flushed: Type.String(),
+    })
+  ),
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -105,52 +95,7 @@ export default {
       description: 'chakra-ui select',
     },
     spec: {
-      properties: [
-        {
-          name: 'options',
-          ...OptionsSchema,
-        },
-        {
-          name: 'placeholder',
-          ...PlaceholderSchema,
-        },
-        {
-          name: 'defaultValue',
-          ...DefaultValueSchema,
-        },
-        {
-          name: 'errorBorderColor',
-          ...ErrorBorderColorSchema,
-        },
-        {
-          name: 'focusBorderColor',
-          ...FocusBorderColorSchema,
-        },
-        {
-          name: 'isDisabled',
-          ...IsDisabledSchema,
-        },
-        {
-          name: 'isInvalid',
-          ...IsInvalidSchema,
-        },
-        {
-          name: 'isReadOnly',
-          ...IsReadOnlySchema,
-        },
-        {
-          name: 'isRequired',
-          ...IsRequiredSchema,
-        },
-        {
-          name: 'size',
-          ...SizeSchema,
-        },
-        {
-          name: 'variant',
-          ...VariantSchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: StateSchema,
       methods: [],
diff --git a/packages/runtime/src/components/chakra-ui/Stack.tsx b/packages/runtime/src/components/chakra-ui/Stack.tsx
index eb890b75..9c8faf2f 100644
--- a/packages/runtime/src/components/chakra-ui/Stack.tsx
+++ b/packages/runtime/src/components/chakra-ui/Stack.tsx
@@ -36,13 +36,14 @@ export const AlignItemsSchema = Type.String();
 export const JustifyContentSchema = Type.String();
 export const SpacingSchema = Type.Union([Type.String(), Type.Number()]);
 
-const Stack: ComponentImplementation<{
-  direction?: Static<typeof DirectionSchema>;
-  wrap?: Static<typeof FlexWrapSchema>;
-  align?: Static<typeof AlignItemsSchema>;
-  justify?: Static<typeof JustifyContentSchema>;
-  spacing?: Static<typeof SpacingSchema>;
-}> = ({ direction, wrap, align, justify, spacing, slotsMap }) => {
+const Stack: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  direction,
+  wrap,
+  align,
+  justify,
+  spacing,
+  slotsMap,
+}) => {
   return (
     <BaseStack {...{ direction, wrap, align, justify, spacing }}>
       <Slot slotsMap={slotsMap} slot="content" />
@@ -50,6 +51,14 @@ const Stack: ComponentImplementation<{
   );
 };
 
+const PropsSchema = Type.Object({
+  direction: DirectionSchema,
+  wrap: FlexWrapSchema,
+  align: AlignItemsSchema,
+  justify: JustifyContentSchema,
+  spacing: SpacingSchema,
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -58,28 +67,7 @@ export default {
       description: 'chakra-ui stack',
     },
     spec: {
-      properties: [
-        {
-          name: 'diection',
-          ...DirectionSchema,
-        },
-        {
-          name: 'wrap',
-          ...FlexWrapSchema,
-        },
-        {
-          name: 'align',
-          ...AlignItemsSchema,
-        },
-        {
-          name: 'justify',
-          ...JustifyContentSchema,
-        },
-        {
-          name: 'spacing',
-          ...SpacingSchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: {},
       methods: [],
diff --git a/packages/runtime/src/components/chakra-ui/Table/index.ts b/packages/runtime/src/components/chakra-ui/Table/index.ts
index ebc062f1..140a742d 100644
--- a/packages/runtime/src/components/chakra-ui/Table/index.ts
+++ b/packages/runtime/src/components/chakra-ui/Table/index.ts
@@ -1,4 +1,5 @@
 import { createComponent } from '@meta-ui/core';
+import { Type } from '@sinclair/typebox';
 import { TableImpl } from './Table';
 import {
   ColumnsPropertySchema,
@@ -10,6 +11,15 @@ import {
   IsMultiSelectPropertySchema,
 } from './TableTypes';
 
+const PropsSchema = Type.Object({
+  data: DataPropertySchema,
+  majorKey: MajorKeyPropertySchema,
+  rowsPerPage: RowsPerPagePropertySchema,
+  size: TableSizePropertySchema,
+  columns: ColumnsPropertySchema,
+  isMultiSelect: IsMultiSelectPropertySchema,
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -18,32 +28,7 @@ export default {
       description: 'chakra-ui table',
     },
     spec: {
-      properties: [
-        {
-          name: 'data',
-          ...DataPropertySchema,
-        },
-        {
-          name: 'majorKey',
-          ...MajorKeyPropertySchema,
-        },
-        {
-          name: 'rowsPerPage',
-          ...RowsPerPagePropertySchema,
-        },
-        {
-          name: 'size',
-          ...TableSizePropertySchema,
-        },
-        {
-          name: 'columns',
-          ...ColumnsPropertySchema,
-        },
-        {
-          name: 'isMultiSelect',
-          ...IsMultiSelectPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: TableStateSchema,
       methods: [],
diff --git a/packages/runtime/src/components/chakra-ui/Tabs.tsx b/packages/runtime/src/components/chakra-ui/Tabs.tsx
index d202044a..daeeb4f7 100644
--- a/packages/runtime/src/components/chakra-ui/Tabs.tsx
+++ b/packages/runtime/src/components/chakra-ui/Tabs.tsx
@@ -11,12 +11,13 @@ import { Type, Static } from '@sinclair/typebox';
 import { ComponentImplementation } from '../../registry';
 import Slot from '../_internal/Slot';
 
-const Tabs: ComponentImplementation<{
-  tabNames: Static<typeof TabNamesPropertySchema>;
-  initialSelectedTabIndex?: Static<
-    typeof InitialSelectedTabIndexPropertySchema
-  >;
-}> = ({ tabNames, mergeState, initialSelectedTabIndex, slotsMap, style }) => {
+const Tabs: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  tabNames,
+  mergeState,
+  initialSelectedTabIndex,
+  slotsMap,
+  style,
+}) => {
   const [selectedTabIndex, setSelectedTabIndex] = useState(
     initialSelectedTabIndex ?? 0
   );
@@ -47,13 +48,15 @@ const Tabs: ComponentImplementation<{
   );
 };
 
-const TabNamesPropertySchema = Type.Array(Type.String());
-const InitialSelectedTabIndexPropertySchema = Type.Optional(Type.Number());
-
 const StateSchema = Type.Object({
   selectedTabIndex: Type.Number(),
 });
 
+const PropsSchema = Type.Object({
+  tabNames: Type.Array(Type.String()),
+  initialSelectedTabIndex: Type.Optional(Type.Number()),
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -62,16 +65,7 @@ export default {
       description: 'chakra-ui tabs',
     },
     spec: {
-      properties: [
-        {
-          name: 'tabNames',
-          ...TabNamesPropertySchema,
-        },
-        {
-          name: 'initialSelectedTabIndex',
-          ...InitialSelectedTabIndexPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: StateSchema,
       methods: [],
diff --git a/packages/runtime/src/components/chakra-ui/Tooltip.tsx b/packages/runtime/src/components/chakra-ui/Tooltip.tsx
index 45a61769..d65be835 100644
--- a/packages/runtime/src/components/chakra-ui/Tooltip.tsx
+++ b/packages/runtime/src/components/chakra-ui/Tooltip.tsx
@@ -2,20 +2,12 @@ import React from 'react';
 import { createComponent } from '@meta-ui/core';
 import { Static, Type } from '@sinclair/typebox';
 import { Tooltip } from '@chakra-ui/react';
-import { TextProps, TextPropertySchema } from '../_internal/Text';
+import { TextPropertySchema } from '../_internal/Text';
 import { ComponentImplementation } from '../../registry';
 import Slot from '../_internal/Slot';
 import { ColorSchemePropertySchema } from './Types/ColorScheme';
 
-const TooltipImpl: ComponentImplementation<{
-  text: TextProps['value'];
-  shouldWrapChildren: boolean;
-  placement: Static<typeof PlacementPropertySchema>;
-  isOpen: boolean;
-  hasArrow: boolean;
-  isDisabled: boolean;
-  defaultIsOpen: boolean;
-}> = ({
+const TooltipImpl: ComponentImplementation<Static<typeof PropsSchema>> = ({
   text,
   shouldWrapChildren,
   placement = 'auto',
@@ -42,27 +34,37 @@ const TooltipImpl: ComponentImplementation<{
     </Tooltip>
   );
 };
-export const PlacementPropertySchema = Type.Optional(
-  Type.KeyOf(
-    Type.Object({
-      top: Type.String(),
-      right: Type.String(),
-      bottom: Type.String(),
-      left: Type.String(),
-      auto: Type.String(),
-      'auto-start': Type.String(),
-      'auto-end': Type.String(),
-      'top-start': Type.String(),
-      'top-end': Type.String(),
-      'bottom-start': Type.String(),
-      'bottom-end': Type.String(),
-      'right-start': Type.String(),
-      'right-end': Type.String(),
-      'left-start': Type.String(),
-      'left-end': Type.String(),
-    })
-  )
-);
+
+const PropsSchema = Type.Object({
+  text: TextPropertySchema,
+  colorScheme: ColorSchemePropertySchema,
+  shouldWrapChildren: Type.Boolean(),
+  defaultIsOpen: Type.Boolean(),
+  hasArrow: Type.Boolean(),
+  isDisabled: Type.Boolean(),
+  isOpen: Type.Boolean(),
+  placement: Type.Optional(
+    Type.KeyOf(
+      Type.Object({
+        top: Type.String(),
+        right: Type.String(),
+        bottom: Type.String(),
+        left: Type.String(),
+        auto: Type.String(),
+        'auto-start': Type.String(),
+        'auto-end': Type.String(),
+        'top-start': Type.String(),
+        'top-end': Type.String(),
+        'bottom-start': Type.String(),
+        'bottom-end': Type.String(),
+        'right-start': Type.String(),
+        'right-end': Type.String(),
+        'left-start': Type.String(),
+        'left-end': Type.String(),
+      })
+    )
+  ),
+});
 
 export default {
   ...createComponent({
@@ -72,40 +74,7 @@ export default {
       description: 'chakra-ui tooltip',
     },
     spec: {
-      properties: [
-        {
-          name: 'text',
-          ...TextPropertySchema,
-        },
-        {
-          name: 'colorScheme',
-          ...ColorSchemePropertySchema,
-        },
-        {
-          name: 'shouldWrapChildren',
-          ...Type.Boolean(),
-        },
-        {
-          name: 'defaultIsOpen',
-          ...Type.Boolean(),
-        },
-        {
-          name: 'hasArrow',
-          ...Type.Boolean(),
-        },
-        {
-          name: 'isDisabled',
-          ...Type.Boolean(),
-        },
-        {
-          name: 'isOpen',
-          ...Type.Boolean(),
-        },
-        {
-          name: 'placement',
-          ...PlacementPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: {},
       methods: [],
diff --git a/packages/runtime/src/components/chakra-ui/VStack.tsx b/packages/runtime/src/components/chakra-ui/VStack.tsx
index cd125cd7..eda3bcbd 100644
--- a/packages/runtime/src/components/chakra-ui/VStack.tsx
+++ b/packages/runtime/src/components/chakra-ui/VStack.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { createComponent } from '@meta-ui/core';
-import { Static } from '@sinclair/typebox';
+import { Static, Type } from '@sinclair/typebox';
 import { VStack as BaseVStack } from '@chakra-ui/react';
 import { ComponentImplementation } from '../../registry';
 import Slot from '../_internal/Slot';
@@ -12,13 +12,14 @@ import {
   SpacingSchema,
 } from './Stack';
 
-const VStack: ComponentImplementation<{
-  direction?: Static<typeof DirectionSchema>;
-  wrap?: Static<typeof FlexWrapSchema>;
-  align?: Static<typeof AlignItemsSchema>;
-  justify?: Static<typeof JustifyContentSchema>;
-  spacing?: Static<typeof SpacingSchema>;
-}> = ({ direction, wrap, align, justify, spacing, slotsMap }) => {
+const VStack: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  direction,
+  wrap,
+  align,
+  justify,
+  spacing,
+  slotsMap,
+}) => {
   return (
     <BaseVStack {...{ direction, wrap, align, justify, spacing }}>
       <Slot slotsMap={slotsMap} slot="content" />
@@ -26,6 +27,14 @@ const VStack: ComponentImplementation<{
   );
 };
 
+const PropsSchema = Type.Object({
+  direction: DirectionSchema,
+  wrap: FlexWrapSchema,
+  align: AlignItemsSchema,
+  justify: JustifyContentSchema,
+  spacing: SpacingSchema,
+});
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -34,28 +43,7 @@ export default {
       description: 'chakra-ui vstack',
     },
     spec: {
-      properties: [
-        {
-          name: 'diection',
-          ...DirectionSchema,
-        },
-        {
-          name: 'wrap',
-          ...FlexWrapSchema,
-        },
-        {
-          name: 'align',
-          ...AlignItemsSchema,
-        },
-        {
-          name: 'justify',
-          ...JustifyContentSchema,
-        },
-        {
-          name: 'spacing',
-          ...SpacingSchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: {},
       methods: [],
diff --git a/packages/runtime/src/components/core/Dummy.tsx b/packages/runtime/src/components/core/Dummy.tsx
index 018180f3..39a8b312 100644
--- a/packages/runtime/src/components/core/Dummy.tsx
+++ b/packages/runtime/src/components/core/Dummy.tsx
@@ -12,7 +12,7 @@ export default {
       description: 'Dummy Invisible component',
     },
     spec: {
-      properties: [],
+      properties: {},
       acceptTraits: [],
       state: {},
       methods: [],
diff --git a/packages/runtime/src/components/core/GridLayout.tsx b/packages/runtime/src/components/core/GridLayout.tsx
index c9f03be0..659b230e 100644
--- a/packages/runtime/src/components/core/GridLayout.tsx
+++ b/packages/runtime/src/components/core/GridLayout.tsx
@@ -3,15 +3,16 @@ import { ComponentImplementation } from '../../registry';
 import { createComponent } from '@meta-ui/core';
 import { getSlots } from '../_internal/Slot';
 import { LayoutPropertySchema } from '../../components/_internal/GridLayout';
-import { Static } from '@sinclair/typebox';
+import { Static, Type } from '@sinclair/typebox';
 
 const BaseGridLayout = React.lazy(
   () => import('../../components/_internal/GridLayout')
 );
 
-const GridLayout: ComponentImplementation<{
-  layout: Static<typeof LayoutPropertySchema>;
-}> = ({ slotsMap, layout = [] }) => {
+const GridLayout: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  slotsMap,
+  layout = [],
+}) => {
   return (
     <Suspense fallback={null}>
       <BaseGridLayout layout={layout}>
@@ -21,6 +22,10 @@ const GridLayout: ComponentImplementation<{
   );
 };
 
+const PropsSchema = Type.Object({
+  layout: LayoutPropertySchema,
+});
+
 export default {
   ...createComponent({
     version: 'core/v1',
@@ -29,7 +34,7 @@ export default {
       description: 'drag and drop to layout in a grid',
     },
     spec: {
-      properties: [{ name: 'layout', ...LayoutPropertySchema }],
+      properties: PropsSchema,
       acceptTraits: [],
       state: {},
       methods: [],
diff --git a/packages/runtime/src/components/core/Router/index.tsx b/packages/runtime/src/components/core/Router/index.tsx
index ef367baf..c683b1bc 100644
--- a/packages/runtime/src/components/core/Router/index.tsx
+++ b/packages/runtime/src/components/core/Router/index.tsx
@@ -37,6 +37,21 @@ const SwitchPolicyPropertySchema = Type.Array(
   })
 );
 
+const PropsSchema = Type.Object({
+  switchPolicy: Type.Array(
+    Type.Object({
+      type: Type.Enum(RouteType), // redirect, route
+      default: Type.Boolean(), //only the first one with default will be treated as default component;
+      path: Type.String(),
+      slotId: Type.String(),
+      href: Type.Optional(Type.String()), // work for redirect
+      strict: Type.Optional(Type.Boolean()),
+      exact: Type.Optional(Type.Boolean()),
+      sensitive: Type.Optional(Type.Boolean()),
+    })
+  ),
+});
+
 export default {
   ...createComponent({
     version: 'core/v1',
@@ -45,12 +60,7 @@ export default {
       description: 'create a router-controlled component',
     },
     spec: {
-      properties: [
-        {
-          name: 'switchPolicy',
-          ...SwitchPolicyPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: {},
       methods: [],
diff --git a/packages/runtime/src/components/core/Text.tsx b/packages/runtime/src/components/core/Text.tsx
index 34312496..5180b0c0 100644
--- a/packages/runtime/src/components/core/Text.tsx
+++ b/packages/runtime/src/components/core/Text.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
 import { createComponent } from '@meta-ui/core';
-import { Type } from '@sinclair/typebox';
+import { Type, Static } from '@sinclair/typebox';
 import { ComponentImplementation } from '../../registry';
-import _Text, { TextProps, TextPropertySchema } from '../_internal/Text';
+import _Text, { TextPropertySchema } from '../_internal/Text';
 
-const Text: ComponentImplementation<TextProps> = ({ value, style }) => {
+const Text: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  value,
+  style,
+}) => {
   return <_Text value={value} style={style} />;
 };
 
@@ -12,6 +15,10 @@ const StateSchema = Type.Object({
   value: Type.String(),
 });
 
+const PropsSchema = Type.Object({
+  value: TextPropertySchema,
+});
+
 export default {
   ...createComponent({
     version: 'core/v1',
@@ -20,12 +27,7 @@ export default {
       description: 'support plain and markdown formats',
     },
     spec: {
-      properties: [
-        {
-          name: 'value',
-          ...TextPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: StateSchema,
       methods: [],
diff --git a/packages/runtime/src/components/lab/Editor.tsx b/packages/runtime/src/components/lab/Editor.tsx
index e35c6d6a..88174563 100644
--- a/packages/runtime/src/components/lab/Editor.tsx
+++ b/packages/runtime/src/components/lab/Editor.tsx
@@ -90,7 +90,7 @@ export default {
       description: 'experimental app editor',
     },
     spec: {
-      properties: [],
+      properties: {},
       acceptTraits: [],
       state: {},
       methods: [],
diff --git a/packages/runtime/src/components/plain/Button.tsx b/packages/runtime/src/components/plain/Button.tsx
index 82a57b08..6dd99a84 100644
--- a/packages/runtime/src/components/plain/Button.tsx
+++ b/packages/runtime/src/components/plain/Button.tsx
@@ -1,12 +1,15 @@
 import React, { useEffect, useRef } from 'react';
 import { createComponent } from '@meta-ui/core';
-import { Type } from '@sinclair/typebox';
-import Text, { TextProps, TextPropertySchema } from '../_internal/Text';
+import { Type, Static } from '@sinclair/typebox';
+import Text, { TextPropertySchema } from '../_internal/Text';
 import { ComponentImplementation } from '../../registry';
 
-const Button: ComponentImplementation<{
-  text: TextProps['value'];
-}> = ({ text, mergeState, subscribeMethods, callbackMap }) => {
+const Button: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  text,
+  mergeState,
+  subscribeMethods,
+  callbackMap,
+}) => {
   useEffect(() => {
     mergeState({ value: text.raw });
   }, [text.raw]);
@@ -31,6 +34,10 @@ const StateSchema = Type.Object({
   value: Type.String(),
 });
 
+const PropsSchema = Type.Object({
+  text: TextPropertySchema,
+});
+
 export default {
   ...createComponent({
     version: 'plain/v1',
@@ -39,12 +46,7 @@ export default {
       description: 'plain button',
     },
     spec: {
-      properties: [
-        {
-          name: 'text',
-          ...TextPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       acceptTraits: [],
       state: StateSchema,
       methods: [
diff --git a/packages/runtime/src/traits/core/arrayState.tsx b/packages/runtime/src/traits/core/arrayState.tsx
index b9ec3475..941825a0 100644
--- a/packages/runtime/src/traits/core/arrayState.tsx
+++ b/packages/runtime/src/traits/core/arrayState.tsx
@@ -7,10 +7,13 @@ const HasInitializedMap = new Map<string, boolean>();
 
 type KeyValue = { key: string; value: unknown };
 
-const ArrayStateTrait: TraitImplementation<{
-  key: Static<typeof KeyPropertySchema>;
-  initialValue: Static<typeof InitialValuePropertySchema>;
-}> = ({ key, initialValue, componentId, mergeState, subscribeMethods }) => {
+const ArrayStateTrait: TraitImplementation<Static<typeof PropsSchema>> = ({
+  key,
+  initialValue,
+  componentId,
+  mergeState,
+  subscribeMethods,
+}) => {
   const hashId = `#${componentId}@${key}`;
   const hasInitialized = HasInitializedMap.get(hashId);
 
@@ -50,8 +53,10 @@ const ArrayStateTrait: TraitImplementation<{
   };
 };
 
-const KeyPropertySchema = Type.String();
-const InitialValuePropertySchema = Type.Array(Type.Any());
+const PropsSchema = Type.Object({
+  key: Type.String(),
+  initialValue: Type.Array(Type.Any()),
+});
 
 export default {
   ...createTrait({
@@ -61,16 +66,7 @@ export default {
       description: 'add array state to component',
     },
     spec: {
-      properties: [
-        {
-          name: 'key',
-          ...KeyPropertySchema,
-        },
-        {
-          name: 'initialValue',
-          ...InitialValuePropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       state: Type.Any(),
       methods: [
         {
diff --git a/packages/runtime/src/traits/core/event.tsx b/packages/runtime/src/traits/core/event.tsx
index 59380c82..7db79270 100644
--- a/packages/runtime/src/traits/core/event.tsx
+++ b/packages/runtime/src/traits/core/event.tsx
@@ -4,9 +4,9 @@ import { debounce, throttle, delay } from 'lodash';
 import { CallbackMap, TraitImplementation } from '../../registry';
 import { apiService } from '../../api-service';
 
-const useEventTrait: TraitImplementation<{
-  events: Static<typeof EventsPropertySchema>;
-}> = ({ events }) => {
+const useEventTrait: TraitImplementation<Static<typeof PropsSchema>> = ({
+  events,
+}) => {
   const callbackQueueMap: Record<string, Array<() => void>> = {};
 
   // setup current handlers
@@ -33,10 +33,10 @@ const useEventTrait: TraitImplementation<{
       event.wait.type === 'debounce'
         ? debounce(handler, event.wait.time)
         : event.wait.type === 'throttle'
-          ? throttle(handler, event.wait.time)
-          : event.wait.type === 'delay'
-            ? () => delay(handler, event.wait.time)
-            : handler
+        ? throttle(handler, event.wait.time)
+        : event.wait.type === 'delay'
+        ? () => delay(handler, event.wait.time)
+        : handler
     );
   }
 
@@ -59,27 +59,29 @@ const useEventTrait: TraitImplementation<{
   };
 };
 
-const EventsPropertySchema = Type.Array(
-  Type.Object({
-    event: Type.String(),
-    componentId: Type.String(),
-    method: Type.Object({
-      name: Type.String(),
-      parameters: Type.Any(),
-    }),
-    wait: Type.Object({
-      type: Type.KeyOf(
-        Type.Object({
-          debounce: Type.String(),
-          throttle: Type.String(),
-          delay: Type.String(),
-        })
-      ),
-      time: Type.Number(),
-    }),
-    disabled: Type.Boolean(),
-  })
-);
+const PropsSchema = Type.Object({
+  events: Type.Array(
+    Type.Object({
+      event: Type.String(),
+      componentId: Type.String(),
+      method: Type.Object({
+        name: Type.String(),
+        parameters: Type.Any(),
+      }),
+      wait: Type.Object({
+        type: Type.KeyOf(
+          Type.Object({
+            debounce: Type.String(),
+            throttle: Type.String(),
+            delay: Type.String(),
+          })
+        ),
+        time: Type.Number(),
+      }),
+      disabled: Type.Boolean(),
+    })
+  ),
+});
 
 export default {
   ...createTrait({
@@ -89,12 +91,7 @@ export default {
       description: 'export component events with advance features',
     },
     spec: {
-      properties: [
-        {
-          name: 'events',
-          ...EventsPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       state: {},
       methods: [],
     },
diff --git a/packages/runtime/src/traits/core/fetch.tsx b/packages/runtime/src/traits/core/fetch.tsx
index 16d2227f..59e646ae 100644
--- a/packages/runtime/src/traits/core/fetch.tsx
+++ b/packages/runtime/src/traits/core/fetch.tsx
@@ -6,7 +6,7 @@ import { CallMethodSchema } from '../../types/CallMethodSchema';
 
 const hasFetchedMap = new Map<string, boolean>();
 
-const useFetchTrait: TraitImplementation<FetchPropertySchema> = ({
+const useFetchTrait: TraitImplementation<Static<typeof PropsSchema>> = ({
   url,
   method,
   lazy: _lazy,
@@ -101,23 +101,16 @@ const useFetchTrait: TraitImplementation<FetchPropertySchema> = ({
   };
 };
 
-const UrlPropertySchema = Type.String(); // {format:uri}?;
-const MethodPropertySchema = Type.String(); // {pattern: /^(get|post|put|delete)$/i}
-const LazyPropertySchema = Type.Boolean();
-const HeaderPropertySchema = Type.Array(
-  Type.Object({ key: Type.String(), value: Type.String() })
-);
-const BodyPropertySchema = Type.Any(); // Type.String()?
-const OnCompletePropertySchema = Type.Array(CallMethodSchema);
-
-type FetchPropertySchema = {
-  url: Static<typeof UrlPropertySchema>;
-  method: Static<typeof MethodPropertySchema>;
-  lazy?: Static<typeof LazyPropertySchema>;
-  headers?: Static<typeof HeaderPropertySchema>;
-  body?: Static<typeof BodyPropertySchema>;
-  onComplete?: Static<typeof OnCompletePropertySchema>;
-};
+const PropsSchema = Type.Object({
+  url: Type.String(), // {format:uri}?;
+  method: Type.String(), // {pattern: /^(get|post|put|delete)$/i}
+  lazy: Type.Boolean(),
+  headers: Type.Array(
+    Type.Object({ key: Type.String(), value: Type.String() })
+  ),
+  body: Type.Any(),
+  onComplete: Type.Array(CallMethodSchema),
+});
 
 export default {
   ...createTrait({
@@ -127,28 +120,7 @@ export default {
       description: 'fetch data to store',
     },
     spec: {
-      properties: [
-        {
-          name: 'url',
-          ...UrlPropertySchema,
-        },
-        {
-          name: 'method',
-          ...MethodPropertySchema,
-        },
-        {
-          name: 'lazy',
-          ...LazyPropertySchema,
-        },
-        {
-          name: 'headers',
-          ...HeaderPropertySchema,
-        },
-        {
-          name: 'body',
-          ...BodyPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       state: Type.Object({
         fetch: Type.Object({
           loading: Type.Boolean(),
diff --git a/packages/runtime/src/traits/core/hidden.tsx b/packages/runtime/src/traits/core/hidden.tsx
index f76f5f1c..ecf2e199 100644
--- a/packages/runtime/src/traits/core/hidden.tsx
+++ b/packages/runtime/src/traits/core/hidden.tsx
@@ -3,11 +3,9 @@ import { createTrait } from '@meta-ui/core';
 import { Static, Type } from '@sinclair/typebox';
 import { TraitImplementation } from '../../registry';
 
-type HiddenProps = {
-  hidden: Static<typeof HiddenPropertySchema>;
-};
-
-const useHiddenTrait: TraitImplementation<HiddenProps> = ({ hidden }) => {
+const useHiddenTrait: TraitImplementation<Static<typeof PropsSchema>> = ({
+  hidden,
+}) => {
   const style: CSSProperties = {};
   if (hidden) {
     style.display = 'none';
@@ -19,7 +17,9 @@ const useHiddenTrait: TraitImplementation<HiddenProps> = ({ hidden }) => {
   };
 };
 
-const HiddenPropertySchema = Type.Union([Type.Boolean(), Type.String()]);
+const PropsSchema = Type.Object({
+  hidden: Type.Boolean(),
+});
 
 export default {
   ...createTrait({
@@ -29,12 +29,7 @@ export default {
       description: 'render component with condition',
     },
     spec: {
-      properties: [
-        {
-          name: 'hidden',
-          ...HiddenPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       state: {},
       methods: [],
     },
diff --git a/packages/runtime/src/traits/core/slot.tsx b/packages/runtime/src/traits/core/slot.tsx
index e471b688..c940230f 100644
--- a/packages/runtime/src/traits/core/slot.tsx
+++ b/packages/runtime/src/traits/core/slot.tsx
@@ -6,6 +6,10 @@ export const ContainerPropertySchema = Type.Object({
   slot: Type.String(),
 });
 
+const PropsSchema = Type.Object({
+  container: ContainerPropertySchema,
+});
+
 export default {
   ...createTrait({
     version: 'core/v1',
@@ -14,12 +18,7 @@ export default {
       description: 'nested components by slots',
     },
     spec: {
-      properties: [
-        {
-          name: 'container',
-          ...ContainerPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       state: {},
       methods: [],
     },
diff --git a/packages/runtime/src/traits/core/state.tsx b/packages/runtime/src/traits/core/state.tsx
index 715b06f4..f037bfac 100644
--- a/packages/runtime/src/traits/core/state.tsx
+++ b/packages/runtime/src/traits/core/state.tsx
@@ -6,10 +6,13 @@ const HasInitializedMap = new Map<string, boolean>();
 
 type KeyValue = { key: string; value: unknown };
 
-const useStateTrait: TraitImplementation<{
-  key: Static<typeof KeyPropertySchema>;
-  initialValue: Static<typeof InitialValuePropertySchema>;
-}> = ({ key, initialValue, componentId, mergeState, subscribeMethods }) => {
+const useStateTrait: TraitImplementation<Static<typeof PropsSchema>> = ({
+  key,
+  initialValue,
+  componentId,
+  mergeState,
+  subscribeMethods,
+}) => {
   const hashId = `#${componentId}@${key}`;
   const hasInitialized = HasInitializedMap.get(hashId);
 
@@ -33,8 +36,10 @@ const useStateTrait: TraitImplementation<{
   };
 };
 
-const KeyPropertySchema = Type.String();
-const InitialValuePropertySchema = Type.Any();
+const PropsSchema = Type.Object({
+  key: Type.String(),
+  initialValue: Type.Any(),
+});
 
 export default {
   ...createTrait({
@@ -44,16 +49,7 @@ export default {
       description: 'add state to component',
     },
     spec: {
-      properties: [
-        {
-          name: 'key',
-          ...KeyPropertySchema,
-        },
-        {
-          name: 'initialValue',
-          ...InitialValuePropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       state: Type.Any(),
       methods: [
         {
diff --git a/packages/runtime/src/traits/core/style.tsx b/packages/runtime/src/traits/core/style.tsx
index abdf7674..70d17277 100644
--- a/packages/runtime/src/traits/core/style.tsx
+++ b/packages/runtime/src/traits/core/style.tsx
@@ -3,7 +3,7 @@ import { Static, Type } from '@sinclair/typebox';
 import { TraitImplementation } from '../../registry';
 
 const StyleTrait: TraitImplementation<{
-  style: Static<typeof StylesPropertySchema>;
+  style: Static<typeof PropsSchema>;
 }> = ({ style }) => {
   return {
     props: {
@@ -12,7 +12,9 @@ const StyleTrait: TraitImplementation<{
   };
 };
 
-const StylesPropertySchema = Type.Array(Type.Object(Type.String()));
+const PropsSchema = Type.Object({
+  string: Type.Object(Type.String()),
+});
 export default {
   ...createTrait({
     version: 'core/v1',
@@ -21,12 +23,7 @@ export default {
       description: 'add style to component',
     },
     spec: {
-      properties: [
-        {
-          name: 'style',
-          ...StylesPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       state: {},
       methods: [],
     },
diff --git a/packages/runtime/src/traits/core/validation.tsx b/packages/runtime/src/traits/core/validation.tsx
index f6ec669b..2df77208 100644
--- a/packages/runtime/src/traits/core/validation.tsx
+++ b/packages/runtime/src/traits/core/validation.tsx
@@ -41,60 +41,57 @@ addValidationRule('phoneNumber', text => {
   }
 });
 
-type ValidationProps = {
-  value: string;
-  minLength: number;
-  maxLength: number;
-  rule: string;
-};
-
 const ValidationResultCache: Record<string, ValidationResult> = {};
 
-const ValidationTraitImpl: TraitImplementation<ValidationProps> = props => {
-  const { value, minLength, maxLength, mergeState, componentId, rule } = props;
+const ValidationTraitImpl: TraitImplementation<Static<typeof PropsSchema>> =
+  props => {
+    const { value, minLength, maxLength, mergeState, componentId, rule } =
+      props;
 
-  const result: ValidationResult = {
-    isInvalid: false,
-    errorMsg: '',
-  };
+    const result: ValidationResult = {
+      isInvalid: false,
+      errorMsg: '',
+    };
 
-  if (value.length > maxLength) {
-    result.isInvalid = true;
-    result.errorMsg = `最长不能超过${maxLength}个字符`;
-  } else if (value.length < minLength) {
-    result.isInvalid = true;
-    result.errorMsg = `不能少于${minLength}个字符`;
-  } else {
-    const rulesArr = rule ? rule.split(',') : [];
-    for (const ruleName of rulesArr) {
-      const validateFunc = rules.get(ruleName);
-      if (validateFunc) {
-        const { isInvalid, errorMsg } = validateFunc(value);
-        if (isInvalid) {
-          result.isInvalid = true;
-          result.errorMsg = errorMsg;
-          break;
+    if (value.length > maxLength) {
+      result.isInvalid = true;
+      result.errorMsg = `最长不能超过${maxLength}个字符`;
+    } else if (value.length < minLength) {
+      result.isInvalid = true;
+      result.errorMsg = `不能少于${minLength}个字符`;
+    } else {
+      const rulesArr = rule ? rule.split(',') : [];
+      for (const ruleName of rulesArr) {
+        const validateFunc = rules.get(ruleName);
+        if (validateFunc) {
+          const { isInvalid, errorMsg } = validateFunc(value);
+          if (isInvalid) {
+            result.isInvalid = true;
+            result.errorMsg = errorMsg;
+            break;
+          }
         }
       }
     }
-  }
 
-  if (!isEqual(result, ValidationResultCache[componentId])) {
-    ValidationResultCache[componentId] = result;
-    mergeState({
-      validResult: result,
-    });
-  }
+    if (!isEqual(result, ValidationResultCache[componentId])) {
+      ValidationResultCache[componentId] = result;
+      mergeState({
+        validResult: result,
+      });
+    }
 
-  return {
-    props: null,
+    return {
+      props: null,
+    };
   };
-};
 
-const ValidationValuePropertySchema = Type.String();
-const ValidationRulePropertySchema = Type.String();
-const ValidationMinLengthPropertySchema = Type.Integer();
-const ValidationMaxLengthPropertySchema = Type.Integer();
+const PropsSchema = Type.Object({
+  value: Type.String(),
+  rule: Type.String(),
+  maxLength: Type.Integer(),
+  minLength: Type.Integer(),
+});
 
 export default {
   ...createTrait({
@@ -104,24 +101,7 @@ export default {
       description: 'validation trait',
     },
     spec: {
-      properties: [
-        {
-          name: 'value',
-          ...ValidationValuePropertySchema,
-        },
-        {
-          name: 'rule',
-          ...ValidationRulePropertySchema,
-        },
-        {
-          name: 'minLength',
-          ...ValidationMinLengthPropertySchema,
-        },
-        {
-          name: 'maxLength',
-          ...ValidationMaxLengthPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
       state: Type.Object({
         validResult: ValidResultSchema,
       }),
diff --git a/spec/zh_CN/SPEC.md b/spec/zh_CN/SPEC.md
index 55a4c87b..5dad30ce 100644
--- a/spec/zh_CN/SPEC.md
+++ b/spec/zh_CN/SPEC.md
@@ -50,12 +50,12 @@ Component 的模型定义了自身对外提供的配置项与可接受的 trait
 
 ### ComponentSpec
 
-| Attribute    | Type           | Required | Default Value | Description                 |
-| ------------ | -------------- | -------- | ------------- | --------------------------- |
-| properties   | JSONSchema[]   | Y        | {}            | Component 配置项定义        |
-| acceptTraits | TraitSchema[]  | Y        | []            | Component 可适配的 Trait    |
-| state        | JSONSchema     | Y        | {}            | 外部可访问的 Component 状态 |
-| methods      | MethodSchema[] | Y        | []            | 外部可调用的 Component 方法 |
+| Attribute    | Type             | Required | Default Value | Description                 |
+| ------------ | ---------------- | -------- | ------------- | --------------------------- |
+| properties   | JSONSchemaObject | Y        | {}            | Component 配置项定义        |
+| acceptTraits | TraitSchema[]    | Y        | []            | Component 可适配的 Trait    |
+| state        | JSONSchema       | Y        | {}            | 外部可访问的 Component 状态 |
+| methods      | MethodSchema[]   | Y        | []            | 外部可调用的 Component 方法 |
 
 ### TraitSchema
 
@@ -148,11 +148,11 @@ Trait 定义了自身提供的 runtime 能力以及与 Component 交互的方式
 
 ### TraitSpec
 
-| Attribute  | Type           | Required | Default Value | Description                   |
-| ---------- | -------------- | -------- | ------------- | ----------------------------- |
-| properties | JSONSchema[]   | Y        | {}            | Trait 配置项定义              |
-| state      | JSONSchema     | Y        | {}            | Trait 为 Component 添加的状态 |
-| methods    | MethodSchema[] | Y        | []            | Trait 为 Component 添加的方法 |
+| Attribute  | Type             | Required | Default Value | Description                   |
+| ---------- | ---------------- | -------- | ------------- | ----------------------------- |
+| properties | JSONSchemaObject | Y        | {}            | Trait 配置项定义              |
+| state      | JSONSchema       | Y        | {}            | Trait 为 Component 添加的状态 |
+| methods    | MethodSchema[]   | Y        | []            | Trait 为 Component 添加的方法 |
 
 ### Example