diff --git a/packages/example/src/Wizards/AllOfExamples.tsx b/packages/example/src/Wizards/AllOfExamples.tsx
index 77374b9..ff8906c 100644
--- a/packages/example/src/Wizards/AllOfExamples.tsx
+++ b/packages/example/src/Wizards/AllOfExamples.tsx
@@ -1,267 +1,250 @@
 import React from 'react';
-import { FormConfig, Field, FieldsPerRow } from '@tutim/types';
+import { FormConfig, Field } from '@tutim/types';
 import { TutimWizard } from '@tutim/headless';
-import { SimpleButton } from '@tutim/shadcn-ui';
-
+import { SimpleButton } from '@tutim/shadcn-ui'
 const config: FormConfig = {
-  fields: [
-    {
-      key: 'firstName',
-      label: 'TextField',
-      type: 'text',
-    },
-    {
-      key: 'lastName',
-      label: 'TextField',
-      type: 'text',
-      isRequired: true,
-      tooltip: 'A tooltip',
-      helperText: 'A helper text',
-      placeholder: 'A placeholder',
-      defaultValue: 'no last',
-    },
-    {
-      key: 'dataPicker',
-      label: 'DateField',
-      type: 'date',
-      isRequired: true,
-    },
-    {
-      key: 'agree',
-      label: 'Agree to our terms and conditions - CheckBoxField',
-      isDisabled: false,
-      type: 'checkbox',
-      isRequired: true,
-    },
-    {
-      key: 'settings',
-      label: 'JsonField',
-      isDisabled: false,
-      type: 'json',
-      isRequired: false,
-    },
-    {
-      key: 'hosting',
-      label: 'RadioField',
-      isDisabled: false,
-      type: 'radio',
-      options: [
-        { value: 'self', label: 'Self-Host' },
-        { value: 'cloud', label: 'Cloud', disabled: true },
-      ],
-      isRequired: false,
-      defaultValue: 'self',
-    },
-    {
-      key: 'enable',
-      label: 'SwitchField',
-      isDisabled: false,
-      type: 'switch',
-      isRequired: false,
-    },
-    {
-      key: 'role',
-      label: 'SelectField',
-      isDisabled: false,
-      type: 'select',
-      options: [
-        { value: 'admin', label: 'Administrator' },
-        { value: 'viewer', label: 'Viewer', disabled: true },
-        { value: 'editor', label: 'Editor' },
-      ],
-      isRequired: false,
-      defaultValue: 'editor',
-    },
-    {
-      key: 'kids',
-      label: 'FieldArray + Collapse + NumberField + textField',
-      type: 'array',
-      children: {
-        fields: [
-          {
-            key: 'name',
-            label: 'Name',
+    fields: [
+        {
+            key: 'firstName',
+            label: 'TextField',
             type: 'text',
-          },
-          {
-            key: 'job',
-            label: 'Job',
+           
+            
+        },
+        {
+            key: 'description',
+            label: 'TextAreaField',
+            type: 'text-area',
+             placeholder: 'Type your text here',
+            
+        },
+
+
+        {
+            key: 'lastName',
+            label: 'TextField',
             type: 'text',
-          },
-          {
-            key: 'age',
-            label: 'Age',
-            type: 'number',
-          },
-        ],
-      },
-    },
-    {
-      key: 'nested-meta',
-      label: 'Nested Meta Collapse',
-      type: 'object',
-      children: {
-        fields: [
-          {
-            key: 'nested',
-            label: 'Nested Meta',
-            type: 'object',
+            isRequired: true,
+            tooltip: 'A tooltip',
+            helperText: 'A helper text',
+            placeholder: 'A placeholder',
+            "defaultValue": "no last"
+        },
+        {
+            key: 'dataPicker',
+            label: 'DateField',
+            type: 'date',
+            isRequired: true,
+        },
+        {
+            "key": "agree",
+            "label": "Agree to our terms and conditions - CheckBoxField",
+            "isDisabled": false,
+            "type": "checkbox",
+            "isRequired": true
+        },
+        {
+            "key": "settings",
+            "label": "JsonField",
+            "isDisabled": false,
+            "type": "json",
+            "isRequired": false
+        },
+        {
+            "key": "hosting",
+            "label": "RadioField",
+            "isDisabled": false,
+            "type": "radio",
+            "options": [
+                { "value": "self", "label": "Self-Host" },
+                { "value": "cloud", "label": "Cloud", "disabled": true }
+            ],
+            "isRequired": false,
+            "defaultValue": "self"
+        },
+        {
+            "key": "enable",
+            "label": "SwitchField",
+            "isDisabled": false,
+            "type": "switch",
+            "isRequired": false
+        },
+        {
+            "key": "role",
+            "label": "SelectField",
+            "isDisabled": false,
+            "type": "select",
+            "options": [
+                { "value": "admin", "label": "Administrator" },
+                { "value": "viewer", "label": "Viewer", "disabled": true },
+                { "value": "editor", "label": "Editor" }
+            ],
+            "isRequired": false,
+            "defaultValue": "editor"
+        },
+        {
+            key: 'kids',
+            label: 'FieldArray + Collapse + NumberField + textField',
+            type: 'array',
             children: {
-              fields: [
-                {
-                  key: 'title',
-                  label: 'Form Title',
-                  type: 'text',
-                  isRequired: true,
-                },
-                {
-                  key: 'description',
-                  label: 'Form Description',
-                  type: 'text',
-                },
-              ],
+                fields: [
+                    {
+                        key: 'name',
+                        label: 'Name',
+                        type: 'text',
+                    },
+                    {
+                        key: 'job',
+                        label: 'Job',
+                        type: 'text',
+                    },
+                    {
+                        key: 'age',
+                        label: 'Age',
+                        type: 'number',
+                    },
+                ],
             },
-          },
-        ],
-      },
-    },
-    {
-      key: 'meta',
-      label: 'Meta Collapse',
-      type: 'object',
-      children: {
-        fields: [
-          {
-            key: 'title',
-            label: 'Form Title',
-            type: 'text',
-            isRequired: true,
-          },
-          {
-            key: 'description',
-            label: 'Form Description',
-            type: 'text',
-          },
-          {
-            key: 'phone',
-            label: 'Phone Number',
-            type: 'number',
-          },
-        ],
-      },
-    },
-    {
-      key: 'kids',
-      label: 'Kids',
-      type: 'array',
-      children: {
-        fields: [
-          {
-            key: 'name',
-            label: 'Name',
-            type: 'text',
-          },
-          {
-            key: 'job',
-            label: 'Job',
-            type: 'text',
-          },
-          {
-            key: 'age',
-            label: 'Age',
-            type: 'number',
-          },
-        ],
-      },
-    },
-  ],
-  wizard: {
-    steps: [
-      {
-        label: 'Basic',
-        fields: [
-          'firstName',
-          'lastName',
-          'dataPicker',
-          'agree',
-          'settings',
-          'hosting',
-          'enable',
-          'role',
-          'clicker',
-          'kids',
-          'nested-meta',
-          'meta',
-        ],
-      },
-      {
-        label: 'Contact',
-        fields: [],
-      },
-      {
-        label: 'Additional',
-        fields: [],
-      },
-    ],
-    orientation: 'vertical',
-  },
-  meta: {
-    title: 'Example Title',
-  },
-  layout: {
-    style: { color: 'green' },
-    groupConfigs: {
-      groups: [
+        },
         {
-          key: 'name',
-          title: 'Three fields in row',
-          fields: ['firstName', 'lastName', 'dataPicker'],
-          layout: { fieldsPerRow: FieldsPerRow.Three },
+            key: 'nested-meta',
+            label: 'Nested Meta Collapse',
+            type: 'object',
+            children: {
+                fields: [
+                    {
+                        key: 'nested',
+                        label: 'Nested Meta',
+                        type: 'object',
+                        children: {
+                            fields: [
+                                {
+                                    key: 'title',
+                                    label: 'Form Title',
+                                    type: 'text',
+                                    isRequired: true,
+                                },
+                                {
+                                    key: 'description',
+                                    label: 'Form Description',
+                                    type: 'text',
+                                },
+                            ],
+                        },
+                    },
+                ],
+            },
         },
         {
-          key: 'role',
-          title: 'Two fields in row',
-          fields: ['agree', 'settings'],
-          layout: { fieldsPerRow: FieldsPerRow.Two },
+            key: 'meta',
+            label: 'Meta Collapse',
+            type: 'object',
+            children: {
+                fields: [
+                    {
+                        key: 'title',
+                        label: 'Form Title',
+                        type: 'text',
+                        isRequired: true,
+                    },
+                    {
+                        key: 'description',
+                        label: 'Form Description',
+                        type: 'text',
+                    },
+                ],
+            },
         },
         {
-          key: 'settings',
-          title: 'One fields in row',
-          fields: ['hosting'],
-          layout: { fieldsPerRow: FieldsPerRow.One },
+            key: 'kids',
+            label: 'Kids',
+            type: 'array',
+            children: {
+                fields: [
+                    {
+                        key: 'name',
+                        label: 'Name',
+                        type: 'text',
+                    },
+                    {
+                        key: 'job',
+                        label: 'Job',
+                        type: 'text',
+                    },
+                    {
+                        key: 'age',
+                        label: 'Age',
+                        type: 'number',
+                    },
+                ],
+            },
         },
-      ],
+    ],
+    wizard: {
+        steps: [
+            {
+                label: 'Basic',
+                fields: [
+                    'firstName',
+                    'description',
+                    'lastName',
+                    'dataPicker',
+                    'agree',
+                    'settings',
+                    'hosting',
+                    'enable',
+                    'role',
+                    'clicker',
+                    'kids',
+                    'nested-meta',
+                    'meta',
+                ],
+            },
+            {
+                label: 'Contact',
+                fields: [],
+            },
+            {
+                label: 'Additional',
+                fields: [],
+            },
+        ],
+        orientation: 'vertical',
+    },
+    meta: {
+        title: 'Example Title',
     },
-  },
 };
 
 const CustomField: Field = ({ inputProps }) => {
-  const { value, onChange } = inputProps;
-  const onClick = () => onChange(value + 2);
-  return <SimpleButton label={`Click Me: ${value}`} onClick={onClick} />;
+    const { value, onChange } = inputProps;
+    const onClick = () => onChange(value + 2);
+    return (
+        <SimpleButton label={`Click Me: ${value}`} onClick={onClick} />
+    );
 };
 
 const customField = {
-  key: 'clicker',
-  label: 'Click Me',
-  type: 'custom',
-  defaultValue: 0,
-  Field: CustomField,
+    key: 'clicker',
+    label: 'Click Me',
+    type: 'custom',
+    defaultValue: 0,
+    Field: CustomField,
 };
 
 const newConfig = { ...config, fields: [...config.fields, customField] };
 
 const initialValues = {
-  firstName: 'sami',
-  agree: true,
-  enable: true,
-  hosting: 'cloud',
+    firstName: 'sami',
+    agree: true,
+    enable: true,
+    hosting: 'cloud',
 };
 
 export const AllOfExamples = (): JSX.Element => {
-  const onSubmit = (data: any) => {
-    alert(JSON.stringify(data));
-  };
+    const onSubmit = (data: any) => {
+        alert(JSON.stringify(data));
+    };
 
-  return <TutimWizard onSubmit={onSubmit} config={newConfig} initialValues={initialValues} />;
-};
+    return <TutimWizard onSubmit={onSubmit} config={newConfig} initialValues={initialValues} />;
+};
\ No newline at end of file
diff --git a/packages/example/src/main.tsx b/packages/example/src/main.tsx
index 2a74c20..3987306 100644
--- a/packages/example/src/main.tsx
+++ b/packages/example/src/main.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-// import App from './App';
+ //import App from './App';
 import App from './ShadcnApp';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />);
