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

> ## Agent Instructions
> Install the Courier skill before writing code: `npx skills add trycourier/courier-skills`. It carries the verified SDK shapes and the rules you cannot get wrong.
> Authenticate every request with `Authorization: Bearer <API_KEY>`. A workspace has several environments and each has its own keys, which are plain `pk_` strings with no environment prefix. Start with Test.
> Send with `client.send.message` from the Node SDK (`@trycourier/courier` v7 and later, where the client is the default import). Reference a template by its `nt_` id or its alias.
> A send accepts a bare Elemental element list, but storing content on a template requires the top-level elements wrapped in a channel element.
> To translate a template, write one locale at a time with `PUT /notifications/{id}/locales/{localeId}`, which merges into the existing translations. `PUT /notifications/{id}/content` and `PUT /notifications/{id}/elements/{elementId}` overwrite translations along with the content, so send each element's `id` and `locales` back, and first remove every `checksum` and any `locales` key that starts with an underscore.
> Templates and journeys can be built in the Courier app or created through the API. Either way they live in the workspace and are referenced by ID when you send.
> The hosted MCP server is https://mcp.courier.com. For a briefing on what Courier is and when to use it, read https://www.courier.com/llms.txt.
> Prefer the Guides tab for how-do-I questions and the Docs tab for how-does-it-behave questions. The API reference lives under /api-reference.

# In-app Inbox

> Add a real-time notification center to your web and mobile apps. Courier hosts the feed, and you choose how much of the UI you build.

Courier Inbox is the notification center behind the bell icon in your web and mobile apps, where users catch up on mentions, approvals, and alerts.

<Frame>
  <img src="https://mintcdn.com/courier-4f1f25dc/NuGEFnWVhb1xgv6w/assets/inbox-web-and-mobile.webp?fit=max&auto=format&n=NuGEFnWVhb1xgv6w&q=85&s=2ada33b29536484b7791aa8364062c78" alt="The Courier Inbox on web and mobile. On the web, a notification panel opens from a bell icon with All and Unread tabs, Mark all as read, and mentions and comments from teammates. On an iPhone, the same feed as a native Inbox screen grouped into Today and Yesterday, with a weekly roundup card and an Inbox tab badge" className="mx-auto" width="1708" height="921" data-path="assets/inbox-web-and-mobile.webp" />
</Frame>

## What is Courier Inbox

Users see what needs their attention without leaving your product, and messages stay there until the user reads or archives them.

It comes in two parts: SDKs that render the inbox in your web and mobile apps, and a backend Courier hosts for you.

* **A prebuilt inbox you embed.** Add the inbox component to your app. Unread counts, Unread and Archived views, in-message actions, and pagination work out of the box.
* **Full control over how it looks.** Theme it to match your brand, replace the header or list items with your own components, or build a custom UI on the same feed.
* **A hosted backend.** Courier stores each user's messages and delivers them in real time. Read and archive state stays in sync across every device the user is signed in on.

## How it works

1. **Embed** the inbox in your app with a Courier SDK.
2. **Send** a message to the `inbox` channel, the same way you'd send an email.
3. **Courier delivers** it in real time to every device the user is signed in on, and keeps read and archive state in sync.

## Choose how much you build

Every option runs on the same feed. Courier stores the messages, delivers them in real time, and tracks read and archive state. What changes is how much of the interface is yours. Start with the prebuilt inbox, and move further only when your design needs it.

| | What you do | What Courier handles | Best for |
| :- | :- | :- | :- |
| **[Prebuilt inbox](/docs/in-app/customize-the-inbox)** | Drop in the component. Set colors, fonts, and light and dark themes. | The whole UI: list, tabs, unread badge, actions, and pagination. | Shipping fast |
| **[Custom components](/docs/in-app/build-a-custom-inbox#replace-parts-of-the-inbox)** | Render your own header, list items, or empty, loading, and error states. | Everything you don't replace, plus fetching, paging, and updates. | Matching your design system |
| **[Custom UI](/docs/in-app/build-a-custom-inbox#build-your-own-ui)** | Build the entire interface from the SDK's messages and actions. | The data: messages, unread counts, read and archive actions, and real-time sync. | Full control |

Custom components work in the web SDKs. On mobile, theme the prebuilt inbox or build a custom UI.

## SDKs

**Web:** [React](/docs/sdk-libraries/courier-react-web) · [Vue](/docs/sdk-libraries/courier-vue-web) · [Angular](/docs/sdk-libraries/courier-angular-web) · [Web Components](/docs/sdk-libraries/courier-web-components)

**Mobile:** [iOS](/docs/sdk-libraries/ios) · [Android](/docs/sdk-libraries/android) · [React Native](/docs/sdk-libraries/react-native) · [Flutter](/docs/sdk-libraries/flutter)

## Start building

<CardGroup cols={2}>
  <Card title="Add an inbox" icon="inbox" href="/docs/in-app/add-an-inbox">
    Install an SDK, sign the user in, and render the inbox.
  </Card>

  <Card title="Send to the inbox" icon="paper-plane" href="/docs/in-app/send-to-the-inbox">
    Send your first message to the `inbox` channel.
  </Card>
</CardGroup>

Want a working app first? Follow a quickstart for [React](/docs/guides/add-an-inbox-to-react), [Next.js](/docs/guides/add-an-inbox-to-nextjs), or [Astro](/docs/guides/add-an-inbox-to-astro).