import DocPage from '@docs/doc-page';
import CodeExample from '@docs/code-example';

<DocPage>

# Custom layout component

Writing layout components is simple. The only thing you need to use is [renderForm](/hooks/use-form-api#renderform) to render nested fields.

In this example we will implement two columns layout, that is using Material Grid component, but the principle is the same for all other mappers and custom design systems.

## Preview

<CodeExample source="components/examples/custom-layout-component" mode="preview" />

</DocPage>