diff --git a/packages/fields/src/Fields/SelectField.tsx b/packages/fields/src/Fields/SelectField.tsx
index ef6800a..04e7f6b 100644
--- a/packages/fields/src/Fields/SelectField.tsx
+++ b/packages/fields/src/Fields/SelectField.tsx
@@ -4,7 +4,7 @@ import { FieldWrapper } from './utils';
 
 export const SelectField: Field = ({ fieldConfig, inputProps: { value, onChange }, fieldState }) => {
   const { key, isRequired, isDisabled, options = [], placeholder } = fieldConfig;
-
+             
   const childOptions = options.map((option: Option) => (
     <MuiMenuItem disabled={option.disabled} key={option.value} value={option.value}>
       {option.label}
diff --git a/packages/shadcn-ui/src/exports/Fields/SelectField.tsx b/packages/shadcn-ui/src/exports/Fields/SelectField.tsx
index 54e2418..82820d3 100644
--- a/packages/shadcn-ui/src/exports/Fields/SelectField.tsx
+++ b/packages/shadcn-ui/src/exports/Fields/SelectField.tsx
@@ -1,35 +1,37 @@
 import { Option, Field } from '@tutim/types';
-import { TextField as MuiTextField, MenuItem as MuiMenuItem } from '@mui/material';
 import { FieldWrapper } from './FieldWrapper';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  SelectGroup
+} from '../../components/ui/select';
 
 export const SelectField: Field = ({ fieldConfig, inputProps: { value, onChange }, fieldState }) => {
-  const { key, isRequired, isDisabled, options = [], placeholder } = fieldConfig;
+  
+  const { key, isRequired, isDisabled, options = [] } = fieldConfig;
+
 
   const childOptions = options.map((option: Option) => (
-    <MuiMenuItem disabled={option.disabled} key={option.value} value={option.value}>
-      {option.label}
-    </MuiMenuItem>
+     <SelectItem value={ String(option.value)} key={option.value} disabled={option.disabled}>{option.label}</SelectItem>
   ));
 
+
   return (
     <FieldWrapper fieldConfig={fieldConfig} fieldState={fieldState}>
-      <MuiTextField
-        select
-        onChange={onChange}
-        value={value || ''}
-        InputLabelProps={{ shrink: true }}
-        InputProps={{
-          placeholder: placeholder,
-        }}
-        SelectProps={{ native: false }}
-        fullWidth
-        size="small"
-        key={key}
-        required={isRequired}
-        disabled={isDisabled}
-      >
-        {childOptions}
-      </MuiTextField>
+      <div  className="mt-2" > 
+        <Select key={key} required ={isRequired} disabled={isDisabled} onValueChange ={onChange}>
+      <SelectTrigger className="w-full">
+        <SelectValue placeholder={value || ''} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {childOptions}
+        </SelectGroup>
+      </SelectContent>
+    </Select></div>  
     </FieldWrapper>
   );
 };
diff --git a/packages/shadcn-ui/src/exports/Fields/TextAreaField.tsx b/packages/shadcn-ui/src/exports/Fields/TextAreaField.tsx
index 6ee3f54..4f780b6 100644
--- a/packages/shadcn-ui/src/exports/Fields/TextAreaField.tsx
+++ b/packages/shadcn-ui/src/exports/Fields/TextAreaField.tsx
@@ -1,18 +1,23 @@
 import React from 'react';
 import { Field } from '@tutim/types';
-import { TextField as MuiTextField } from '@mui/material';
+//import { TextField as MuiTextField } from '@mui/material';
 import { FieldWrapper } from './FieldWrapper';
+import { Textarea } from "../../components/ui/textarea"
+
+
 
 export const TextAreaField: Field = ({ fieldConfig, inputProps: { value, onChange }, fieldState }) => {
   const { key, isRequired, isDisabled, placeholder } = fieldConfig;
 
-  const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(event.currentTarget.value);
+  const onInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const { value } = event.currentTarget;
+    onChange(value);
   };
 
+
   return (
     <FieldWrapper fieldConfig={fieldConfig} fieldState={fieldState}>
-      <MuiTextField
+      {/* <MuiTextField
         multiline
         onChange={onInputChange}
         value={value || ''}
@@ -25,7 +30,9 @@ export const TextAreaField: Field = ({ fieldConfig, inputProps: { value, onChang
         key={key}
         required={isRequired}
         disabled={isDisabled}
-      />
+      /> */}
+      <Textarea placeholder ={ placeholder} disabled={isDisabled}  required={isRequired} 
+      onChange={e=>onInputChange(e)}    value={value || ''} rows={4} key={key}/>
     </FieldWrapper>
   );
 };