# +layout.svelte Definition
**Definition:** SvelteKit layout component that wraps pages and nested
layouts. Receives `data` from its layout `load` and a `children`
snippet to render.
**Syntax:** `src/routes/(...)/+layout.svelte`
**Props typing (Kit ≥2.16):**
`let { data, children }: import('./$types').LayoutProps = $props();`
**Returns:** A wrapper component for shared UI/state across a route
segment.
## Example
```svelte
<script lang="ts">
import type { LayoutProps } from './$types';
let { data, children }: LayoutProps = $props();
</script>
<nav>...</nav>
{@render children()}
```
## Related
- `+page.svelte` — rendered inside the nearest layout
- `load` — layout data loader
- `+layout.ts` — options and typing
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/spences10/mcp-svelte-docs'
If you have feedback or need assistance with the MCP directory API, please join our Discord server