> ## Documentation Index
> Fetch the complete documentation index at: https://docs.awaitio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout Basic

> A title, a description and the display components below each other.

`io.layout.basic()` frames a page with a title and a description and puts the display components below each other. Provided by the `@awaitio/layout-basic` package.

<Frame>
  <img src="https://mintcdn.com/awaitio/MjbT5AW66vMXbVck/images/page-layout-table.png?fit=max&auto=format&n=MjbT5AW66vMXbVck&q=85&s=3fc0d74fc2df214d6aa5c8655226aba8" alt="The Users page of the demo app: the title Users and its description, tiles with totals, a users table and a paged activity table" width="2560" height="2350" data-path="images/page-layout-table.png" />
</Frame>

## Install

```bash theme={null}
npm install @awaitio/layout-basic
```

## Setup

Register it under `basic`, see [Layout components](/core/layout-components):

```ts app.ts {5} theme={null}
import { layoutBasic } from '@awaitio/layout-basic';

export const app = new AwaitIO({
  // name, actionsDirectory, theme, secret, users, components…
  layouts: { basic: layoutBasic },
});
```

Under `basic`, it also frames every page that returns just display components, titled with the page's name and description.

## Usage

```ts actions/users/index.ts theme={null}
export const users = app.page({
  description: 'Everyone who works with the back office.',
  handler: async (io) => {
    return io.layout.basic({
      title: 'Users',
      description: 'Everyone who works with the back office.',
      children: [io.display.table('All users', { rows: await prisma.user.findMany() })],
    });
  },
});
```

## Props

| Prop | Type | Required | Description |
| - | - | - | - |
| `title` | `string` | Required | The heading of the page. |
| `description` | `string` | Optional | One line under the title. |
| `children` | `io.display.*(…)[]` | Required | The display components, top to bottom. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.