<commit_before>---
title: How to use create your page layouts in Statinamic
incomplete: true
---

Statinamic uses React components as layouts.

By default, Statinamic might need 2 layouts:

- `Page`
- `PageError`

If you use the `statinamic/lib/PageContainer`, you will need those components in
your `pageComponents` definition
(by default, declared in `app/pageComponents.js`).

## Default page layouts that Statinamic can use

### `Page`

`Page` will be used as the default layout.
**It is required for Statinamic to work.**

[Check out the default Page and the props it got.](https://github.com/MoOx/statinamic/blob/master/boilerplate/web_modules/Page/index.js)

### `PageError`

`PageError` will be used as the default layout when a page has an error
(**eg: http 404 not found**).

_This layout is optional_ and a `PageContainer` contains a minimal fallback if
it is not available.

[Check out the default PageError and the props it got.](https://github.com/MoOx/statinamic/blob/master/boilerplate/web_modules/PageError/index.js)

### `PageLoading`

_This layout is optional_ and not in the default boilerplate. You might want to
use it to add a loader while a page is loading.<commit_msg>Add notice on how to use custom layouts<commit_after>---
title: How to use create your page layouts in Statinamic
incomplete: true
---

Statinamic uses React components as layouts.

By default, Statinamic might need 2 layouts:

- `Page`
- `PageError`

If you use the `statinamic/lib/PageContainer`, you will need those components in
your `pageComponents` definition
(by default, declared in `app/pageComponents.js`).

To use your custom layout, add the `layout` option to the `YAML` frontmatter of your Markdown file like so:

```YAML
title: Hello World
layout: MyCustomLayoutComponent
```

## Default page layouts that Statinamic can use

### `Page`

`Page` will be used as the default layout.
**It is required for Statinamic to work.**

[Check out the default Page and the props it got.](https://github.com/MoOx/statinamic/blob/master/boilerplate/web_modules/Page/index.js)

### `PageError`

`PageError` will be used as the default layout when a page has an error
(**eg: http 404 not found**).

_This layout is optional_ and a `PageContainer` contains a minimal fallback if
it is not available.

[Check out the default PageError and the props it got.](https://github.com/MoOx/statinamic/blob/master/boilerplate/web_modules/PageError/index.js)

### `PageLoading`

_This layout is optional_ and not in the default boilerplate. You might want to
use it to add a loader while a page is loading.
{'fraction_non_alphanumeric': 0.09129593810444875, 'fraction_numerical': 0.003094777562862669, 'mean_word_length': 4.478813559322034, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1989094', 'n_tokens_mistral': 792, 'n_tokens_neox': 749, 'n_words': 335}