---
title: StageProvider
description: "Provides the park position, background, and icon size for stages."
---

```tsx
import { StageProvider } from 'filedom';

<StageProvider metrics={metrics} background="#1c1917">
  {children}
</StageProvider>
```

Wait for calibrated metrics before mounting a [Stage](/docs/reference/components/stage); a Stage under a provider with no park throws. Nested providers inherit every value they do not override.

## Props

| Prop | Type | Default | Description |
| - | - | - | - |
| `metrics?` | `SystemMetrics \| null` | - | Supplies the icon size and the default park, one icon in from the bottom-right corner. |
| `park?` | `StagePoint` | - | Overrides the park position. |
| `background?` | `string` | - | Cover colour (#rrggbb). Omit it when a flat-colour Wallpaper renders before the stages. |
| `children` | `React.ReactNode` | - | Wallpaper, stages, and overlays. |

The park is where warm files wait under a cover window filled with the
background colour. Without `background`, the provider uses the colour of a
flat-colour [Wallpaper](/docs/reference/components/wallpaper) rendered inside it. An
image wallpaper has no single colour, so pass `background` explicitly.

`canonicalPark(metrics)` returns the default park, `{ x: width - iconSize, y: height - iconSize }`.
Pass your own `park` when the play area covers that corner.