# defaultChildren, custom component?

**URL:** <https://forum.builder.io/t/defaultchildren-custom-component/54>\
**Category:** Technical Questions\
**Tags:** react\
**Created:** [April 15, 2020, 10:15pm UTC](https://forum.builder.io/t/defaultchildren-custom-component/54 "2020-04-15T22:15:58Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![cjl](https://avatars.discourse-cdn.com/v4/letter/c/b487fb/32.png) [@cjl](https://forum.builder.io/u/cjl)\
**Post date:** [April 15, 2020, 10:15pm UTC](https://forum.builder.io/t/defaultchildren-custom-component/54/1 "2020-04-15T22:15:58Z")

</div>

Is it possible to use a custom component in the defaultChildren?

So with the example here [https://www.builder.io/c/docs/custom-react-components](https://www.builder.io/c/docs/custom-react-components)

```auto
import { Builder, withChildren } from '@builder.io/react';

export const Hero = props =>
  <div className={heroStyles}>{div}</div>

const HeroWithBuilderChildren = withChildren(Hero)

Builder.registerElement(HeroWithBuilderChildren, {
  name: 'Hero',
  // Adding defaults is important for easy usability
  defaultChildren: [
    { 
      '@type': '@builder.io/sdk:Element',
      component: { name: 'Text', options: { text: 'I am child text block!' } }
    }
  ]
})

```

I have registered an insertMenu called ‘Chakra’ and a Button component, would I be able to do:

```auto
Builder.registerElement(HeroWithBuilderChildren, {
  name: 'Hero',
  // Adding defaults is important for easy usability
  defaultChildren: [
    { 
      '@type': '@builder.io/sdk:Chakra',
      component: { name: 'Button' }
    }
  ]
})

```

Cheers!

---

<div class="post-metadata">

**Author:** ![steve](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/steve/32/78_2.png) [@steve](https://forum.builder.io/u/steve)\
**Post date:** [April 16, 2020, 12:30am UTC](https://forum.builder.io/t/defaultchildren-custom-component/54/2 "2020-04-16T00:30:40Z")

</div>

Hey @cjl!

You are super close - you want the `name` field for your component name

So if your component is named `Chakra` via

```auto
Builder.registerComponent(ChakraComponent, { name: 'Chakra' })

```

you want to include it as

```auto
Builder.registerElement(HeroWithBuilderChildren, {
  name: 'Hero',
  defaultChildren: [
    { 
      '@type': '@builder.io/sdk:Element',
      component: { 
        name: 'Chakra', /* <- put the component name here */
        options: { /* optional - default props to pass to Chakra */ } 
      }
    }
  ]
})

```