# Custom Rendering

The ActionSheet component contains the following building blocks:

* `Header`—Rendered on top of the content. By default, it includes a [`title`](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetprops#title) and a [`subTitle`](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetprops#subtitle).
* `Content`—Renders the main content area of the ActionSheet. By default, it contains a list of items that you can split into two groups. The content can be completely customized.
* `Footer`—Rendered below the content if an `ActionSheetFooter` component is provided.

The ActionSheet allows you to use custom components to customize the appearance of its building blocks.

To render custom content, nest it inside the following components:

* [`ActionSheetHeader`](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetheader)—Specifies the header section of the ActionSheet.
* [`ActionSheetContent`](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetcontent)—Overrides the `Content` building block section.
* [`ActionSheetFooter`](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetfooter)—Specifies the footer area of the ActionSheet.

## Header Component

Use the `ActionSheetHeader` component to customize the header section of the ActionSheet.

> The `ActionSheetHeader` component overrides the ActionSheet `title` and `subTitle` options.

The following example demonstrates the `ActionSheetHeader` in action.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/actionsheet/custom-rendering/header/source.txt)

## Content Component

The `ActionSheetContent` component allows you to completely customize the main content area of the ActionSheet. This enables you to render custom content even when an [`items`](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheet) collection is not provided.

The following example demonstrates the `ActionSheetContent` in action.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/actionsheet/custom-rendering/content/source.txt)

## Footer Component

Use the `ActionSheetFooter` component to render a footer below the `Content` ActionSheet area.

The following example demonstrates the `ActionSheetFooter` in action.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/actionsheet/custom-rendering/footer/source.txt)

## Suggested Links

* [API Reference of the ActionSheet](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheet)
* [API Reference of the ActionSheetItem](https://www.telerik.com/kendo-react-ui-develop/components/layout/api/actionsheetitem)