--- title: "Screens and layout" description: "Arrange content, headers and tabs." --- ## Example
```tsx import { navigate, Screen, Text } from "ink"; import { moreHoriz } from "ink/icons"; export default function Home() { return navigate("/actions"), }} > Welcome to Ink! ; } ```

Create app/actions.tsx for the header button’s destination. Screen provides padding, navigation and scrolling.

Home screen with a right header action.
## Header actions Use `leftAction` and `rightAction` for header buttons. Back takes precedence over `leftAction` on detail screens. ```tsx import { Screen, navigate } from "ink"; import { graphicEq, sort } from "ink/icons"; navigate("/albums-sort") }} rightAction={{ icon: graphicEq, onPress: () => navigate("/playing") }} > {/* Screen content */} ``` ## Centred content
```tsx Welcome to Ink! ```
Welcome to Ink! centred on the page.
## Stacks

Use Stack to group content. Set axis="horizontal" for a row.

Set onPress to make the whole group tappable, including gaps between its children. Use haptic={false} to disable feedback for that action.

```tsx London United Kingdom Low High ```
A location grouped vertically above two horizontally spaced labels.
## Space between

A vertical Stack with justify="space-between" fills the content area when it is the only child of Screen.

```tsx import { Screen, Stack, Text } from "ink"; My app Powered by Ink Framework ```
My app at the top, with Powered by above Ink Framework centred at the bottom.
## Pinned content

header keeps content above a scrolling list.

```tsx Add item}> item.id} renderItem={item => {item.name}} /> ```
**Start** An Add item button above a list. **Scrolled** The Add item button remains visible after scrolling.
## Tabs

Declare tabs in _layout.tsx. Each name refers to a neighbouring page.

```tsx app/(tabs)/_layout.tsx import { Tabs } from "ink"; import { homeFilled, settingsFilled } from "ink/icons"; export default function Layout() { return ; } ```

See Navigation for tab actions, page structure and history.

Home and settings icons in the bottom navigation bar.
## Spacing and appearance Screens and lists share a default gap of 47 logical units. `Stack` accepts `gap`, `align` and `justify`. Use `gap={0}` for compact groups; do not add padding around content already padded by the screen. ### Background Set `background` to a `#RRGGBB` colour to fill the screen, including its header. Text keeps the current colour scheme. The background follows colour-scheme inversion, like Canvas colours. ```tsx Card details ``` ### Bottom spacing
Set `bottomInset={false}` to let custom controls reach the bottom edge. The default leaves 20 logical units below the content. ```tsx Page content Controls ```
**Default** Controls with the default space below them. **No bottom spacing** The same controls reaching the bottom edge of the screen.
### Colour scheme Use a [toggle](/toggles) to switch between light and dark mode. ```tsx import { Screen, Toggle, setColourScheme, useColourScheme } from "ink"; export default function Appearance() { const scheme = useColourScheme(); return setColourScheme(light ? "light" : "dark")} /> ; } ``` The choice lasts for the app session. Use [Store](/store) to save it between sessions. Photos and codes retain their original colours. ## Wide content

Use wide to reduce horizontal margins to 20 units. Ink reserves space for the scrollbar when needed.

```tsx album.id} renderItem={renderAlbum} /> ```
**Normal** Album list with normal content margins. **Wide** The same album list with wider content and smaller margins.
## Loading images Screens wait up to one second for their first visible images before appearing. Failed images do not block the screen. Images reached by scrolling load normally. To show content immediately: ```tsx {show.title} ```