diff --git a/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
index 3a282a122..cebcbf7c4 100644
--- a/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
+++ b/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -12,7 +12,6 @@ import {
   FlexProps,
   Heading,
   HeadingProps,
-  findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
 
@@ -38,7 +37,7 @@ export default function SiteHeader(props: SiteHeaderProps): React.ReactElement {
       <Heading
         level={1}
         children=\\"Title\\"
-        {...findChildOverrides(props.overrides, \\"Heading\\")}
+        {...getOverrideProps(overrides, \\"Flex.Heading\\")}
       ></Heading>
       <Button
         variation=\\"primary\\"
@@ -334,12 +333,11 @@ import {
   Collection,
   CollectionProps,
   EscapeHatchProps,
-  ListingCard,
-  ListingCardProps,
   findChildOverrides,
   getOverrideProps,
   useDataStoreBinding,
 } from \\"@aws-amplify/ui-react\\";
+import ListingCard, { ListingCardProps } from \\"./ListingCard\\";
 import { UntitledModel } from \\"../models\\";
 
 export type ListingCardCollectionProps = Partial<CollectionProps<any>> & {
@@ -392,11 +390,10 @@ import {
   Collection,
   CollectionProps,
   EscapeHatchProps,
-  ListingCard,
-  ListingCardProps,
   findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
+import ListingCard, { ListingCardProps } from \\"./ListingCard\\";
 
 export type ListingCardCollectionProps = Partial<CollectionProps<any>> & {
   items?: any[];
@@ -464,14 +461,13 @@ exports[`amplify render tests complex component tests should generate a componen
 "/* eslint-disable */
 import React from \\"react\\";
 import {
-  CustomButton,
-  CustomButtonProps,
   EscapeHatchProps,
   View,
   ViewProps,
   findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
+import CustomButton, { CustomButtonProps } from \\"./CustomButton\\";
 
 export type ViewWithCustomButtonProps = Partial<ViewProps> & {
   overrides?: EscapeHatchProps | undefined | null;
@@ -917,6 +913,104 @@ export default function CustomButton(
 "
 `;
 
+exports[`amplify render tests custom component children should render component with custom children 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  View,
+  ViewProps,
+  findChildOverrides,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+import CustomButton, { CustomButtonProps } from \\"./CustomButton\\";
+
+export type CustomChildrenProps = Partial<ViewProps> & {
+  overrides?: EscapeHatchProps | undefined | null;
+};
+export default function CustomChildren(
+  props: CustomChildrenProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  return (
+    <View {...rest} {...getOverrideProps(overrides, \\"View\\")}>
+      <CustomButton
+        {...findChildOverrides(props.overrides, \\"CustomButton\\")}
+      ></CustomButton>
+    </View>
+  );
+}
+"
+`;
+
+exports[`amplify render tests custom component children should render component with custom children with ES5 1`] = `
+"var __assign =
+  (this && this.__assign) ||
+  function () {
+    __assign =
+      Object.assign ||
+      function (t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+      };
+    return __assign.apply(this, arguments);
+  };
+var __rest =
+  (this && this.__rest) ||
+  function (s, e) {
+    var t = {};
+    for (var p in s)
+      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === \\"function\\")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (
+          e.indexOf(p[i]) < 0 &&
+          Object.prototype.propertyIsEnumerable.call(s, p[i])
+        )
+          t[p[i]] = s[p[i]];
+      }
+    return t;
+  };
+/* eslint-disable */
+import React from \\"react\\";
+import {
+  View,
+  findChildOverrides,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+import CustomButton from \\"./CustomButton\\";
+export default function CustomChildren(props) {
+  var overridesProp = props.overrides,
+    rest = __rest(props, [\\"overrides\\"]);
+  var overrides = __assign({}, overridesProp);
+  return React.createElement(
+    View,
+    __assign({}, rest, getOverrideProps(overrides, \\"View\\")),
+    React.createElement(
+      CustomButton,
+      __assign({}, findChildOverrides(props.overrides, \\"CustomButton\\"))
+    )
+  );
+}
+"
+`;
+
+exports[`amplify render tests custom component children should render declarations 1`] = `
+"import React from \\"react\\";
+import { EscapeHatchProps, ViewProps } from \\"@aws-amplify/ui-react\\";
+export declare type CustomChildrenProps = Partial<ViewProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+};
+export default function CustomChildren(props: CustomChildrenProps): React.ReactElement;
+"
+`;
+
 exports[`amplify render tests custom render config should render ES5 1`] = `
 "var __assign =
   (this && this.__assign) ||
@@ -1233,14 +1327,13 @@ exports[`amplify render tests sample code snippet tests should generate a sample
 "/* eslint-disable */
 import React from \\"react\\";
 import {
-  CustomButton,
-  CustomButtonProps,
   EscapeHatchProps,
   View,
   ViewProps,
   findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
+import CustomButton, { CustomButtonProps } from \\"./CustomButton\\";
 
 export type ViewWithButtonProps = Partial<ViewProps> & {
   overrides?: EscapeHatchProps | undefined | null;
@@ -1276,7 +1369,6 @@ import {
   FlexProps,
   Heading,
   HeadingProps,
-  findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
 
@@ -1311,7 +1403,7 @@ export default function SiteHeader(props: SiteHeaderProps): React.ReactElement {
       <Heading
         level={1}
         children=\\"Title\\"
-        {...findChildOverrides(props.overrides, \\"Heading\\")}
+        {...getOverrideProps(overrides, \\"Flex.Heading\\")}
       ></Heading>
       <Button
         variation=\\"primary\\"
@@ -1356,7 +1448,6 @@ import {
   InputProps,
   View,
   ViewProps,
-  findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
 
@@ -1377,57 +1468,57 @@ export default function ParsedFixedValues(
       <Input
         id=\\"string-value\\"
         value=\\"raw string value\\"
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"number-value\\"
         value=\\"67548\\"
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"parsed-number-value\\"
         value={67548}
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"boolean-value\\"
         value=\\"true\\"
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"parsed-boolean-value\\"
         value={true}
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"json-value\\"
         value='{\\"foo\\": \\"bar\\"}'
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"parsed-json-value\\"
         value={{ foo: \\"bar\\" }}
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"array-value\\"
         value=\\"[1,2,3]\\"
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"parsed-array-value\\"
         value={[1, 2, 3]}
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"null-value\\"
         value=\\"null\\"
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"parsed-null-value\\"
         value={null}
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
     </View>
   );
diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts
index 976c17ecb..ce1854f2b 100644
--- a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts
+++ b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts
@@ -266,4 +266,28 @@ describe('amplify render tests', () => {
   it('should render parsed fixed values', () => {
     expect(generateWithAmplifyRenderer('parsedFixedValues')).toMatchSnapshot();
   });
+
+  describe('custom component children', () => {
+    it('should render component with custom children', () => {
+      expect(generateWithAmplifyRenderer('customChildren').componentText).toMatchSnapshot();
+    });
+
+    it('should render component with custom children with ES5', () => {
+      expect(
+        generateWithAmplifyRenderer('customChildren', {
+          target: ScriptTarget.ES5,
+          script: ScriptKind.JS,
+        }).componentText,
+      ).toMatchSnapshot();
+    });
+
+    it('should render declarations', () => {
+      expect(
+        generateWithAmplifyRenderer('customChildren', {
+          script: ScriptKind.JS,
+          renderTypeDeclarations: true,
+        }).declaration,
+      ).toMatchSnapshot();
+    });
+  });
 });
diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/customChildren.json b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/customChildren.json
new file mode 100644
index 000000000..32da51fba
--- /dev/null
+++ b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/customChildren.json
@@ -0,0 +1,10 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "View",
+  "name": "CustomChildren",
+  "properties": {},
+  "children": [{
+    "componentType": "CustomButton",
+    "properties": {}
+  }]
+}
diff --git a/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/amplify-renderer.ts b/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/amplify-renderer.ts
index 2b32eb8f9..0d425c16d 100644
--- a/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/amplify-renderer.ts
+++ b/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/amplify-renderer.ts
@@ -36,9 +36,18 @@ export class AmplifyRenderer extends ReactStudioTemplateRenderer {
   renderJsx(component: StudioComponent | StudioComponentChild, parent?: StudioNode): JsxElement | JsxFragment {
     const node = new StudioNode(component, parent);
     const renderChildren = (children: StudioComponentChild[]) => children.map((child) => this.renderJsx(child, node));
+
+    // add primitives in alphabetical order
     switch (component.componentType) {
-      case 'Collection':
-        return new CollectionRenderer(component, this.importCollection, parent).renderElement(renderChildren);
+      case 'Alert':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
       case 'Badge':
         return new ReactComponentWithChildrenRenderer<BadgeProps>(
           component,
@@ -53,7 +62,9 @@ export class AmplifyRenderer extends ReactStudioTemplateRenderer {
           parent,
         ).renderElement(renderChildren);
 
-      case 'View':
+      case 'ButtonGroup':
+        // unofficial support to retain functionality
+        // TODO: add official support
         return new ReactComponentWithChildrenRenderer<ViewProps>(
           component,
           this.importCollection,
@@ -67,9 +78,93 @@ export class AmplifyRenderer extends ReactStudioTemplateRenderer {
           parent,
         ).renderElement(renderChildren);
 
+      case 'Checkbox':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'CheckboxField':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'Collection':
+        return new CollectionRenderer(component, this.importCollection, parent).renderElement(renderChildren);
+
       case 'Divider':
         return new ReactComponentRenderer<DividerProps>(component, this.importCollection, parent).renderElement();
 
+      case 'Field':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'FieldClearButton':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'FieldDescriptiveText':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'FieldErrorMessage':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'FieldGroup':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'FieldGroupIcon':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'FieldGroupIconButton':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
       case 'Flex':
         return new ReactComponentWithChildrenRenderer<FlexProps>(
           component,
@@ -77,17 +172,259 @@ export class AmplifyRenderer extends ReactStudioTemplateRenderer {
           parent,
         ).renderElement(renderChildren);
 
+      case 'Grid':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'Heading':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'Icon':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
       case 'Image':
         return new ReactComponentRenderer<ImageProps>(component, this.importCollection, parent).renderElement();
 
-      case 'String':
-        return renderString(component as StudioComponentChild);
+      case 'Input':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'Label':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'Link':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'Loader':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'Pagination':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'PasswordField':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'PhoneNumberField':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'Placeholder':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'Radio':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'RadioGroupField':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'Rating':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'ScrollView':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'SearchField':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'Select':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'SelectField':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'StepperField':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'SwitchField':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'Tabs':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
 
       case 'Text':
         return new TextRenderer(component, this.importCollection, parent).renderElement();
 
+      case 'TextArea':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'TextField':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'ToggleButton':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'ToggleButtonGroup':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'View':
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case 'VisuallyHidden':
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      // to be removed
+      case 'String':
+        return renderString(component as StudioComponentChild);
+
       default:
-        return new CustomComponentRenderer(component, this.importCollection).renderElement(renderChildren);
+        return new CustomComponentRenderer(component, this.importCollection, parent).renderElement(renderChildren);
     }
   }
 }
diff --git a/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/customComponent.ts b/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/customComponent.ts
index 919d4d0bd..5a45b60da 100644
--- a/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/customComponent.ts
+++ b/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/customComponent.ts
@@ -13,25 +13,60 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  */
-import { ViewProps as CustomComponentProps } from '@aws-amplify/ui-react';
-
 import { StudioComponentChild } from '@amzn/studio-ui-codegen';
-
-import { factory, JsxChild, JsxElement } from 'typescript';
+import { JsxAttributeLike, JsxOpeningElement, JsxChild, JsxElement, factory } from 'typescript';
+import { buildOpeningElementAttributes, buildOpeningElementActions } from '../react-component-render-helper';
 import { ReactComponentWithChildrenRenderer } from '../react-component-with-children-renderer';
 
-export default class CustomComponentRenderer extends ReactComponentWithChildrenRenderer<CustomComponentProps> {
+export default class CustomComponentRenderer<TPropIn> extends ReactComponentWithChildrenRenderer<TPropIn> {
   renderElement(renderChildren: (children: StudioComponentChild[]) => JsxChild[]): JsxElement {
-    const childrenJsx = this.component.children ? renderChildren(this.component.children ?? []) : [];
+    const children = this.component.children ? this.component.children : [];
     const element = factory.createJsxElement(
-      this.renderCustomCompOpeningElement(),
-      childrenJsx,
+      this.renderOpeningElement(),
+      renderChildren(children),
       factory.createJsxClosingElement(factory.createIdentifier(this.component.componentType)),
     );
 
-    this.importCollection.addImport('@aws-amplify/ui-react', this.component.componentType);
-    this.importCollection.addImport('@aws-amplify/ui-react', `${this.component.componentType}Props`);
+    const {
+      component: { componentType },
+    } = this;
+    this.importCollection.addImport(`./${componentType}`, 'default');
+    this.importCollection.addImport(`./${componentType}`, `${componentType}Props`);
 
     return element;
   }
+
+  protected renderOpeningElement(): JsxOpeningElement {
+    const attributes = Object.entries(this.component.properties).map(([key, value]) =>
+      buildOpeningElementAttributes(value, key),
+    );
+
+    if ('events' in this.component && this.component.events !== undefined) {
+      attributes.push(
+        ...Object.entries(this.component.events).map(([key, value]) => buildOpeningElementActions(key, value)),
+      );
+    }
+
+    this.addFindChildOverrideAttribute(attributes, this.component.componentType);
+
+    return factory.createJsxOpeningElement(
+      factory.createIdentifier(this.component.componentType),
+      undefined,
+      factory.createJsxAttributes(attributes),
+    );
+  }
+
+  protected addFindChildOverrideAttribute(attributes: JsxAttributeLike[], tagName: string) {
+    const findChildOverrideAttr = factory.createJsxSpreadAttribute(
+      factory.createCallExpression(factory.createIdentifier('findChildOverrides'), undefined, [
+        factory.createPropertyAccessExpression(
+          factory.createIdentifier('props'),
+          factory.createIdentifier('overrides'),
+        ),
+        factory.createStringLiteral(tagName),
+      ]),
+    );
+    this.importCollection.addImport('@aws-amplify/ui-react', 'findChildOverrides');
+    attributes.push(findChildOverrideAttr);
+  }
 }
diff --git a/packages/studio-ui-codegen-react/lib/import-collection.ts b/packages/studio-ui-codegen-react/lib/import-collection.ts
index b6b097c01..e3dbe97e8 100644
--- a/packages/studio-ui-codegen-react/lib/import-collection.ts
+++ b/packages/studio-ui-codegen-react/lib/import-collection.ts
@@ -14,6 +14,7 @@
   limitations under the License.
  */
 import factory, { createImportDeclaration, ImportDeclaration } from 'typescript';
+import path from 'path';
 
 export class ImportCollection {
   #collection: Map<string, Set<string>> = new Map();
@@ -57,34 +58,32 @@ export class ImportCollection {
   }
 
   buildImportStatements(): ImportDeclaration[] {
-    const importDeclarations: ImportDeclaration[] = [];
-
-    importDeclarations.push(
+    const importDeclarations: ImportDeclaration[] = [
       factory.createImportDeclaration(
         undefined,
         undefined,
         factory.createImportClause(factory.createIdentifier('React'), undefined),
         factory.createStringLiteral('react'),
       ),
-    );
-
-    for (const [key, value] of this.#collection) {
-      importDeclarations.push(
-        createImportDeclaration(
+    ].concat(
+      Array.from(this.#collection).map(([moduleName, imports]) => {
+        const namedImports = [...imports].filter((namedImport) => namedImport !== 'default').sort();
+        return createImportDeclaration(
           undefined,
           undefined,
           factory.createImportClause(
-            undefined,
+            // use module name as defualt import name
+            [...imports].indexOf('default') >= 0 ? factory.createIdentifier(path.basename(moduleName)) : undefined,
             factory.createNamedImports(
-              [...value].sort().map((item) => {
+              namedImports.map((item) => {
                 return factory.createImportSpecifier(undefined, factory.createIdentifier(item));
               }),
             ),
           ),
-          factory.createStringLiteral(key),
-        ),
-      );
-    }
+          factory.createStringLiteral(moduleName),
+        );
+      }),
+    );
 
     return importDeclarations;
   }
diff --git a/packages/studio-ui-codegen-react/lib/react-component-with-children-renderer.ts b/packages/studio-ui-codegen-react/lib/react-component-with-children-renderer.ts
index 760746c60..ee0a8b43e 100644
--- a/packages/studio-ui-codegen-react/lib/react-component-with-children-renderer.ts
+++ b/packages/studio-ui-codegen-react/lib/react-component-with-children-renderer.ts
@@ -56,26 +56,6 @@ export class ReactComponentWithChildrenRenderer<TPropIn> extends ComponentWithCh
     return element;
   }
 
-  protected renderCustomCompOpeningElement(): JsxOpeningElement {
-    const attributes = Object.entries(this.component.properties).map(([key, value]) =>
-      buildOpeningElementAttributes(value, key),
-    );
-
-    if ('events' in this.component && this.component.events !== undefined) {
-      attributes.push(
-        ...Object.entries(this.component.events).map(([key, value]) => buildOpeningElementActions(key, value)),
-      );
-    }
-
-    this.addFindChildOverrideAttribute(attributes, this.component.componentType);
-
-    return factory.createJsxOpeningElement(
-      factory.createIdentifier(this.component.componentType),
-      undefined,
-      factory.createJsxAttributes(attributes),
-    );
-  }
-
   protected renderOpeningElement(): JsxOpeningElement {
     const attributes = Object.entries(this.component.properties).map(([key, value]) =>
       buildOpeningElementAttributes(value, key),
@@ -145,20 +125,6 @@ export class ReactComponentWithChildrenRenderer<TPropIn> extends ComponentWithCh
     attributes.push(overrideAttr);
   }
 
-  private addFindChildOverrideAttribute(attributes: JsxAttributeLike[], tagName: string) {
-    const findChildOverrideAttr = factory.createJsxSpreadAttribute(
-      factory.createCallExpression(factory.createIdentifier('findChildOverrides'), undefined, [
-        factory.createPropertyAccessExpression(
-          factory.createIdentifier('props'),
-          factory.createIdentifier('overrides'),
-        ),
-        factory.createStringLiteral(tagName),
-      ]),
-    );
-    this.importCollection.addImport('@aws-amplify/ui-react', 'findChildOverrides');
-    attributes.push(findChildOverrideAttr);
-  }
-
   private addBoundExpressionAttributes(
     attributes: JsxAttributeLike[],
     propKey: string,
diff --git a/packages/test-generator/integration-test-templates/cypress/integration/generated-components-spec.js b/packages/test-generator/integration-test-templates/cypress/integration/generated-components-spec.js
index f1bd3a959..50af6b428 100644
--- a/packages/test-generator/integration-test-templates/cypress/integration/generated-components-spec.js
+++ b/packages/test-generator/integration-test-templates/cypress/integration/generated-components-spec.js
@@ -299,6 +299,13 @@ describe('Generated Components', () => {
       cy.get('#parsed-fixed-values').find('#parsed-null-value').should('have.attr', 'value').should('be.empty');
     });
   });
+
+  describe('Custom Component Children', () => {
+    it('Renders custom children', () => {
+      cy.visit('http://localhost:3000/component-tests');
+      cy.get('#custom-children').find('button').should('have.attr', 'style').should('equal', 'color: rgb(255, 0, 0);');
+    });
+  });
 });
 
 describe('Generated Themes', () => {
diff --git a/packages/test-generator/integration-test-templates/src/ComponentTests.tsx b/packages/test-generator/integration-test-templates/src/ComponentTests.tsx
index db8638220..8bb445899 100644
--- a/packages/test-generator/integration-test-templates/src/ComponentTests.tsx
+++ b/packages/test-generator/integration-test-templates/src/ComponentTests.tsx
@@ -43,6 +43,7 @@ import ComponentWithDataBindingWithPredicate from './ui-components/ComponentWith
 import CollectionWithBinding from './ui-components/CollectionWithBinding';
 import CollectionWithSort from './ui-components/CollectionWithSort';
 import ParsedFixedValues from './ui-components/ParsedFixedValues';
+import CustomChildren from './ui-components/CustomChildren';
 import { DataStore } from 'aws-amplify';
 import { User } from './models';
 /* eslint-enable import/extensions */
@@ -189,6 +190,7 @@ export default function ComponentTests() {
       <div id="parsed-fixed-values">
         <ParsedFixedValues />
       </div>
+      <CustomChildren />
     </AmplifyProvider>
   );
 }
diff --git a/packages/test-generator/lib/components/basic-components/basicComponentCustomRating.json b/packages/test-generator/lib/components/basic-components/basicComponentCustomRating.json
index b38cefca5..47d68adc6 100644
--- a/packages/test-generator/lib/components/basic-components/basicComponentCustomRating.json
+++ b/packages/test-generator/lib/components/basic-components/basicComponentCustomRating.json
@@ -4,7 +4,8 @@
   "name": "BasicComponentCustomRating",
   "properties": {
     "value": {
-      "value": "3.5"
+      "value": "3.5",
+      "type": "Number"
     }
   }
 }
diff --git a/packages/test-generator/lib/components/customButton.json b/packages/test-generator/lib/components/customButton.json
index 1fa61b146..8cd120d08 100644
--- a/packages/test-generator/lib/components/customButton.json
+++ b/packages/test-generator/lib/components/customButton.json
@@ -7,7 +7,6 @@
       "value": "#ff0000"
     },
     "width": {
-      "type": "Number",
       "value": "20"
     }
   }
diff --git a/packages/test-generator/lib/components/customChildren.json b/packages/test-generator/lib/components/customChildren.json
new file mode 100644
index 000000000..591f071f5
--- /dev/null
+++ b/packages/test-generator/lib/components/customChildren.json
@@ -0,0 +1,14 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "View",
+  "name": "CustomChildren",
+  "properties": {
+    "id": {
+      "value": "custom-children"
+    }
+  },
+  "children": [{
+    "componentType": "CustomButton",
+    "properties": {}
+  }]
+}
diff --git a/packages/test-generator/lib/components/index.ts b/packages/test-generator/lib/components/index.ts
index ebdc0442f..bbccf906f 100644
--- a/packages/test-generator/lib/components/index.ts
+++ b/packages/test-generator/lib/components/index.ts
@@ -24,6 +24,7 @@ export { default as ComponentWithVariant } from './componentWithVariant.json';
 export { default as ComponentWithActionSignOut } from './componentWithActionSignOut.json';
 export { default as ComponentWithActionNavigation } from './componentWithActionNavigation.json';
 export { default as ParsedFixedValues } from './parsedFixedValues.json';
+export { default as CustomChildren } from './customChildren.json';
 export * from './basic-components';
 export * from './property-binding';
 export * from './default-value-components';