> Markdown version of [Composition with CustomComponent](https://vaadin.com/docs/v7/framework/components/components-customcomponent). Section index: [llms.txt](https://vaadin.com/docs/v7/framework/llms.txt)

# <a id="components.customcomponent"></a>Composition with CustomComponent

The ease of making new user interface components is one of the core features of Vaadin. Typically, you simply combine existing built-in components to produce composite components. In many applications, such composite components make up the majority of the user interface.

As described earlier in ["Compositing Components"](https://vaadin.com/docs/v7/framework/application/application-architecture.md#application.architecture.composition), you have two basic ways to create a composite - either by extending a layout component or the CustomComponent, which typically wraps around a layout component. The benefit of wrapping a layout composite in CustomComponent is mainly encapsulation - hiding the implementation details of the composition. Otherwise, a user of the composite could rely on implementation details, which would create an unwanted dependency.

To create a composite, you need to inherit the CustomComponent and set the *composition root* component in the constructor. The composition root is typically a layout component that contains other components.

For example:

```java
class MyComposite extends CustomComponent {
    public MyComposite(String message) {
        // A layout structure used for composition
        Panel panel = new Panel("My Custom Component");
        VerticalLayout panelContent = new VerticalLayout();
        panelContent.setMargin(true); // Very useful
        panel.setContent(panelContent);

        // Compose from multiple components
        Label label = new Label(message);
        label.setSizeUndefined(); // Shrink
        panelContent.addComponent(label);
        panelContent.addComponent(new Button("Ok"));

        // Set the size as undefined at all levels
        panelContent.setSizeUndefined();
        panel.setSizeUndefined();
        setSizeUndefined();

        // The composition root MUST be set
        setCompositionRoot(panel);
    }
}
```

Take note of the sizing when trying to make a customcomponent that shrinks to fit the contained components. You have to set the size as undefined at all levels; the sizing of the composite component and the composition root are separate.

You can use the component as follows:

```java
MyComposite mycomposite = new MyComposite("Hello");
```

The rendered component is shown in [A custom composite component](#figure.components.customcomponent).

[Image: customcomponent example1]

A custom composite component

You can also inherit any other components, such as layouts, to attain similar composition. Even further, you can create entirely new low-level components, by integrating pure client-side components or by extending the client-side functionality of built-in components. Development of new components is covered in ["Integrating with the Server-Side"](https://vaadin.com/docs/v7/framework/gwt/gwt-overview.md#gwt.overview).