# Context quickstart

Share a value between a layout and a nested component.

Source: https://withastro-utils.github.io/docs/guides/context/

Context passes values to nested Astro components without forwarding a prop through every intermediate component. It exists during a render; it is not a browser store or persistent session.

## Install Context

```sh title="Terminal"
npm install @astro-utils/context
```

```sh title="Terminal"
pnpm add @astro-utils/context
```

```sh title="Terminal"
yarn add @astro-utils/context
```

```sh title="Terminal"
bun add @astro-utils/context
```

## Provide a named value

```astro title="src/pages/index.astro"
---
import Context from '@astro-utils/context/Context.astro';

const user = await fetchUser();

---
<Context contextName="user" {user}>
   <Layout title="Home Page">
        <h1>This is home page</h1>

        <Button>This is your themed button!</Button>
   </Layout> 
</Context>
```

## Every layout/component can use it

```astro title="src/components/Button.astro"
---
import getContext from '@astro-utils/context';
const { user } = getContext(Astro, 'user');

---
<button class={user?.themes?.button}>Click me</button>
```

```astro title="src/layout/Website.astro"
---
import getContext from '@astro-utils/context';

const { title } = Astro.props;

const { user } = getContext(Astro, 'user');
---
<html lang="en">
    <head>
        <title>{title}</title>
    </head>
    <body>
        <p>{user ? "User logged in" : "User not logged in"}</p>

        </slot>
    </body>
</html>
```

## Nested values

A nested provider with the same `contextName` inherits the outer values and overrides the props it supplies (extends and override). An absent context returns `{}`.

See [Context API](https://withastro-utils.github.io/docs/reference/context/index.md) for manual async rendering and the prop reference.