diff --git a/.agents/skills/react-ui-cookbook/SKILL.md b/.agents/skills/react-ui-cookbook/SKILL.md
new file mode 100644
index 0000000000..458cb2fa41
--- /dev/null
+++ b/.agents/skills/react-ui-cookbook/SKILL.md
@@ -0,0 +1,206 @@
+---
+name: react-ui-cookbook
+description:
+  Write, port or update a recipe for the React v15 docs' UI Cookbooks group, with its code in
+  examples/cookbook and its screenshots taken from that app. Use whenever a task adds or changes a
+  UI Cookbook recipe, its CSS, its screenshots, the cookbook base app or its demo data, so every
+  recipe keeps the same look, cast and style rules.
+---
+
+# React UI Cookbook
+
+Every UI Cookbook recipe in the React v15 docs (getstream.io, `content/docs/chat-sdk/react/v15-rc/`,
+URLs under `/chat/docs/sdk/react/v15/ui-cookbooks/`) is built on one base app, follows one set of
+style rules, and is shot in one frame with one cast. The runnable code lives here, in
+`examples/cookbook`; the docs page shows that same code.
+
+## The look
+
+- **Theme:** the SDK's default theme, light, with its default font: the base app loads no theme
+  of its own, and no recipe changes the theme's colors or font. A recipe's CSS reads the
+  `--str-chat__*` tokens, so it follows whatever theme an app sets. Only the Theming recipe
+  (`src/recipes/theming/brand-theme-and-dark-mode/`, shown on the UI › Customizing › Theming docs
+  page) loads a theme, from its own variants: `theme.css`, a green brand theme in light and dark
+  (an emerald accent, `#047857`, on green-tinted surfaces, solid green own bubbles, `#1a7f5a`,
+  with white text, links and mentions, rounder bubbles and cards, Plus Jakarta Sans and soft
+  green-tinted shadows), with every text at 4.5:1 and every border and icon at 3:1. Change the
+  green theme only there. Recipes are shot in the light theme; only the Theming recipe adds dark
+  shots.
+- **Frame:** desktop 1280×720 at DPR 1 (`ChatView`: channel list 320px on the left, the open
+  channel in the middle, a thread on the right when the recipe needs one). Phone recipes use
+  390×844. A shot with four columns (the channel list, the channel, a thread and the side panel)
+  uses 1600×720, set with `viewport` in `shots.json`, so the messages don't wrap word by word.
+  Crop each shot to the part the recipe changes, with a little surrounding UI.
+- **Side panel:** a recipe that shows content in a panel (details, a profile, info) opens it in the
+  base app's one side panel (`src/base/SidePanel.tsx`), never in a column of its own: call
+  `useSidePanel().openSidePanel({ id, title, body })`, or `openUserProfile(userId)` for a profile
+  (the SDK's `userProfile` kind). The panel draws the title row and the close button; the recipe
+  writes only the body, and its section headings use `.cookbook-side-panel__section-title`. It
+  never closes the thread, and opening another panel replaces it: other content and closing
+  release the whole slot, so an earlier profile never comes back. The panel moves focus to its
+  title on open and gives it back to the opener on close; a recipe adds no focus code of its own.
+  A recipe that only changes the message lists or the profile body sets `RecipeConfig.MessageList`
+  and `RecipeConfig.sidePanelProps` instead of copying the channels view. The Overview shows its
+  code. Likewise, a recipe that adds a view beside the channels view sets `RecipeConfig.views` and
+  `RecipeConfig.layouts`, which the base app merges into its own.
+- **Cast:** the user is Cleo; the others are Bob, Cara and Dan, with initials avatars and no
+  photos. Channels: Design review, Weekend trip, Book club, Garden plot, General, and a direct
+  message with Bob. All of it, with fixed message ids, is in `src/base/demo-data.json`.
+- **Content:** neutral and friendly. The demo app is public: no real names, no personal data, no
+  brand names.
+- **Read-only:** the base app blocks every request that would change the demo app (sending,
+  editing, deleting, reacting, flagging, pinning, adding members, updating channels); a blocked
+  request never settles, so the UI keeps its optimistic state. Reads, watching, typing and the
+  user's read state still go through (`src/base/readOnly.ts`). Data changes go in the seed, never
+  in a recipe or a screenshot helper. `?writes=on` turns the guard off, for an app of your own.
+
+## Style rules
+
+`yarn workspace @stream-io/stream-chat-react-cookbook check:css` checks them: literal colors and
+sizes, `var()`s of anything but `--str-chat__` tokens, CSS outside the layer, the prefix, and
+layout properties on SDK markup. It can't judge whether a token fits; review that by eye.
+
+1. **Tokens only.** Colors, spacing, radii and type come from `--str-chat__*` semantic tokens:
+   `--str-chat__text-secondary`, `--str-chat__spacing-sm`, `--str-chat__radius-md`,
+   `--str-chat__font-caption-default`, … No hex, `rgb()` or named colors, and no `px`/`rem`/`em`
+   for spacing, radius or type. Border widths and component sizes may use `px`.
+2. **One layer.** All recipe CSS sits inside `@layer stream-overrides { … }`. The base app declares
+   the order (`modern-normalize, stream, cookbook-base, stream-overrides`), so a recipe never needs
+   extra specificity or `!important`.
+3. **One prefix.** Classes a recipe adds start with `.cookbook-`, followed by a name for the part it
+   styles, for example `.cookbook-pinned-by` or `.cookbook-channel-header__title`. SDK classes
+   (`.str-chat…`) may be restyled.
+4. **Leave the SDK's layout alone.** Never set `display`, `position`, `flex`, `grid`, `float` or
+   offsets on a rule whose target is an SDK class. Style your own markup, or change sizes through a
+   component variable such as `--str-chat__channel-list-width`. Where the SDK has no variable, a
+   comment starting `cookbook-allow-layout:` right above the rule says why; known case: the width of
+   a thread beside a channel.
+
+## Where things are
+
+```
+examples/cookbook/
+  src/base/              the base app (BaseApp.tsx), its CSS (base.css), client, demo data,
+                         the side panel (SidePanel.tsx), URL helpers (OpenFromUrl:
+                         ?channel=&thread=; Simulate: ?simulate=typing&as=), and useClickInTurn
+                         for screenshot helpers that click through the UI
+  src/recipes/<group>/<recipe>/
+    *.tsx, *.css         exactly the recipe code the docs page shows
+    <variant>.recipe.tsx default-exports a RecipeConfig: what the recipe changes in the base app
+                         (ChannelHeader, Wrapper, MessageList, sidePanelProps, views and
+                         layouts merged into the base ones, chatViewProps, chatViewChildren,
+                         chatProps, openFromUrl, theme), and imports the recipe's CSS
+    shots.json           the screenshots the docs page uses (format in scripts/shots.mjs)
+    demo-data.json       optional: users and channels only this recipe needs, in the shape of
+                         src/base/demo-data.json; seeded and listed with the base data
+  scripts/seed.mjs       creates or brings back in line the cast, channels, members, messages,
+                         replies and pins; sets a message's attachments, mentions and custom
+                         fields after sending it; sets read state and receipts, invites, and
+                         the current user's pinned and archived channels, reminders, saved
+                         messages and drafts (fields below)
+  scripts/shots.mjs      takes every shot from the running app, writes them to --out
+  scripts/check-css.mjs  the style-rule check
+```
+
+`<group>` and `<recipe>` match the docs URL: `/ui-cookbooks/headers/channel-header/` lives in
+`src/recipes/headers/channel-header/`. A page with two solutions has two variants, for example
+`css.recipe.tsx` and `component.recipe.tsx`. Open a recipe at
+`http://localhost:5176/?recipe=<group>/<recipe>&variant=<variant>`; `?recipe=base` is the base app
+alone, and no parameter lists every recipe.
+
+## Adding or changing a recipe
+
+1. Read the recipe's docs page and the pages it links to. Check every API it uses against
+   `stream-chat-react` `master` and `stream-chat` `release-v10`.
+2. Write the code in `src/recipes/<group>/<recipe>/`, following the style rules, and add a
+   `<variant>.recipe.tsx` for each solution the page shows.
+3. Put demo data only this recipe needs in its folder's `demo-data.json` (new ids, never reuse
+   one); change `src/base/demo-data.json` only for data every recipe shares. A message may carry
+   `attachments` (for example image URLs), which the seed sets after sending, since the demo app
+   refuses uploads. A message may also carry `mentions` (user ids), which the seed sets after
+   sending, since the demo app refuses a new message with mentions. A message may carry
+   `reminderForCurrentUser`: `{}` saves it for later, `{ "remindAt": "<ISO time>" }` sets a fixed
+   time, and `{ "remindAt": "+2m" }` a time that many minutes after the first seed, kept on later
+   runs, which is how a reminder becomes overdue (the server refuses a past time). The demo app's
+   `messaging` type has `user_message_reminders` off, so the seed reports that and skips them.
+   A channel may carry `draftsForCurrentUser`, the current user's unsent drafts in it:
+   `{ "text" }` for the channel's draft, with `"parent"` (a main-list message id) for a thread's
+   draft and `"quotedMessage"` (a message id) for one that quotes a message. Each is saved only
+   when the stored draft differs. A draft in a base channel would show in that channel's composer
+   in every recipe, so drafts go in the recipe's own channels.
+
+   The other fields the seed reads, each set only when the stored state differs:
+   - On a channel: `createdBy` (a cast id that creates it instead of the current user),
+     `invites` (user ids left with a pending invite), `readBy` and `deliveredTo` (members who
+     read or received its last message), `readUpTo` (`{ userId: messageId }`), `unreadFrom` (a
+     message id the current user's unread state starts at), and `pinnedForCurrentUser` /
+     `archivedForCurrentUser`.
+   - On a message: `pinnedBy` (its author), `custom` (custom fields, such as
+     `{ "ai_generated": true }`), and `unreadForCurrentUser` on a thread's parent (its latest
+     reply stays unread).
+
+   Then run `seed`.
+4. List the shots in `shots.json`, reusing the file names the page already references.
+5. Run the checks and the shots (below), then look at every image.
+6. Copy the code into the docs page so it matches the folder exactly, formatted with the docs'
+   prettier (double quotes, width 80), apart from the base app's setup, which the page either
+   shows in full or links to on the UI Cookbooks Overview. Two rewrites are allowed: imports of
+   the shared side panel and the New conversation dialog become `./SidePanel` and
+   `./NewConversationDialog`, and the `cookbook-allow-layout:` prefix is dropped from comments.
+7. In getstream.io, copy the images into `content/docs/chat-sdk/react/v15-rc/_assets/` and run the
+   docs checks.
+
+## The docs page
+
+Every recipe page has the same shape:
+
+1. What it builds: a one- or two-sentence intro, then the features in a note: `<Admonition
+   type="note">` that opens with the bold line **What you'll build**, then one short bullet per
+   feature: what the user gets, never how it's done (the steps cover that). Then the main
+   screenshot, captioned **Preview**.
+2. Which level it uses, from the Overview's order: restyle, replace one part, compose, or change
+   behaviour in the state layer.
+3. "Start from the base app", linking to the Overview.
+4. The steps, each with its code and, where it helps, a screenshot next to it.
+5. How it works.
+6. Related pages.
+
+Every screenshot has a caption: a short bold line right above the image, **Preview** for the main
+one and a few words saying what the image shows for the others (the site can't render image
+captions below an image). Each captioned screenshot sits between two horizontal rules (`---`, with a
+blank line on each side); consecutive screenshots share the rule between them.
+
+A component and its stylesheet go in one `<Tabs>` block, the code tab labelled `React` and the
+stylesheet tab `CSS`, each with its `title` (see the Pin indicator page).
+
+Docs prose follows the v15 docs conventions: name methods as `Class.method()`, name every field with
+its owner (`channel.state.typing`), say "paginator" for the object that loads items, and put example
+scenarios in an `<Admonition type="info">` titled **Example**.
+
+## Commands
+
+Run from the repository root unless noted.
+
+```bash
+yarn install && yarn build                                 # the SDK the cookbook imports
+yarn workspace @stream-io/stream-chat-react-cookbook seed  # demo data (idempotent)
+yarn workspace @stream-io/stream-chat-react-cookbook dev   # http://localhost:5176
+yarn workspace @stream-io/stream-chat-react-cookbook shots --out <getstream.io>/content/docs/chat-sdk/react/v15-rc/_assets [--only <group>/<recipe>]
+yarn workspace @stream-io/stream-chat-react-cookbook check:css
+yarn workspace @stream-io/stream-chat-react-cookbook build # type-check + build, as CI does
+```
+
+`shots` needs the dev server running and Playwright's Chromium (`npx playwright install chromium`).
+A relative `--out` is resolved from the repository root; an absolute path is safest. Shots use the `en-US` locale
+and the UTC time zone, so dates look the same on every machine. File names must be unique across
+all recipes.
+
+## Done when
+
+- [ ] `check:css` passes.
+- [ ] `build` passes, and `npx eslint --max-warnings 0` and `npx prettier --check` pass for the
+      changed files.
+- [ ] Every shot in `shots.json` is taken, looked at, and shows what the page says.
+- [ ] The docs page's code matches the recipe folder.
+- [ ] In getstream.io: the docs checks and the sample checker pass on the page, and the site builds.
+- [ ] Anything that only renders wrong because of the SDK is reported, not hidden with CSS.
diff --git a/.claude/skills/react-ui-cookbook b/.claude/skills/react-ui-cookbook
new file mode 120000
index 0000000000..ab78786dce
--- /dev/null
+++ b/.claude/skills/react-ui-cookbook
@@ -0,0 +1 @@
+../../.agents/skills/react-ui-cookbook
\ No newline at end of file
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index a1260e5a65..a313c35095 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -66,7 +66,7 @@ jobs:
         run: git diff --exit-code -- src/i18n/keys.ts
 
       - name: Build the example apps
-        # Type-checks and bundles every `examples/*` workspace (vite, tutorial, ai-chatbot) against
+        # Type-checks and bundles every `examples/*` workspace (vite, tutorial, ai-chatbot, cookbook) against
         # the `dist` built above, so an SDK change that breaks an example (or a stream-chat API one
         # relies on) fails here. None of the builds need Stream credentials.
         env:
diff --git a/.gitignore b/.gitignore
index b83ec27e19..7b971ec522 100644
--- a/.gitignore
+++ b/.gitignore
@@ -78,6 +78,8 @@ typings/
 /.env.local
 /.env.development
 /.env.production
+# Local env files in the example apps, such as the cookbook's Giphy key
+examples/*/.env*.local
 
 # next.js build output
 .next
diff --git a/AGENTS.md b/AGENTS.md
index 19e6fd0a2b..04bbdc4241 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -38,7 +38,7 @@ Respect repo-specific rules. Do not suppress lint rules broadly; justify and sco
 - `src/` — library source: `components/`, `context/`, `hooks/`, `store/`, `i18n/`, `styling/`, `a11y/`, `plugins/`, `utils/`, `types/`, `constants/`, `mock-builders/`
 - `src/plugins/` — separately exported entry points: `AIComponents`, `ChannelDetail`, `Emojis`, `SlotGeometry`, `SlotLayout`, `encoders`
 - `scripts/` — build/validation scripts
-- `examples/` — private example workspaces: `examples/tutorial` (one folder per tutorial step), `examples/vite` (complete app), `examples/ai-chatbot` (Next.js AI chatbot)
+- `examples/` — private example workspaces: `examples/tutorial` (one folder per tutorial step), `examples/vite` (complete app), `examples/ai-chatbot` (Next.js AI chatbot), `examples/cookbook` (the base app and code of the docs' UI Cookbook recipes; see `.agents/skills/react-ui-cookbook/SKILL.md`)
 - `ai-docs/` — integrator-facing migration guides (`ai-migration-v14-v15.md`, `i18n-v15-migration.md`, `instance-configuration.md`, …) and the hand-reviewed `i18n-v15-key-map.json`
 - `developers/` — dev notes (`BRANCHES.md`, `COMMIT.md`, `DEPRECATIONS.md`, `DEVELOPMENT.md`, `DOCUMENTATION.md`, `PR.md`, `RELEASE.md`)
 
@@ -84,6 +84,7 @@ yarn validate-entry-isolation # fails if the main entry's ESM graph reaches ai-c
 # Examples
 yarn start:tutorial       # @stream-io/stream-chat-react-tutorial dev server
 yarn start:vite           # @stream-io/stream-chat-react-vite dev server
+yarn start:cookbook       # @stream-io/stream-chat-react-cookbook dev server (UI Cookbook recipes)
 yarn start:ai-chatbot     # @stream-io/stream-chat-react-ai-chatbot dev server (run yarn build first)
 yarn examples:build       # build all example workspaces
 ```
diff --git a/examples/cookbook/index.html b/examples/cookbook/index.html
new file mode 100644
index 0000000000..67a3c0deba
--- /dev/null
+++ b/examples/cookbook/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UI Cookbook</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/cookbook/package.json b/examples/cookbook/package.json
new file mode 100644
index 0000000000..a1ba21760f
--- /dev/null
+++ b/examples/cookbook/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@stream-io/stream-chat-react-cookbook",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 5176 --strictPort",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview --port 5176 --strictPort",
+    "check:css": "node scripts/check-css.mjs",
+    "seed": "node scripts/seed.mjs",
+    "shots": "node scripts/shots.mjs"
+  },
+  "dependencies": {
+    "@stream-io/state-store": "^1.1.6",
+    "leaflet": "^1.9.4",
+    "lucide-react": "^1.61.0",
+    "modern-normalize": "^3.0.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-leaflet": "^5.0.0",
+    "stream-chat": "10.0.0-rc.25",
+    "stream-chat-react": "workspace:^"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.60.0",
+    "@types/leaflet": "^1.9.20",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.3"
+  }
+}
diff --git a/examples/cookbook/scripts/check-css.mjs b/examples/cookbook/scripts/check-css.mjs
new file mode 100644
index 0000000000..e46e6f76d5
--- /dev/null
+++ b/examples/cookbook/scripts/check-css.mjs
@@ -0,0 +1,296 @@
+/**
+ * Checks every recipe stylesheet against the cookbook's style rules:
+ *
+ *   layer    every rule sits inside `@layer stream-overrides { … }`; no other layer, no @import
+ *   colors   colors come from --str-chat__ tokens: no hex, rgb()/hsl()…, named colors, or var()s
+ *            of other custom properties. Setting a --str-chat__ token itself (theming) is allowed
+ *   scale    spacing, radius and type use --str-chat__ tokens, not px/rem/em values
+ *   prefix   classes the recipe adds start with `cookbook-` (SDK classes `str-chat…` may be restyled)
+ *   layout   no display/position/flex/grid/alignment/offsets on a rule that styles SDK markup,
+ *            unless a comment right above the rule contains `cookbook-allow-layout:` and says why
+ *
+ *   yarn workspace @stream-io/stream-chat-react-cookbook check:css
+ */
+import { readdir, readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = path.dirname(fileURLToPath(new URL('../package.json', import.meta.url)));
+const recipesDir = path.join(root, 'src/recipes');
+
+const COLOR_PROPERTIES =
+  /^(color|background|background-color|background-image|border(-(top|right|bottom|left|block|inline)(-(start|end))?)?(-color)?|outline(-color)?|fill|stroke|box-shadow|text-shadow|text-decoration(-color)?|caret-color|accent-color|column-rule(-color)?)$/;
+const SCALE_PROPERTIES =
+  /^(padding|margin|gap|row-gap|column-gap|border(-[a-z-]+)?-radius|font|font-size|line-height|letter-spacing)(-.+)?$/;
+const LAYOUT_PROPERTIES =
+  /^(display|position|float|order|inset(-.+)?|top|right|bottom|left|flex(-.+)?|grid(-.+)?|place-.+|align-.+|justify-.+)$/;
+const LITERAL_COLOR = /#[0-9a-f]{3,8}\b|\b(rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\(/i;
+const SCALE_LITERAL = /(^|[\s(,])-?\d*\.?\d+(px|rem|em)\b/;
+// CSS named colors (the keywords a literal color can hide behind).
+const NAMED_COLORS = new Set(
+  `aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet
+  brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue
+  darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange
+  darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise
+  darkviolet deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen
+  fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred
+  indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan
+  lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen
+  lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen magenta
+  maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue
+  mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin
+  navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen
+  paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple rebeccapurple red
+  rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue
+  slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white
+  whitesmoke yellow yellowgreen`.split(/\s+/),
+);
+
+const listCssFiles = async (dir) => {
+  const files = [];
+  for (const entry of await readdir(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) files.push(...(await listCssFiles(full)));
+    else if (entry.name.endsWith('.css')) files.push(full);
+  }
+  return files;
+};
+
+const problems = [];
+const report = (file, line, rule, message) =>
+  problems.push(`${path.relative(root, file)}:${line}  [${rule}] ${message}`);
+
+/**
+ * Replaces comments with spaces (so offsets and line numbers stay put) and returns them with their
+ * end offsets, so a rule can find the comments written right above it.
+ */
+const extractComments = (css) => {
+  const comments = [];
+  let stripped = '';
+  let i = 0;
+  while (i < css.length) {
+    if (css.startsWith('/*', i)) {
+      const end = css.indexOf('*/', i + 2);
+      if (end === -1) return { error: i };
+      comments.push({ end: end + 2, text: css.slice(i + 2, end) });
+      stripped += css.slice(i, end + 2).replace(/[^\n]/g, ' ');
+      i = end + 2;
+    } else {
+      stripped += css[i++];
+    }
+  }
+  return { comments, stripped };
+};
+
+/** Splits comment-free CSS into blocks, and statements outside any block. */
+const parseBlocks = (css) => {
+  const blocks = [];
+  const statements = [];
+  const stack = [];
+  let start = 0;
+  const lineOf = (index) => css.slice(0, index).split('\n').length;
+  for (let i = 0; i < css.length; i++) {
+    const char = css[i];
+    if (char === '{') {
+      const raw = css.slice(start, i);
+      const block = {
+        declarations: [],
+        depth: stack.length,
+        line: lineOf(start + raw.search(/\S/)),
+        parent: stack[stack.length - 1],
+        selector: raw.trim().replace(/\s+/g, ' '),
+        selectorStart: start + raw.search(/\S/),
+      };
+      blocks.push(block);
+      stack.push(block);
+      start = i + 1;
+    } else if (char === '}' || char === ';') {
+      const text = css.slice(start, i).trim();
+      if (text) {
+        if (stack.length) stack[stack.length - 1].declarations.push(text);
+        else
+          statements.push({
+            line: lineOf(start + css.slice(start, i).search(/\S/)),
+            text,
+          });
+      }
+      if (char === '}') stack.pop();
+      start = i + 1;
+    }
+  }
+  return { blocks, statements };
+};
+
+/** The comments between the previous rule boundary and this block's selector. */
+const commentsAbove = (comments, original, block) => {
+  const before = original.slice(0, block.selectorStart);
+  const boundary = Math.max(
+    before.lastIndexOf('{'),
+    before.lastIndexOf('}'),
+    before.lastIndexOf(';'),
+  );
+  return comments.filter((c) => c.end > boundary && c.end <= block.selectorStart);
+};
+
+/** The parts of a value outside var(): what's left once every var(--name, fallback) is removed. */
+const outsideVars = (value) => {
+  let result = '';
+  let depth = 0;
+  for (let i = 0; i < value.length; i++) {
+    if (value.startsWith('var(', i) && depth === 0) {
+      depth = 1;
+      i += 3;
+      continue;
+    }
+    if (depth) {
+      if (value[i] === '(') depth++;
+      else if (value[i] === ')') depth--;
+      continue;
+    }
+    result += value[i];
+  }
+  return result;
+};
+
+const varNames = (value) => [...value.matchAll(/var\(\s*(--[\w-]+)/g)].map((m) => m[1]);
+const varFallbacks = (value) =>
+  [...value.matchAll(/var\(\s*--[\w-]+\s*,([^)]*)\)/g)].map((m) => m[1]);
+
+const hasLiteralColor = (text) =>
+  LITERAL_COLOR.test(text) ||
+  (text.match(/[a-z]+/gi) ?? []).some((word) => NAMED_COLORS.has(word.toLowerCase()));
+
+// The rule styles SDK markup when its selector involves an SDK class and the element it targets
+// (the last compound of the selector) isn't one the recipe added.
+const stylesSdkMarkup = (selector) =>
+  selector.split(',').some((part) => {
+    const compounds = part.trim().split(/\s*[\s>+~]\s*/);
+    const target = compounds[compounds.length - 1];
+    return /\.str-chat/.test(part) && !/\.cookbook-/.test(target);
+  });
+
+for (const file of await listCssFiles(recipesDir)) {
+  const original = await readFile(file, 'utf8');
+  const extracted = extractComments(original);
+  if (extracted.error !== undefined) {
+    report(
+      file,
+      original.slice(0, extracted.error).split('\n').length,
+      'syntax',
+      'unterminated comment',
+    );
+    continue;
+  }
+  const { comments, stripped } = extracted;
+  const { blocks, statements } = parseBlocks(stripped);
+
+  for (const statement of statements) {
+    report(
+      file,
+      statement.line,
+      'layer',
+      `"${statement.text}" is outside @layer stream-overrides`,
+    );
+  }
+
+  for (const block of blocks) {
+    if (block.depth === 0) {
+      if (block.selector !== '@layer stream-overrides') {
+        report(
+          file,
+          block.line,
+          'layer',
+          `"${block.selector}" is outside @layer stream-overrides`,
+        );
+      }
+      continue;
+    }
+    if (block.selector.startsWith('@layer') || block.selector.startsWith('@import')) {
+      report(
+        file,
+        block.line,
+        'layer',
+        `recipes don't add layers of their own: "${block.selector}"`,
+      );
+      continue;
+    }
+    if (block.selector.startsWith('@')) continue;
+
+    for (const className of block.selector.match(/\.[a-zA-Z_-][\w-]*/g) ?? []) {
+      const name = className.slice(1);
+      if (!name.startsWith('cookbook-') && !name.startsWith('str-chat')) {
+        report(file, block.line, 'prefix', `.${name} should start with .cookbook-`);
+      }
+    }
+
+    const sdkMarkup = stylesSdkMarkup(block.selector);
+    const layoutAllowed = commentsAbove(comments, original, block).some((c) =>
+      /cookbook-allow-layout:\s*\S/.test(c.text),
+    );
+
+    for (const declaration of block.declarations) {
+      const separator = declaration.indexOf(':');
+      if (separator === -1) continue;
+      const property = declaration.slice(0, separator).trim().toLowerCase();
+      const value = declaration.slice(separator + 1).trim();
+      const nonTokenVars = varNames(value).filter(
+        (name) => !name.startsWith('--str-chat__'),
+      );
+      const literalText = [outsideVars(value), ...varFallbacks(value)].join(' ');
+
+      // Setting an SDK token is theming, so `--str-chat__*` may hold literal values. A recipe's own
+      // custom properties may hold sizes, never colors.
+      if (property.startsWith('--')) {
+        if (!property.startsWith('--str-chat__') && hasLiteralColor(literalText)) {
+          report(
+            file,
+            block.line,
+            'colors',
+            `${property}: ${value} — use a --str-chat__ color token`,
+          );
+        }
+        continue;
+      }
+
+      if (
+        COLOR_PROPERTIES.test(property) &&
+        (hasLiteralColor(literalText) || nonTokenVars.length)
+      ) {
+        report(
+          file,
+          block.line,
+          'colors',
+          `${property}: ${value} — use a --str-chat__ color token`,
+        );
+      }
+      if (
+        SCALE_PROPERTIES.test(property) &&
+        (SCALE_LITERAL.test(literalText) || nonTokenVars.length)
+      ) {
+        report(
+          file,
+          block.line,
+          'scale',
+          `${property}: ${value} — use a --str-chat__ spacing, radius or font token`,
+        );
+      }
+      if (sdkMarkup && LAYOUT_PROPERTIES.test(property) && !layoutAllowed) {
+        report(
+          file,
+          block.line,
+          'layout',
+          `${property} on "${block.selector}" changes the SDK's layout; style your own markup, use a component variable, or justify it with a cookbook-allow-layout: comment`,
+        );
+      }
+    }
+  }
+}
+
+if (problems.length) {
+  console.error(problems.join('\n'));
+  console.error(
+    `\n${problems.length} problem(s). The rules are in .agents/skills/react-ui-cookbook/SKILL.md.`,
+  );
+  process.exit(1);
+}
+console.log('Recipe CSS follows the cookbook style rules.');
diff --git a/examples/cookbook/scripts/seed.mjs b/examples/cookbook/scripts/seed.mjs
new file mode 100644
index 0000000000..8961727a8b
--- /dev/null
+++ b/examples/cookbook/scripts/seed.mjs
@@ -0,0 +1,528 @@
+/**
+ * Seeds into Stream's public demo app, from src/base/demo-data.json, the cookbook's users,
+ * channels, members, messages and their custom fields, the users a message mentions, attachments, thread replies, pins,
+ * receipts, members' read positions, the current user's channel and thread read state, and the
+ * channels the current user pinned or archived, channels another cast member created with the
+ * current user's invite still pending, the current user's reminders and messages saved for
+ * later, and the current user's unsent drafts in channels and threads. Running it again brings
+ * the app back in line with the file: missing channels, members, invites and messages are added (existing messages are looked up
+ * first, so only the missing ones are sent), changed names, texts and mentions are updated, and
+ * nothing that already matches is touched, so a re-run against unchanged data changes nothing.
+ *
+ *   yarn workspace @stream-io/stream-chat-react-cookbook seed
+ */
+import { existsSync } from 'node:fs';
+import { readdir, readFile } from 'node:fs/promises';
+import { nsToMs, StreamChat } from 'stream-chat';
+
+const readJson = async (url) => JSON.parse(await readFile(url, 'utf8'));
+const demoData = await readJson(new URL('../src/base/demo-data.json', import.meta.url));
+
+// A recipe that needs data of its own keeps it in src/recipes/<group>/<recipe>/demo-data.json, in
+// the same shape (`users` and `channels`); it is seeded together with the base data.
+const recipesDir = new URL('../src/recipes/', import.meta.url);
+for (const group of await readdir(recipesDir, { withFileTypes: true })) {
+  if (!group.isDirectory()) continue;
+  for (const recipe of await readdir(new URL(`${group.name}/`, recipesDir), {
+    withFileTypes: true,
+  })) {
+    const file = new URL(`${group.name}/${recipe.name}/demo-data.json`, recipesDir);
+    if (!recipe.isDirectory() || !existsSync(file)) continue;
+    const extra = await readJson(file);
+    for (const user of extra.users ?? []) {
+      if (!demoData.users.some(({ id }) => id === user.id)) demoData.users.push(user);
+    }
+    demoData.channels.push(...(extra.channels ?? []));
+  }
+}
+
+const fetchToken = async (userId) => {
+  const url = new URL('https://pronto.getstream.io/api/auth/create-token');
+  url.searchParams.set('environment', demoData.tokenEnvironment);
+  url.searchParams.set('user_id', userId);
+  const response = await fetch(url);
+  if (!response.ok)
+    throw new Error(`Token request for ${userId} failed: ${response.status}`);
+  return (await response.json()).token;
+};
+
+const isAlreadyExists = (error) =>
+  /already exists/i.test(String(error?.message ?? error));
+
+// One connected client per demo user. Connecting also creates the user with its name.
+const clients = new Map();
+
+try {
+  for (const user of demoData.users) {
+    const client = new StreamChat(demoData.apiKey, {
+      client: { allowServerSideConnect: true },
+    });
+    clients.set(user.id, client);
+    await client.connectUser(user, () => fetchToken(user.id));
+    console.log(`user ${user.id} (${user.name})`);
+  }
+
+  const owner = clients.get(demoData.currentUserId);
+
+  for (const channelData of demoData.channels) {
+    // `createdBy` creates the channel as another cast member, for a channel the current user
+    // doesn't belong to, such as one they're only invited to. Every other channel is the current
+    // user's. An existing channel keeps its creator.
+    if (channelData.createdBy && !clients.has(channelData.createdBy))
+      console.warn(
+        `  createdBy ${channelData.createdBy} of ${channelData.id} skipped: not a cast member`,
+      );
+    const creator = clients.get(channelData.createdBy) ?? owner;
+    const channel = await creator
+      .channel('messaging', channelData.id, {
+        // Custom fields such as the name go under `custom`; the SDK reads `data.custom.name`.
+        ...(channelData.name && { custom: { name: channelData.name } }),
+        members: channelData.members.map((user_id) => ({ user_id })),
+      })
+      .watch();
+    console.log(`channel ${channelData.id}`);
+
+    // An existing channel keeps its data and members, so reconcile both with the file.
+    if (channelData.name && channel.data?.custom?.name !== channelData.name) {
+      await channel.updatePartial({ set: { 'custom.name': channelData.name } });
+      console.log(`  name → ${channelData.name}`);
+    }
+    const { members } = channel.state.getLatestValue();
+    const missingMembers = channelData.members.filter((id) => !members[id]);
+    if (missingMembers.length) {
+      await channel.addMembers({ members: missingMembers });
+      console.log(`  members + ${missingMembers.join(', ')}`);
+    }
+
+    // `invites` lists users the creator invited and who haven't answered yet, for a recipe that
+    // shows pending invites. A user with a pending invite is left alone, so a re-run changes
+    // nothing. A user who accepted or declined is removed and invited again, which makes the invite
+    // pending once more. A user who is also in `members`, or is the creator, is skipped with a
+    // warning: they would join the channel without an invite.
+    for (const userId of channelData.invites ?? []) {
+      if (channelData.members.includes(userId) || clients.get(userId) === creator) {
+        console.warn(
+          `  invite of ${userId} skipped: already a member of ${channelData.id}`,
+        );
+        continue;
+      }
+      if (!clients.has(userId)) {
+        console.warn(`  invite of ${userId} skipped: not a cast member`);
+        continue;
+      }
+      const member = members[userId];
+      const isPending =
+        member?.invited && !member.invite_accepted_at && !member.invite_rejected_at;
+      if (isPending) continue;
+      if (member) await channel.removeMembers({ members: [userId] });
+      await channel.inviteMembers({ members: [userId] });
+      console.log(`  invited ${userId}`);
+    }
+
+    // The demo app allows each user only a few messages a minute, and a send that fails because
+    // the message already exists still counts. So the messages already in the channel, thread
+    // replies included, are looked up by id first, in batches of 100, and only the missing ones
+    // are sent.
+    const storedById = new Map();
+    const messageIds = channelData.messages.map(({ id }) => id);
+    for (let start = 0; start < messageIds.length; start += 100) {
+      const { messages: stored } = await channel.getMessagesById(
+        messageIds.slice(start, start + 100),
+      );
+      for (const storedMessage of stored) storedById.set(storedMessage.id, storedMessage);
+    }
+
+    // Messages go out in order, each from its author, so the list reads as a conversation.
+    // Receipts are for the main list, so the last message that isn't a thread reply is kept.
+    let lastSent;
+    for (const message of channelData.messages) {
+      const author = clients.get(message.user);
+      let sent = storedById.get(message.id);
+      if (!sent) {
+        try {
+          sent = (
+            await author.channel('messaging', channelData.id).sendMessage({
+              message: {
+                id: message.id,
+                text: message.text,
+                ...(message.parent && { parent_id: message.parent }),
+              },
+            })
+          ).message;
+          console.log(`  message ${message.id}`);
+        } catch (error) {
+          // The id is taken outside this channel, or the lookup missed it: read it as it is.
+          if (!isAlreadyExists(error)) throw error;
+          sent = (await author.getMessage({ id: message.id })).message;
+        }
+      }
+      // An existing message whose text differs from the file gets the file's text.
+      if (sent.text !== message.text) {
+        await author.updateMessagePartial(
+          { id: message.id },
+          { set: { text: message.text } },
+        );
+        console.log(`  text of ${message.id} updated`);
+      }
+
+      // `custom` holds a message's custom fields, for example `ai_generated` on an assistant's
+      // reply. They are set after it's sent, by its author, and only the ones whose stored value
+      // differs, so a re-run changes nothing. A message without `custom` keeps whatever it has.
+      // A key that names a top-level field (`text`, `id`, `user`) would overwrite that field, so
+      // it is skipped with a warning.
+      const reservedKeys = ['text', 'id', 'user'];
+      const changedCustom = Object.entries(message.custom ?? {}).filter(
+        ([key, value]) => {
+          if (reservedKeys.includes(key)) {
+            console.warn(
+              `  custom field "${key}" of ${message.id} skipped: it's a reserved field`,
+            );
+            return false;
+          }
+          return (
+            JSON.stringify(sent.custom?.[key] ?? sent[key]) !== JSON.stringify(value)
+          );
+        },
+      );
+      if (changedCustom.length) {
+        await author.updateMessagePartial(
+          { id: message.id },
+          {
+            set: Object.fromEntries(
+              changedCustom.map(([key, value]) => [`custom.${key}`, value]),
+            ),
+          },
+        );
+        console.log(`  custom fields of ${message.id} set`);
+      }
+
+      // `mentions` lists the ids of the users the text mentions (`@Cleo`), for a recipe that shows
+      // mentions; the server stores them as `mentioned_users`. The demo app refuses a new message
+      // with mentions, so they are set after it's sent, by its author, and only when the stored ids
+      // differ, so a re-run changes nothing. A message without `mentions` keeps whatever it has.
+      // An id that isn't a cast member and a member of the channel is skipped with a warning.
+      const mentions = (message.mentions ?? []).filter((userId) => {
+        const known = clients.has(userId) && channelData.members.includes(userId);
+        if (!known)
+          console.warn(
+            `  mention of ${userId} in ${message.id} skipped: not a cast member and a member of ${channelData.id}`,
+          );
+        return known;
+      });
+      const sameIds = (a, b) =>
+        JSON.stringify([...a].sort()) === JSON.stringify([...b].sort());
+      const mentionedIds = (sent.mentioned_users ?? []).map(({ id }) => id);
+      if (message.mentions && !sameIds(mentionedIds, mentions)) {
+        await author.updateMessagePartial(
+          { id: message.id },
+          { set: { mentioned_users: mentions } },
+        );
+        console.log(`  mentions of ${message.id} set`);
+      }
+
+      // The demo app refuses uploads, so a message's attachments (image URLs and the like) are set
+      // on it after it's sent, by its author. Compared by value, so a re-run changes nothing.
+      // The server adds fields of its own to each attachment, so only the fields the file sets are compared.
+      const sameAttachments = (stored = []) =>
+        stored.length === message.attachments.length &&
+        message.attachments.every((attachment, index) =>
+          Object.entries(attachment).every(
+            ([key, value]) =>
+              // Fields the attachment type doesn't define come back under `custom`.
+              JSON.stringify(stored[index]?.[key] ?? stored[index]?.custom?.[key]) ===
+              JSON.stringify(value),
+          ),
+        );
+      if (message.attachments && !sameAttachments(sent.attachments)) {
+        await author.updateMessagePartial(
+          { id: message.id },
+          { set: { attachments: message.attachments } },
+        );
+        console.log(`  attachments of ${message.id} set`);
+      }
+
+      // Only the author may pin their message in the demo app. An existing pin keeps its date,
+      // so a screenshot showing it doesn't change on every seed.
+      if (message.pinnedBy && !sent.pinned) {
+        await clients.get(message.pinnedBy).pinMessage({ id: message.id });
+        console.log(`  pinned ${message.id}`);
+      }
+      if (!message.parent) lastSent = sent;
+    }
+
+    // `reminderForCurrentUser` gives a message a reminder of the current user's, for a recipe that
+    // lists saved messages and reminders: `{}` saves the message for later with no time,
+    // `{ remindAt: <ISO time> }` sets a fixed time, and `{ remindAt: "+2m" }` a time that many
+    // minutes after the run that creates it. The server refuses a time in the past, so a relative
+    // time is how a reminder becomes overdue: it is created once and then kept, like a pin's date,
+    // so its label stays the same on later runs. Reminders are looked up first and set only when
+    // one is missing or differs from the file (deleted and created again, which also turns a
+    // reminder into a saved message and back), so a re-run changes nothing. A message without the
+    // field keeps whatever reminder it has. A channel type with reminders turned off refuses them
+    // (`user_message_reminders`), which is reported once per channel and skipped.
+    const withReminder = channelData.messages.filter(
+      (message) => message.reminderForCurrentUser,
+    );
+    if (withReminder.length && !channelData.members.includes(demoData.currentUserId)) {
+      console.warn(
+        `  reminders skipped: ${demoData.currentUserId} is not a member of ${channelData.id}`,
+      );
+    } else if (withReminder.length) {
+      const { reminders: storedReminders } = await owner.queryReminders({
+        filter: { message_id: { $in: withReminder.map(({ id }) => id) } },
+      });
+      for (const message of withReminder) {
+        const { remindAt } = message.reminderForCurrentUser;
+        const relativeMinutes = remindAt?.match(/^\+(\d+)m$/)?.[1];
+        const stored = storedReminders.find(
+          ({ message_id }) => message_id === message.id,
+        );
+        const storedMs = stored?.remind_at != null ? nsToMs(stored.remind_at) : null;
+        const isInLine = relativeMinutes
+          ? storedMs !== null
+          : storedMs === (remindAt ? Date.parse(remindAt) : null);
+        if (stored && isInLine) continue;
+        const wantedMs = relativeMinutes
+          ? Date.now() + Number(relativeMinutes) * 60 * 1000
+          : remindAt && Date.parse(remindAt);
+        try {
+          if (stored) await owner.deleteReminder({ message_id: message.id });
+          await owner.createReminder(
+            { message_id: message.id },
+            wantedMs ? { remind_at: new Date(wantedMs) } : {},
+          );
+          console.log(`  reminder of ${message.id} ${remindAt ?? 'saved for later'}`);
+        } catch (error) {
+          console.warn(`  reminders skipped in ${channelData.id}: ${error.message}`);
+          break;
+        }
+      }
+    }
+
+    // A member listed in both `readBy` and `readUpTo` would be marked read by one step and unread
+    // by the other on every run, and the current user's read state is set further down, so both
+    // are left out with a warning. That keeps a re-run from changing anything.
+    const readUpToIds = Object.keys(channelData.readUpTo ?? {});
+    const readStateConflict = (userId, step) => {
+      if (userId === demoData.currentUserId) {
+        console.warn(
+          `  ${step} by ${userId} skipped: the seed sets the current user's own read state (read, or unreadFrom)`,
+        );
+        return true;
+      }
+      if ((channelData.readBy ?? []).includes(userId) && readUpToIds.includes(userId)) {
+        console.warn(
+          `  ${step} by ${userId} skipped: in both readBy and readUpTo of ${channelData.id}`,
+        );
+        return true;
+      }
+      return false;
+    };
+
+    // Receipts for a recipe that shows them: `readBy` users read the channel up to its last
+    // message, `deliveredTo` users only received it. Each is marked once, as that user, so a re-run
+    // keeps the times a screenshot shows. A channel without a message in its main list has nothing
+    // to mark.
+    const receipts = [
+      ...(channelData.readBy ?? [])
+        .filter((id) => !readStateConflict(id, 'read'))
+        .map((id) => [id, 'read']),
+      ...(channelData.deliveredTo ?? []).map((id) => [id, 'delivered']),
+    ];
+    if (receipts.length && !lastSent)
+      console.warn(`  receipts skipped: ${channelData.id} has no message to mark`);
+    for (const [userId, kind] of lastSent ? receipts : []) {
+      const isMember = channelData.members.includes(userId) && clients.has(userId);
+      if (!isMember) {
+        console.warn(`  ${kind} by ${userId} skipped: not a member of ${channelData.id}`);
+        continue;
+      }
+      const memberChannel = clients.get(userId).channel('messaging', channelData.id);
+      await memberChannel.watch();
+      const own = memberChannel.state.read[userId];
+      const reached = kind === 'read' ? own?.last_read : own?.last_delivered_at;
+      if (reached && reached >= lastSent.created_at) continue;
+      if (kind === 'read') await memberChannel.markRead();
+      else
+        await clients.get(userId).markChannelsDelivered({
+          latest_delivered_messages: [{ cid: memberChannel.cid, id: lastSent.id }],
+        });
+      console.log(`  ${kind} by ${userId}`);
+    }
+
+    // `readUpTo` maps a member to the last main-list message they've read, for a recipe that shows
+    // who read how far. As that member, the channel is marked unread from the next main-list
+    // message, or read when it's the last one. Like the receipts above, it's marked only when the
+    // member's read state differs: the last read message id, or for the last message the time of the
+    // last read, so a re-run changes nothing.
+    const mainList = channelData.messages.filter((message) => !message.parent);
+    for (const [userId, messageId] of Object.entries(channelData.readUpTo ?? {})) {
+      if (readStateConflict(userId, 'read up to')) continue;
+      const isMember = channelData.members.includes(userId) && clients.has(userId);
+      if (!isMember) {
+        console.warn(
+          `  read up to by ${userId} skipped: not a member of ${channelData.id}`,
+        );
+        continue;
+      }
+      const readIndex = mainList.findIndex(({ id }) => id === messageId);
+      if (readIndex === -1) {
+        console.warn(
+          `  read up to by ${userId} skipped: ${messageId} is not a main-list message of ${channelData.id}`,
+        );
+        continue;
+      }
+      const nextMessage = mainList[readIndex + 1];
+      const memberChannel = clients.get(userId).channel('messaging', channelData.id);
+      await memberChannel.watch();
+      const own = memberChannel.state.read[userId];
+      const isReadUpTo = nextMessage
+        ? own?.unread_messages > 0 && own.last_read_message_id === messageId
+        : !!own?.last_read && own.last_read >= lastSent.created_at;
+      if (isReadUpTo) continue;
+      if (nextMessage) await memberChannel.markUnread({ message_id: nextMessage.id });
+      else await memberChannel.markRead();
+      console.log(`  read up to ${messageId} by ${userId}`);
+    }
+
+    // The current user has read everything, so no badge depends on when the seed ran. A channel
+    // with `unreadFrom` (a message id) is the exception: it stays unread from that message on, for
+    // a recipe that shows unread state. A query returns no `first_unread_message_id`, so the check
+    // is that the last read message is the one before it. It is marked only when that differs, so
+    // a re-run changes nothing, and a run after the channel was read in the app marks it again.
+    const unreadIndex = channelData.unreadFrom
+      ? mainList.findIndex(({ id }) => id === channelData.unreadFrom)
+      : -1;
+    // On a channel another cast member created, `channel` is that member's, so the current user's
+    // read state is left alone.
+    if (creator !== owner) {
+      if (channelData.unreadFrom)
+        console.warn(`  unread from skipped: ${channelData.id} has createdBy`);
+    } else if (channelData.unreadFrom && unreadIndex === -1) {
+      console.warn(
+        `  unread from skipped: ${channelData.unreadFrom} is not a main-list message of ${channelData.id}`,
+      );
+    } else if (channelData.unreadFrom) {
+      const lastReadId = mainList[unreadIndex - 1]?.id;
+      const ownRead = channel.state.read[demoData.currentUserId];
+      const isUnreadFrom =
+        ownRead?.unread_messages > 0 && ownRead.last_read_message_id === lastReadId;
+      if (!isUnreadFrom) {
+        await channel.markUnread({ message_id: channelData.unreadFrom });
+        console.log(`  unread from ${channelData.unreadFrom}`);
+      }
+    } else {
+      await channel.markRead().catch(() => undefined);
+    }
+
+    // A parent message with `unreadForCurrentUser` keeps its thread unread for the current user,
+    // for a recipe that shows unread threads: opening a thread in the app marks it read on the
+    // server. `Channel.markUnread({ thread_id })` marks only the thread's latest reply unread (the
+    // server takes no message id with a thread id), so the thread ends up with one unread reply
+    // whatever its history. It is marked only when the server counts a different number, so a
+    // re-run changes nothing.
+    const unreadThreadIds = channelData.messages
+      .filter((message) => message.unreadForCurrentUser)
+      .map(({ id }) => id);
+    if (unreadThreadIds.length) {
+      const { threads = [] } = await owner.unreadCounts();
+      for (const threadId of unreadThreadIds) {
+        const hasReplies = channelData.messages.some(({ parent }) => parent === threadId);
+        if (!mainList.some(({ id }) => id === threadId) || !hasReplies) {
+          console.warn(
+            `  unread thread ${threadId} skipped: not a parent message with replies in ${channelData.id}`,
+          );
+          continue;
+        }
+        const unreadCount =
+          threads.find(({ parent_message_id }) => parent_message_id === threadId)
+            ?.unread_count ?? 0;
+        if (unreadCount === 1) continue;
+        // More than one unread reply: read the thread first, so only the latest one stays unread.
+        if (unreadCount > 1) await channel.markRead({ thread_id: threadId });
+        await channel.markUnread({ thread_id: threadId });
+        console.log(`  thread ${threadId} unread`);
+      }
+    }
+
+    // `pinnedForCurrentUser` and `archivedForCurrentUser` pin or archive the channel for the current
+    // user, for a recipe that shows pinned and archived channels; a channel without them is neither.
+    // Both live on the user's own membership, so they need the user to be a member. Each is changed
+    // only when the membership differs, so a re-run keeps the pin date a sorted list shows.
+    const membershipFlags = [
+      ['pinned', channelData.pinnedForCurrentUser, 'pinned_at', 'pin', 'unpin'],
+      [
+        'archived',
+        channelData.archivedForCurrentUser,
+        'archived_at',
+        'archive',
+        'unarchive',
+      ],
+    ];
+    // On a channel another cast member created, `channel` is that member's, so its membership
+    // isn't the current user's and is left alone, like the read state above.
+    const isOwnMember = channelData.members.includes(demoData.currentUserId);
+    for (const [label, wanted, dateField, setMethod, unsetMethod] of membershipFlags) {
+      if (creator !== owner) {
+        if (wanted) console.warn(`  ${label} skipped: ${channelData.id} has createdBy`);
+        continue;
+      }
+      const isSet = channel.state.membership?.[dateField] != null;
+      if (!!wanted === isSet) continue;
+      if (!isOwnMember) {
+        console.warn(
+          `  ${label} skipped: ${demoData.currentUserId} is not a member of ${channelData.id}`,
+        );
+        continue;
+      }
+      await channel[wanted ? setMethod : unsetMethod]();
+      console.log(`  ${wanted ? label : `not ${label}`} for ${demoData.currentUserId}`);
+    }
+
+    // `draftsForCurrentUser` lists the current user's unsent drafts in the channel, for a recipe
+    // that lists drafts: `{ text }` for the channel's own draft, with `parent` (a main-list message
+    // id) for a thread's draft, and `quotedMessage` (a message id) for a draft that quotes one.
+    // Drafts are per user, so they are saved as the current user, and only when the stored draft
+    // differs, so a re-run keeps the time a screenshot shows. A channel or thread without an entry
+    // keeps whatever draft it has. A refused draft is reported and skipped.
+    for (const draft of channelData.draftsForCurrentUser ?? []) {
+      const where = draft.parent ? `thread ${draft.parent}` : channelData.id;
+      if (creator !== owner || !isOwnMember) {
+        console.warn(`  draft in ${where} skipped: not the current user's own channel`);
+        continue;
+      }
+      const unknownId = [draft.parent, draft.quotedMessage].find(
+        (id) => id && !mainList.some((message) => message.id === id),
+      );
+      if (unknownId) {
+        console.warn(
+          `  draft in ${where} skipped: ${unknownId} is not a main-list message of ${channelData.id}`,
+        );
+        continue;
+      }
+      // A channel or thread without a draft answers with an error.
+      const stored = await channel
+        .getDraft({ parent_id: draft.parent })
+        .then(({ draft: found }) => found)
+        .catch(() => undefined);
+      const isSame =
+        stored?.message.text === draft.text &&
+        (stored.message.quoted_message_id ?? undefined) === draft.quotedMessage;
+      if (isSame) continue;
+      try {
+        await channel.createDraft({
+          message: {
+            text: draft.text,
+            ...(draft.parent && { parent_id: draft.parent }),
+            ...(draft.quotedMessage && { quoted_message_id: draft.quotedMessage }),
+          },
+        });
+        console.log(`  draft in ${where} saved`);
+      } catch (error) {
+        console.warn(`  draft in ${where} skipped: ${error.message}`);
+      }
+    }
+  }
+} finally {
+  for (const client of clients.values()) await client.disconnectUser();
+}
diff --git a/examples/cookbook/scripts/shots.mjs b/examples/cookbook/scripts/shots.mjs
new file mode 100644
index 0000000000..accae8fa8f
--- /dev/null
+++ b/examples/cookbook/scripts/shots.mjs
@@ -0,0 +1,157 @@
+/**
+ * Takes the screenshots every recipe's shots.json lists, from the running cookbook app, and writes
+ * them where the docs read them.
+ *
+ *   yarn workspace @stream-io/stream-chat-react-cookbook dev        # in another terminal
+ *   yarn workspace @stream-io/stream-chat-react-cookbook shots \
+ *     --out /path/to/getstream.io/content/docs/chat-sdk/react/v15-rc/_assets [--only headers/channel-header]
+ *
+ * A relative --out is resolved from the repository root.
+ *
+ * A shot in shots.json:
+ *   file      output file name (PNG)
+ *   recipe    recipe id, or "base" for the base app alone; defaults to the folder's recipe
+ *   variant   recipe variant (file name before .recipe.tsx); defaults to "default"
+ *   query     extra URL parameters, e.g. { "channel": "...", "thread": "..." }
+ *   viewport  { width, height }; defaults to the 1280×720 frame
+ *   waitFor   selector that must be visible before the shot (default: the message list)
+ *   hover     selector to hover first
+ *   clip      selector of the element to capture; omit for the whole frame
+ *   hasText   only the clip element containing this text
+ *   padding   pixels around the clip element (default 8)
+ *   settleMs  extra wait after everything is visible (default 800)
+ */
+import { readdir, readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { chromium } from '@playwright/test';
+
+const root = path.dirname(fileURLToPath(new URL('../package.json', import.meta.url)));
+const recipesDir = path.join(root, 'src/recipes');
+const args = process.argv.slice(2);
+// Accepts `--name value` and `--name=value`.
+const argValue = (name) => {
+  const inline = args.find((arg) => arg.startsWith(`${name}=`));
+  if (inline) return inline.slice(name.length + 1);
+  const index = args.indexOf(name);
+  return index === -1 ? undefined : args[index + 1];
+};
+
+// `yarn workspace … shots` runs in examples/cookbook, and Yarn reports no other starting folder,
+// so a relative --out is resolved from the repository root (PROJECT_CWD) for a predictable result.
+const outArg = argValue('--out');
+const outDir = outArg && path.resolve(process.env.PROJECT_CWD ?? process.cwd(), outArg);
+const only = argValue('--only');
+const baseUrl = argValue('--url') ?? 'http://localhost:5176';
+if (!outDir) {
+  console.error('Pass --out <directory>, e.g. the docs v15-rc/_assets folder.');
+  process.exit(1);
+}
+
+const findShotFiles = async () => {
+  const files = [];
+  for (const group of await readdir(recipesDir, { withFileTypes: true })) {
+    if (!group.isDirectory()) continue;
+    for (const recipe of await readdir(path.join(recipesDir, group.name), {
+      withFileTypes: true,
+    })) {
+      if (!recipe.isDirectory()) continue;
+      const id = `${group.name}/${recipe.name}`;
+      if (only && id !== only) continue;
+      const file = path.join(recipesDir, id, 'shots.json');
+      try {
+        files.push({ id, shots: JSON.parse(await readFile(file, 'utf8')) });
+      } catch (error) {
+        if (error.code !== 'ENOENT') throw error;
+      }
+    }
+  }
+  return files;
+};
+
+const shotFiles = await findShotFiles();
+if (!shotFiles.length) {
+  console.error(only ? `No recipe ${only} with a shots.json.` : 'No shots.json found.');
+  process.exit(1);
+}
+const seen = new Map();
+for (const { id, shots } of shotFiles) {
+  for (const { file } of shots) {
+    if (seen.has(file)) {
+      console.error(
+        `${file} is listed by both ${seen.get(file)} and ${id}; names must be unique.`,
+      );
+      process.exit(1);
+    }
+    seen.set(file, id);
+  }
+}
+
+const browser = await chromium.launch();
+let failures = 0;
+
+try {
+  for (const { id, shots } of shotFiles) {
+    for (const shot of shots) {
+      const viewport = shot.viewport ?? { height: 720, width: 1280 };
+      // A fixed locale and time zone, so dates in a shot don't depend on the machine taking it.
+      const page = await browser.newPage({
+        deviceScaleFactor: 1,
+        locale: 'en-US',
+        timezoneId: 'UTC',
+        viewport,
+      });
+      try {
+        const params = new URLSearchParams({
+          recipe: shot.recipe ?? id,
+          variant: shot.variant ?? 'default',
+          ...shot.query,
+        });
+        await page.goto(`${baseUrl}/?${params}`);
+        await page
+          .locator(shot.waitFor ?? '.str-chat__message-list')
+          .first()
+          .waitFor();
+        if (shot.hover) await page.locator(shot.hover).first().hover();
+        await page.waitForTimeout(shot.settleMs ?? 800);
+
+        const target = path.join(outDir, shot.file);
+        if (shot.clip) {
+          let locator = page.locator(shot.clip);
+          if (shot.hasText) locator = locator.filter({ hasText: shot.hasText });
+          const element = locator.first();
+          if (!(await element.count())) throw new Error(`nothing matches ${shot.clip}`);
+          await element.scrollIntoViewIfNeeded();
+          const box = await element.boundingBox();
+          if (!box || box.width <= 0 || box.height <= 0) {
+            throw new Error(`${shot.clip} isn't visible`);
+          }
+          const padding = shot.padding ?? 8;
+          const x = Math.max(0, box.x - padding);
+          const y = Math.max(0, box.y - padding);
+          await page.screenshot({
+            clip: {
+              height: Math.min(viewport.height, box.y + box.height + padding) - y,
+              width: Math.min(viewport.width, box.x + box.width + padding) - x,
+              x,
+              y,
+            },
+            path: target,
+          });
+        } else {
+          await page.screenshot({ path: target });
+        }
+        console.log(`✓ ${id}: ${shot.file}`);
+      } catch (error) {
+        failures++;
+        console.error(`✗ ${id}: ${shot.file}: ${error.message}`);
+      } finally {
+        await page.close();
+      }
+    }
+  }
+} finally {
+  await browser.close();
+}
+
+process.exit(failures ? 1 : 0);
diff --git a/examples/cookbook/src/base/BaseApp.tsx b/examples/cookbook/src/base/BaseApp.tsx
new file mode 100644
index 0000000000..935f8eecfb
--- /dev/null
+++ b/examples/cookbook/src/base/BaseApp.tsx
@@ -0,0 +1,143 @@
+import { Fragment, useEffect, useMemo } from 'react';
+import { ChannelPaginator } from 'stream-chat';
+import type { SortParamRequest } from 'stream-chat';
+import {
+  ChannelHeader,
+  ChannelNavigation,
+  Chat,
+  MessageComposer,
+  MessageList,
+  ThreadHeader,
+  useCreateChatClient,
+  useThreadContext,
+} from 'stream-chat-react';
+import {
+  ChannelSlot,
+  ChatView,
+  ThreadSlot,
+  useActiveThread,
+} from 'stream-chat-react/slot-layout';
+import type { LayoutDescriptor } from 'stream-chat-react/slot-layout';
+import { apiKey, channelFilters, currentUser, tokenProvider } from './client';
+import { OpenFromUrl } from './OpenFromUrl';
+import { makeReadOnly } from './readOnly';
+import type { RecipeConfig } from './recipe';
+import { createDemoSearchController } from './searchController';
+import { SIDE_PANEL_SLOT, SidePanel, SidePanelProvider } from './SidePanel';
+import { Simulate } from './Simulate';
+
+const sort: SortParamRequest[] = [{ direction: -1, field: 'last_message_at' }];
+
+// The channel, a thread opened from it, then the side panel recipes open their content in.
+const defaultLayouts: LayoutDescriptor[] = [
+  { id: 'channels', slots: ['channel', 'thread', SIDE_PANEL_SLOT] },
+];
+
+// The base layouts with the recipe's: one with the same id replaces the base one, a new id is added.
+const mergeLayouts = (base: LayoutDescriptor[], added: LayoutDescriptor[] = []) => [
+  ...base.map((layout) => added.find(({ id }) => id === layout.id) ?? layout),
+  ...added.filter(({ id }) => !base.some((layout) => layout.id === id)),
+];
+
+// Marks the open thread as on screen, so its new replies are marked read.
+const ActiveThread = () => {
+  const thread = useThreadContext();
+  useActiveThread({ activeThread: thread });
+  return null;
+};
+
+/**
+ * The app every recipe starts from: `Chat`, `ChatView` with the channel list, the open channel, a
+ * thread beside it and the side panel after them, in the SDK's default theme. A recipe changes it
+ * through `RecipeConfig`.
+ */
+export const BaseApp = ({ recipe }: { recipe: RecipeConfig }) => {
+  const client = useCreateChatClient({
+    apiKey,
+    tokenOrProvider: tokenProvider,
+    userData: currentUser,
+  });
+
+  // Nothing a visitor clicks in the cookbook changes the shared demo app.
+  useEffect(() => (client ? makeReadOnly(client) : undefined), [client]);
+
+  useEffect(() => {
+    if (!client || recipe.registerChannelPaginator === false) return;
+    const paginator = new ChannelPaginator({
+      client,
+      filters: channelFilters,
+      id: 'cookbook',
+      // Presence keeps members' online status current, which several recipes show.
+      requestOptions: { presence: true, state: true },
+      sort,
+    });
+    client.channelManager.insertPaginator({ paginator });
+    return () => {
+      client.channelManager.removePaginator(paginator);
+    };
+  }, [client, recipe]);
+
+  const chatProps = useMemo(
+    () =>
+      client
+        ? {
+            searchController: createDemoSearchController(client),
+            ...recipe.chatProps?.(client),
+          }
+        : {},
+    [client, recipe],
+  );
+
+  if (!client) return <div className='str-chat cookbook-status'>Connecting…</div>;
+
+  const RecipeChannelHeader = recipe.ChannelHeader ?? ChannelHeader;
+  const RecipeChannelNavigation = recipe.ChannelNavigation ?? ChannelNavigation;
+  const RecipeMessageList = recipe.MessageList ?? MessageList;
+  const Wrapper = recipe.Wrapper ?? Fragment;
+
+  const defaultChannelsView = (
+    <>
+      <RecipeChannelNavigation />
+      <ChannelSlot slot='channel'>
+        <RecipeChannelHeader />
+        <RecipeMessageList />
+        <MessageComposer />
+      </ChannelSlot>
+      <ThreadSlot slot='thread'>
+        <ActiveThread />
+        <ThreadHeader />
+        <RecipeMessageList />
+        <MessageComposer />
+      </ThreadSlot>
+      <SidePanel {...recipe.sidePanelProps} />
+    </>
+  );
+
+  return (
+    <div className='cookbook-frame'>
+      <Chat {...chatProps} client={client} theme={recipe.theme}>
+        <SidePanelProvider>
+          <Wrapper>
+            <ChatView
+              {...recipe.chatViewProps}
+              layouts={
+                recipe.chatViewProps?.layouts ??
+                mergeLayouts(defaultLayouts, recipe.layouts)
+              }
+              views={
+                recipe.chatViewProps?.views ?? {
+                  channels: defaultChannelsView,
+                  ...recipe.views,
+                }
+              }
+            >
+              {recipe.openFromUrl !== false && <OpenFromUrl />}
+              <Simulate />
+              {recipe.chatViewChildren}
+            </ChatView>
+          </Wrapper>
+        </SidePanelProvider>
+      </Chat>
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/base/OpenFromUrl.tsx b/examples/cookbook/src/base/OpenFromUrl.tsx
new file mode 100644
index 0000000000..55ba3b95ab
--- /dev/null
+++ b/examples/cookbook/src/base/OpenFromUrl.tsx
@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { useChatContext, useWorkspaceNavigation } from 'stream-chat-react';
+import { isDemoChannelId } from './client';
+
+/**
+ * `?channel=<id>` opens that channel, and `&thread=<parent message id>` also opens the thread
+ * beside it, so a screenshot can start from the exact state its recipe shows.
+ */
+export const OpenFromUrl = () => {
+  const { client } = useChatContext();
+  const { openChannel, openThread } = useWorkspaceNavigation();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const channelId = params.get('channel');
+    const threadParentId = params.get('thread');
+    if (!channelId) return;
+    if (!isDemoChannelId(channelId)) {
+      console.error(
+        `?channel=${channelId} isn't one of the cookbook's channels; not opening it.`,
+      );
+      return;
+    }
+
+    let cancelled = false;
+    void (async () => {
+      try {
+        const channel = await client.channel('messaging', channelId).watch();
+        if (cancelled) return;
+        openChannel(channel);
+        if (!threadParentId) return;
+
+        // The parent may be older than the first page the channel loaded.
+        if (!channel.messagePaginator.getItem(threadParentId)) {
+          await channel.messagePaginator.jumpToMessage(threadParentId, {
+            suppressFocusSignal: true,
+          });
+        }
+        const message = channel.messagePaginator.getItem(threadParentId);
+        if (cancelled) return;
+        if (message) openThread({ channel, message });
+        else
+          console.warn(
+            'No message %s in %s to open a thread from.',
+            threadParentId,
+            channelId,
+          );
+      } catch (error) {
+        // URL values go in as arguments, never into the format string.
+        console.error("Couldn't open %s from the URL", channelId, error);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+    // Runs once: the URL is read on load, and navigation afterwards is the user's.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return null;
+};
diff --git a/examples/cookbook/src/base/SidePanel.tsx b/examples/cookbook/src/base/SidePanel.tsx
new file mode 100644
index 0000000000..558deaff84
--- /dev/null
+++ b/examples/cookbook/src/base/SidePanel.tsx
@@ -0,0 +1,222 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { ComponentType, PropsWithChildren, ReactNode, RefObject } from 'react';
+import { Button, useComponentContextIcons } from 'stream-chat-react';
+import { useChatViewNavigation, useSlotEntity } from 'stream-chat-react/slot-layout';
+
+/** The side panel's slot in the channels layout, after the channel and the thread. */
+export const SIDE_PANEL_SLOT = 'sidePanel';
+
+/** What a recipe opens in the side panel. */
+export type SidePanelContent = {
+  /** Names what the panel shows, so a button can tell whether its own content is the open one. */
+  id: string;
+  /** The heading of the panel's title row, and the panel's name for assistive technology. */
+  title: string;
+  /**
+   * The body renders its own title row and close button, as the SDK's `ChannelDetail` does, so the
+   * panel leaves its own out and `title` only names it.
+   */
+  ownHeader?: boolean;
+  /** Everything under the title row. It reads its data itself, so it stays current. */
+  body: ReactNode;
+};
+
+type SidePanelState = {
+  content?: SidePanelContent;
+  /** The element that had focus when the panel opened, to give it back when the panel closes. */
+  openerRef: RefObject<HTMLElement | null>;
+  /** The panel's `aside` while it's on screen. */
+  panelRef: RefObject<HTMLElement | null>;
+  setContent: (content?: SidePanelContent) => void;
+};
+
+const SidePanelStateContext = createContext<SidePanelState>({
+  openerRef: { current: null },
+  panelRef: { current: null },
+  setContent: () => undefined,
+});
+
+/** Holds the content the side panel shows, for the buttons that open it and the panel to share. */
+export const SidePanelProvider = ({ children }: PropsWithChildren) => {
+  const [content, setContent] = useState<SidePanelContent>();
+  const openerRef = useRef<HTMLElement | null>(null);
+  const panelRef = useRef<HTMLElement | null>(null);
+  const value = useMemo(() => ({ content, openerRef, panelRef, setContent }), [content]);
+
+  return (
+    <SidePanelStateContext.Provider value={value}>
+      {children}
+    </SidePanelStateContext.Provider>
+  );
+};
+
+/** The `id` the panel gives a user's profile, so a button can tell whether that profile is open. */
+const userProfileId = (userId: string) => `user-profile:${userId}`;
+
+/**
+ * Where focus goes when the panel closes: the element that opened it, or, when that one is gone
+ * (an item of a menu that has closed, say), the open channel's composer.
+ */
+const focusTargetAfterClose = (opener: HTMLElement | null) =>
+  opener?.isConnected
+    ? opener
+    : document.querySelector<HTMLElement>(
+        '.str-chat__channel .str-chat__textarea textarea',
+      );
+
+/**
+ * Opens and closes the side panel. It shows one thing at a time: opening anything replaces what it
+ * showed. A user's profile is the SDK's `userProfile` kind, bound in the panel's slot; everything
+ * else is content held by `SidePanelProvider`. Use it inside `ChatView`.
+ *
+ * Opening remembers the element that had focus; closing from inside the panel gives focus back to
+ * it.
+ */
+export const useSidePanel = () => {
+  const { content, openerRef, panelRef, setContent } = useContext(SidePanelStateContext);
+  const { open, release } = useChatViewNavigation();
+  const profile = useSlotEntity({ kind: 'userProfile', slot: SIDE_PANEL_SLOT });
+
+  // Focus inside the panel means it moved there from the opener, which stays the one to go back to.
+  // Focus on the page itself, after a click on something that can't take focus, names no opener.
+  const rememberOpener = useCallback(() => {
+    const active = document.activeElement;
+    if (panelRef.current?.contains(active)) return;
+    openerRef.current =
+      active instanceof HTMLElement && active !== document.body ? active : null;
+  }, [openerRef, panelRef]);
+
+  /** Shows `next` in the side panel, in place of whatever it showed. */
+  const openSidePanel = useCallback(
+    (next: SidePanelContent) => {
+      rememberOpener();
+      // Empties the slot of any profile and every layer on it.
+      release(SIDE_PANEL_SLOT);
+      setContent(next);
+    },
+    [release, rememberOpener, setContent],
+  );
+
+  /** Shows the user's profile in the side panel, in place of whatever it showed. */
+  const openUserProfile = useCallback(
+    (userId: string) => {
+      rememberOpener();
+      setContent(undefined);
+      open(
+        { key: userId, kind: 'userProfile', source: { userId } },
+        { slot: SIDE_PANEL_SLOT },
+      );
+    },
+    [open, rememberOpener, setContent],
+  );
+
+  /**
+   * Empties the side panel. Focus that was inside it goes back to what opened it. Focus on the page
+   * body counts as inside too: some browsers leave it there after a click on a button, so a panel
+   * that closes on its own can move focus to the channel's composer.
+   */
+  const closeSidePanel = useCallback(() => {
+    const active = document.activeElement;
+    const hadFocus =
+      active === document.body || !!(active && panelRef.current?.contains(active));
+    release(SIDE_PANEL_SLOT);
+    setContent(undefined);
+    if (hadFocus) focusTargetAfterClose(openerRef.current)?.focus();
+    openerRef.current = null;
+  }, [openerRef, panelRef, release, setContent]);
+
+  /** The id of what the panel shows, or `undefined` while it's closed. */
+  const openId = content?.id ?? (profile ? userProfileId(profile.userId) : undefined);
+
+  return { closeSidePanel, openId, openSidePanel, openUserProfile };
+};
+
+export type SidePanelProps = {
+  /** Renders a user's profile under the title row. Without it, the panel never shows a profile. */
+  UserProfile?: ComponentType<{ userId: string }>;
+};
+
+/**
+ * The column at the far right of the channels view, after the channel and the thread, while it has
+ * something to show: a title row with a close button, then the body. Render it as the view's last
+ * child.
+ */
+export const SidePanel = ({ UserProfile }: SidePanelProps) => {
+  const { content } = useContext(SidePanelStateContext);
+  const profile = useSlotEntity({ kind: 'userProfile', slot: SIDE_PANEL_SLOT });
+
+  const shown: SidePanelContent | undefined =
+    content ??
+    (profile && UserProfile
+      ? {
+          body: <UserProfile userId={profile.userId} />,
+          id: userProfileId(profile.userId),
+          title: 'Profile',
+        }
+      : undefined);
+
+  if (!shown) return null;
+  // Keyed by what it shows, so other content starts afresh.
+  return <SidePanelFrame key={shown.id} {...shown} />;
+};
+
+/**
+ * The panel around one piece of content: an `aside` named by the title, the title row with its
+ * close button (left out when the body brings its own), then the body. It takes focus when it
+ * opens: the title, or the whole panel when the body has its own title row.
+ */
+const SidePanelFrame = ({ body, ownHeader, title }: SidePanelContent) => {
+  const { IconXmark } = useComponentContextIcons();
+  const { panelRef } = useContext(SidePanelStateContext);
+  const { closeSidePanel } = useSidePanel();
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const titleId = useId();
+
+  useEffect(() => {
+    (ownHeader ? panelRef.current : headingRef.current)?.focus();
+  }, [ownHeader, panelRef]);
+
+  return (
+    <aside
+      aria-label={ownHeader ? title : undefined}
+      aria-labelledby={ownHeader ? undefined : titleId}
+      className='cookbook-side-panel'
+      id='cookbook-side-panel'
+      ref={panelRef}
+      tabIndex={ownHeader ? -1 : undefined}
+    >
+      {!ownHeader && (
+        <header className='cookbook-side-panel__header'>
+          <h2
+            className='cookbook-side-panel__title'
+            id={titleId}
+            ref={headingRef}
+            tabIndex={-1}
+          >
+            {title}
+          </h2>
+          <Button
+            appearance='ghost'
+            aria-label={`Close ${title}`}
+            circular
+            onClick={closeSidePanel}
+            size='md'
+            variant='secondary'
+          >
+            <IconXmark />
+          </Button>
+        </header>
+      )}
+      <div className='cookbook-side-panel__body'>{body}</div>
+    </aside>
+  );
+};
diff --git a/examples/cookbook/src/base/Simulate.tsx b/examples/cookbook/src/base/Simulate.tsx
new file mode 100644
index 0000000000..34309d3193
--- /dev/null
+++ b/examples/cookbook/src/base/Simulate.tsx
@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { StreamChat } from 'stream-chat';
+import { apiKey, fetchToken, isDemoChannelId } from './client';
+
+/**
+ * `?simulate=typing&as=<user id>&channel=<id>` signs in a second user in the page and keeps them
+ * typing in the channel, for screenshots of typing indicators. A second client is needed because a
+ * user never sees their own typing.
+ */
+export const Simulate = () => {
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const userId = params.get('as');
+    const channelId = params.get('channel');
+    if (params.get('simulate') !== 'typing' || !userId || !isDemoChannelId(channelId))
+      return;
+
+    const other = new StreamChat(apiKey);
+    let cancelled = false;
+    let timer: ReturnType<typeof setInterval> | undefined;
+
+    void (async () => {
+      try {
+        await other.connectUser({ id: userId }, () => fetchToken(userId));
+        if (cancelled) return;
+        const channel = await other.channel('messaging', channelId).watch();
+        if (cancelled) return;
+        // `keystroke()` sends typing.start and is throttled by the SDK, so repeating it keeps
+        // the indicator up for as long as the page is open.
+        await channel.keystroke();
+        timer = setInterval(() => void channel.keystroke(), 2000);
+      } catch (error) {
+        console.error('Simulated typing failed', error);
+      }
+    })();
+
+    // Cleanup can run while the client is still connecting (StrictMode does that on purpose); the
+    // `cancelled` checks above stop the rest, and disconnecting here closes whatever was opened.
+    return () => {
+      cancelled = true;
+      if (timer) clearInterval(timer);
+      void other.disconnectUser();
+    };
+  }, []);
+
+  return null;
+};
diff --git a/examples/cookbook/src/base/base.css b/examples/cookbook/src/base/base.css
new file mode 100644
index 0000000000..2c60601edc
--- /dev/null
+++ b/examples/cookbook/src/base/base.css
@@ -0,0 +1,90 @@
+/*
+ * Layer order, first to last: a CSS reset, the SDK's stylesheet, the base app, then every recipe's
+ * CSS in `stream-overrides`. A recipe's rules win over both the SDK and the base app without extra
+ * specificity or !important. This is the setup the docs' Theming page teaches; recipes put all their
+ * CSS in `stream-overrides` and never add a layer of their own.
+ */
+@layer modern-normalize, stream, cookbook-base, stream-overrides;
+
+@import 'modern-normalize/modern-normalize.css' layer(modern-normalize);
+@import 'stream-chat-react/dist/css/index.css' layer(stream);
+@import 'stream-chat-react/dist/css/channel-detail.css' layer(stream);
+@import 'stream-chat-react/dist/css/ai-components.css' layer(stream);
+
+/* The base app: the Quick start's layout.css, in the 1280×720 frame screenshots are taken in. */
+@layer cookbook-base {
+  html,
+  body,
+  #root {
+    height: 100%;
+    margin: 0;
+  }
+
+  .str-chat {
+    --str-chat__channel-list-width: 320px;
+  }
+
+  .cookbook-frame {
+    height: 100%;
+  }
+
+  .cookbook-status {
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-body-default);
+    padding: var(--str-chat__spacing-xl);
+  }
+
+  /*
+   * The side panel (SidePanel.tsx) recipes open their content in: a 360px column after the channel
+   * and the thread, divided from them like the thread is.
+   */
+  .cookbook-side-panel {
+    display: flex;
+    flex: 0 0 360px;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    border-inline-start: 1px solid var(--str-chat__border-core-default);
+    background: var(--str-chat__background-core-elevation-1);
+    color: var(--str-chat__text-primary);
+  }
+
+  /* As tall as the channel and thread headers beside it. */
+  .cookbook-side-panel__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--str-chat__spacing-sm);
+    box-sizing: border-box;
+    height: var(--str-chat__channel-header-height);
+    padding: var(--str-chat__spacing-md);
+    border-block-end: 1px solid var(--str-chat__border-core-default);
+  }
+
+  .cookbook-side-panel__title {
+    margin: 0;
+    font: var(--str-chat__font-heading-sm);
+  }
+
+  /* The panel and its title take focus when it opens, only so reading starts there: no ring. */
+  .cookbook-side-panel:focus,
+  .cookbook-side-panel__title:focus {
+    outline: none;
+  }
+
+  /* The body scrolls on its own and sets no padding, so a body can fill it edge to edge. */
+  .cookbook-side-panel__body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  /* The heading of a section inside a panel's body. */
+  .cookbook-side-panel__section-title {
+    margin: 0 0 var(--str-chat__spacing-xs);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+}
diff --git a/examples/cookbook/src/base/client.ts b/examples/cookbook/src/base/client.ts
new file mode 100644
index 0000000000..a30c0fe5a8
--- /dev/null
+++ b/examples/cookbook/src/base/client.ts
@@ -0,0 +1,77 @@
+import type { ChannelFilters } from 'stream-chat';
+import demoData from './demo-data.json';
+
+/**
+ * The cookbook runs against Stream's public demo app. Its token endpoint signs a token for any
+ * user id, so the app needs no secret. Everything in that app is public: keep the content neutral.
+ */
+export const apiKey = demoData.apiKey;
+
+export const currentUser = demoData.users.find(
+  (user) => user.id === demoData.currentUserId,
+) as { id: string; name: string };
+
+type DemoChannel = { id: string };
+type DemoData = { channels?: DemoChannel[] };
+
+const channelIdsOf = (data: DemoData) =>
+  (data.channels ?? []).map((channel) => channel.id);
+
+// A recipe that needs data of its own keeps it in its folder's demo-data.json, in the same shape.
+// Keyed by recipe id (`<group>/<recipe>`).
+const recipeDemoData = Object.fromEntries(
+  Object.entries(
+    import.meta.glob<DemoData>('../recipes/*/*/demo-data.json', {
+      eager: true,
+      import: 'default',
+    }),
+  ).map(([path, data]) => [
+    path.replace(/^\.\.\/recipes\/|\/demo-data\.json$/g, ''),
+    data,
+  ]),
+);
+
+/** Every channel the cookbook owns: the base ones and every recipe's own. */
+export const demoChannelIds = [demoData, ...Object.values(recipeDemoData)].flatMap(
+  channelIdsOf,
+);
+
+/**
+ * The channels the open recipe shows in its lists and search: the base ones plus that recipe's
+ * own, so one recipe's channels never appear in another recipe's screenshots.
+ */
+export const visibleChannelIds = [
+  ...channelIdsOf(demoData),
+  ...channelIdsOf(
+    recipeDemoData[new URLSearchParams(window.location.search).get('recipe') ?? ''] ?? {},
+  ),
+];
+
+/**
+ * The base app's channel filters: only the open recipe's channels with the user in them, so other
+ * activity in the shared demo app never shows up. A recipe that registers its own paginators builds
+ * its filters on these.
+ */
+export const channelFilters: ChannelFilters = {
+  id: { $in: visibleChannelIds },
+  members: { $in: [currentUser.id] },
+  type: 'messaging',
+};
+
+export const fetchToken = async (userId: string): Promise<string> => {
+  const url = new URL('https://pronto.getstream.io/api/auth/create-token');
+  url.searchParams.set('environment', demoData.tokenEnvironment);
+  url.searchParams.set('user_id', userId);
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`Token request failed: ${response.status}`);
+  return ((await response.json()) as { token: string }).token;
+};
+
+export const tokenProvider = () => fetchToken(currentUser.id);
+
+/**
+ * `Channel.watch()` creates a channel that doesn't exist yet. Helpers that take a channel id from the
+ * URL open only the cookbook's own channels, so a typo never creates one in the shared demo app.
+ */
+export const isDemoChannelId = (id: string | null): id is string =>
+  !!id && demoChannelIds.includes(id);
diff --git a/examples/cookbook/src/base/demo-data.json b/examples/cookbook/src/base/demo-data.json
new file mode 100644
index 0000000000..af1a16ebb8
--- /dev/null
+++ b/examples/cookbook/src/base/demo-data.json
@@ -0,0 +1,173 @@
+{
+  "apiKey": "xzwhhgtazy6h",
+  "tokenEnvironment": "public-shared-chat-redesign",
+  "currentUserId": "docs-v15-ck-cleo",
+  "users": [
+    { "id": "docs-v15-ck-cleo", "name": "Cleo" },
+    { "id": "docs-v15-ck-bob", "name": "Bob" },
+    { "id": "docs-v15-ck-cara", "name": "Cara" },
+    { "id": "docs-v15-ck-dan", "name": "Dan" }
+  ],
+  "channels": [
+    {
+      "id": "docs-v15-cb-design",
+      "name": "Design review",
+      "members": [
+        "docs-v15-ck-cleo",
+        "docs-v15-ck-bob",
+        "docs-v15-ck-cara",
+        "docs-v15-ck-dan"
+      ],
+      "messages": [
+        {
+          "id": "docs-v15-ck-design-1",
+          "user": "docs-v15-ck-cara",
+          "text": "I shared the new icon set in the design folder."
+        },
+        {
+          "id": "docs-v15-ck-design-2",
+          "user": "docs-v15-ck-bob",
+          "text": "They look great. Can we use the rounded ones in the sidebar?"
+        },
+        {
+          "id": "docs-v15-ck-design-3",
+          "user": "docs-v15-ck-cleo",
+          "text": "Yes, the rounded set fits better with the avatars."
+        },
+        {
+          "id": "docs-v15-ck-design-4",
+          "user": "docs-v15-ck-dan",
+          "text": "Should the buttons follow the same style?"
+        },
+        {
+          "id": "docs-v15-ck-design-4-r1",
+          "user": "docs-v15-ck-cara",
+          "parent": "docs-v15-ck-design-4",
+          "text": "I think so, the corners should match."
+        },
+        {
+          "id": "docs-v15-ck-design-4-r2",
+          "user": "docs-v15-ck-cleo",
+          "parent": "docs-v15-ck-design-4",
+          "text": "Agreed, let us try a 12px radius."
+        },
+        {
+          "id": "docs-v15-ck-design-4-r3",
+          "user": "docs-v15-ck-bob",
+          "parent": "docs-v15-ck-design-4",
+          "text": "I can update the button component today."
+        },
+        {
+          "id": "docs-v15-ck-design-5",
+          "user": "docs-v15-ck-cara",
+          "text": "Review is on Thursday at 10:00, the agenda is in the doc.",
+          "pinnedBy": "docs-v15-ck-cara"
+        },
+        {
+          "id": "docs-v15-ck-design-6",
+          "user": "docs-v15-ck-cara",
+          "text": "I will send the updated mockups after lunch."
+        },
+        {
+          "id": "docs-v15-ck-design-7",
+          "user": "docs-v15-ck-bob",
+          "text": "Thanks Cara, looking forward to it!"
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-trip",
+      "name": "Weekend trip",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-bob", "docs-v15-ck-cara"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-trip-1",
+          "user": "docs-v15-ck-bob",
+          "text": "The cabin is booked for Saturday"
+        },
+        {
+          "id": "docs-v15-ck-trip-2",
+          "user": "docs-v15-ck-cara",
+          "text": "I will bring the board games"
+        },
+        {
+          "id": "docs-v15-ck-trip-3",
+          "user": "docs-v15-ck-cleo",
+          "text": "Perfect, I will bring snacks"
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-dm-bob",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-bob"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-dm-bob-1",
+          "user": "docs-v15-ck-cleo",
+          "text": "Lunch tomorrow?"
+        },
+        {
+          "id": "docs-v15-ck-dm-bob-2",
+          "user": "docs-v15-ck-bob",
+          "text": "Sure, see you at noon 🙂"
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-books",
+      "name": "Book club",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-cara", "docs-v15-ck-dan"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-books-1",
+          "user": "docs-v15-ck-dan",
+          "text": "Who has finished chapter five?"
+        },
+        {
+          "id": "docs-v15-ck-books-2",
+          "user": "docs-v15-ck-cara",
+          "text": "Great, the meeting is on Tuesday then."
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-garden",
+      "name": "Garden plot",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-dan"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-garden-1",
+          "user": "docs-v15-ck-dan",
+          "text": "The tomatoes need water this weekend."
+        },
+        {
+          "id": "docs-v15-ck-garden-2",
+          "user": "docs-v15-ck-cleo",
+          "text": "I will water them on Sunday morning."
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-general",
+      "name": "General",
+      "members": [
+        "docs-v15-ck-cleo",
+        "docs-v15-ck-bob",
+        "docs-v15-ck-cara",
+        "docs-v15-ck-dan"
+      ],
+      "messages": [
+        {
+          "id": "docs-v15-ck-general-1",
+          "user": "docs-v15-ck-dan",
+          "text": "Welcome to the team chat, everyone!"
+        },
+        {
+          "id": "docs-v15-ck-general-2",
+          "user": "docs-v15-ck-bob",
+          "text": "Thanks Dan, happy to be here."
+        }
+      ]
+    }
+  ]
+}
diff --git a/examples/cookbook/src/base/readOnly.ts b/examples/cookbook/src/base/readOnly.ts
new file mode 100644
index 0000000000..61cc0b8ab7
--- /dev/null
+++ b/examples/cookbook/src/base/readOnly.ts
@@ -0,0 +1,37 @@
+import type { StreamChat } from 'stream-chat';
+
+/**
+ * Requests the cookbook may send to the shared demo app: reads, watching, typing events and the
+ * user's own read state. Everything else (sending, editing, deleting, reacting, flagging, pinning,
+ * adding members, updating channels) would change data every screenshot depends on.
+ */
+const ALLOWED_WRITES = [
+  /\/chat\/channels$/, // queryChannels
+  /\/chat\/channels\/read$/,
+  /\/chat\/channels\/[^/]+\/[^/]+\/(query|event|read|unread|stop-watching)$/,
+  /\/chat\/channels\/[^/]+\/[^/]+\/bans\/query$/,
+  /\/chat\/(drafts|reminders|scheduled_messages)\/query$/,
+  /\/chat\/threads$/,
+  /\/polls\/query$/,
+];
+
+/**
+ * Makes the cookbook read-only against the demo app: a blocked request never settles, so the UI
+ * keeps its optimistic state (a reaction shows, a sent message stays "sending") and the server
+ * stays unchanged. `?writes=on` turns it off, for testing against an app of your own.
+ */
+export const makeReadOnly = (client: StreamChat) => {
+  if (new URLSearchParams(window.location.search).get('writes') === 'on')
+    return () => undefined;
+
+  const id = client.axiosInstance.interceptors.request.use((config) => {
+    const method = (config.method ?? 'get').toLowerCase();
+    const path = (config.url ?? '').split('?')[0];
+    if (method === 'get' || ALLOWED_WRITES.some((pattern) => pattern.test(path)))
+      return config;
+    console.info(`Cookbook is read-only: ${method.toUpperCase()} ${path} was not sent.`);
+    return new Promise<never>(() => undefined);
+  });
+
+  return () => client.axiosInstance.interceptors.request.eject(id);
+};
diff --git a/examples/cookbook/src/base/recipe.ts b/examples/cookbook/src/base/recipe.ts
new file mode 100644
index 0000000000..b2181abdf6
--- /dev/null
+++ b/examples/cookbook/src/base/recipe.ts
@@ -0,0 +1,100 @@
+import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
+import type { StreamChat } from 'stream-chat';
+import type { ChatProps } from 'stream-chat-react';
+import type { ChatViewProps, LayoutDescriptor } from 'stream-chat-react/slot-layout';
+import type { SidePanelProps } from './SidePanel';
+
+/**
+ * What one recipe variant changes in the base app. Each `*.recipe.tsx` file under `src/recipes/`
+ * default-exports one, and imports its own CSS, so only the selected recipe's styles load.
+ */
+export type RecipeConfig = {
+  /** Replaces the SDK's `ChannelHeader` in the channel panel. */
+  ChannelHeader?: ComponentType;
+  /**
+   * Replaces the SDK's `ChannelNavigation` in the base app's channels view. Ignored when
+   * `views.channels` or `chatViewProps.views` replaces the view.
+   */
+  ChannelNavigation?: ComponentType;
+  /**
+   * Extra props for `Chat`, built once per client, for example a `searchController`. The base app
+   * passes `client` and `theme` itself.
+   */
+  chatProps?: (client: StreamChat) => Partial<Omit<ChatProps, 'client' | 'theme'>>;
+  /** Rendered inside `ChatView`, beside the active view, for code that must outlive view switches. */
+  chatViewChildren?: ReactNode;
+  /**
+   * Props for `ChatView`: views, layouts, slot rules, navigation overrides, slot renderers. Each
+   * one replaces the base app's, so `chatViewProps.views` and `chatViewProps.layouts` win over
+   * `RecipeConfig.views` and `RecipeConfig.layouts`, which add to them.
+   */
+  chatViewProps?: Omit<ChatViewProps, 'children'>;
+  /**
+   * Layouts merged into the base app's by `id`: a new `id` adds a layout, and a base one's `id`
+   * (`channels`) replaces it. Each view in `RecipeConfig.views` needs its layout here.
+   */
+  layouts?: LayoutDescriptor[];
+  /**
+   * Replaces the SDK's `MessageList` in the base app's channels view: the channel's and the
+   * thread's alike, so both lists behave the same. Ignored when `views.channels` or
+   * `chatViewProps.views` replaces the view.
+   */
+  MessageList?: ComponentType;
+  /**
+   * `false` turns off the base app's `?channel=` / `?thread=` opener, for a recipe that reads the
+   * URL itself.
+   */
+  openFromUrl?: boolean;
+  /**
+   * Props for the base app's `SidePanel`, for example the `UserProfile` it renders a profile
+   * with. Ignored when `views.channels` or `chatViewProps.views` replaces the channels view.
+   */
+  sidePanelProps?: SidePanelProps;
+  /**
+   * `false` leaves out the base app's channel paginator, for a recipe that registers its own on
+   * `client.channelManager`, with `channelFilters` from `base/client` to show the same channels.
+   */
+  registerChannelPaginator?: boolean;
+  /** The `theme` passed to `Chat`, for example `str-chat__theme-dark`. */
+  theme?: string;
+  /**
+   * Views merged into the base app's by key: a new key adds a view beside the channels view, and
+   * `channels` replaces it. Each view needs a layout with the same `id` in `RecipeConfig.layouts`,
+   * and a way to switch to it, for example `ChatView.Selector` in `chatViewChildren`.
+   */
+  views?: ChatViewProps['views'];
+  /**
+   * Wraps `ChatView` inside `Chat` and `SidePanelProvider`, for example with `WithComponents`, so
+   * what it renders can open the side panel.
+   */
+  Wrapper?: ComponentType<PropsWithChildren>;
+};
+
+type RecipeModule = { default: RecipeConfig };
+
+// `src/recipes/<group>/<recipe>/<variant>.recipe.tsx` → id `<group>/<recipe>`, variant `<variant>`.
+const recipeModules = import.meta.glob<RecipeModule>('../recipes/*/*/*.recipe.tsx');
+
+const parseRecipePath = (path: string) => {
+  const match = path.match(/\.\.\/recipes\/([^/]+\/[^/]+)\/([^/]+)\.recipe\.tsx$/);
+  return match ? { id: match[1], variant: match[2] } : undefined;
+};
+
+export const listRecipes = () =>
+  Object.keys(recipeModules)
+    .map(parseRecipePath)
+    .filter((entry): entry is { id: string; variant: string } => !!entry)
+    .sort((a, b) => `${a.id}/${a.variant}`.localeCompare(`${b.id}/${b.variant}`));
+
+/** Loads `?recipe=<group>/<recipe>&variant=<variant>`; the variant defaults to `default`. */
+export const loadRecipe = async (
+  id: string,
+  variant = 'default',
+): Promise<RecipeConfig | undefined> => {
+  // `id` and `variant` come from the URL, so only the glob's own keys are looked up.
+  const path = `../recipes/${id}/${variant}.recipe.tsx`;
+  const load = Object.prototype.hasOwnProperty.call(recipeModules, path)
+    ? recipeModules[path]
+    : undefined;
+  return load ? (await load()).default : undefined;
+};
diff --git a/examples/cookbook/src/base/searchController.ts b/examples/cookbook/src/base/searchController.ts
new file mode 100644
index 0000000000..3274e7bbe2
--- /dev/null
+++ b/examples/cookbook/src/base/searchController.ts
@@ -0,0 +1,28 @@
+import {
+  ChannelSearchSource,
+  MessageSearchSource,
+  SearchController,
+  UserSearchSource,
+} from 'stream-chat';
+import type { StreamChat } from 'stream-chat';
+import { visibleChannelIds } from './client';
+import demoData from './demo-data.json';
+
+/**
+ * The default sources, kept to the cookbook's own channels and cast, so results from other data
+ * in the shared demo app never show up in a screenshot. The base app passes it to `Chat`; a recipe's
+ * `chatProps` can replace it.
+ */
+export const createDemoSearchController = (client: StreamChat) =>
+  new SearchController({
+    client,
+    sources: [
+      new ChannelSearchSource(client, { filters: { id: { $in: visibleChannelIds } } }),
+      new UserSearchSource(client, {
+        filters: { id: { $in: demoData.users.map((user) => user.id) } },
+      }),
+      new MessageSearchSource(client, {
+        messageSearchChannelFilters: { id: { $in: visibleChannelIds } },
+      }),
+    ],
+  });
diff --git a/examples/cookbook/src/base/useClickInTurn.ts b/examples/cookbook/src/base/useClickInTurn.ts
new file mode 100644
index 0000000000..5341735b4b
--- /dev/null
+++ b/examples/cookbook/src/base/useClickInTurn.ts
@@ -0,0 +1,43 @@
+import { useEffect } from 'react';
+
+/**
+ * One click of a screenshot helper: `find` returns the element to click, or nothing while it isn't
+ * on screen yet. `retry`, when given, runs while `find` finds nothing, to bring the element on
+ * screen, for example by opening the menu that holds it again.
+ */
+export type ClickStep = {
+  find: () => HTMLElement | null | undefined;
+  retry?: () => void;
+};
+
+/** The first element matching `selector` whose text includes `text`. */
+export const findByText = (selector: string, text: string) =>
+  [...document.querySelectorAll<HTMLElement>(selector)].find((element) =>
+    element.textContent?.includes(text),
+  );
+
+/**
+ * For screenshot helpers that open a recipe's UI from the URL, as a user would: clicks each step's
+ * element in turn, waiting for each one to appear first. It checks every 200 ms and stops after
+ * the last click, or when the component unmounts. An empty list clicks nothing. Pass the same
+ * array on every render, for example one built at module level from the URL, or the clicks start
+ * over.
+ */
+export const useClickInTurn = (steps: ClickStep[]) => {
+  useEffect(() => {
+    if (!steps.length) return;
+    let next = 0;
+    const timer = setInterval(() => {
+      const step = steps[next];
+      const target = step.find();
+      if (!target) {
+        step.retry?.();
+        return;
+      }
+      target.click();
+      next += 1;
+      if (next === steps.length) clearInterval(timer);
+    }, 200);
+    return () => clearInterval(timer);
+  }, [steps]);
+};
diff --git a/examples/cookbook/src/main.tsx b/examples/cookbook/src/main.tsx
new file mode 100644
index 0000000000..2e199dfad1
--- /dev/null
+++ b/examples/cookbook/src/main.tsx
@@ -0,0 +1,55 @@
+import { StrictMode } from 'react';
+import type { ReactNode } from 'react';
+import ReactDOM from 'react-dom/client';
+import { BaseApp } from './base/BaseApp';
+import { listRecipes, loadRecipe } from './base/recipe';
+import './base/base.css';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+const params = new URLSearchParams(window.location.search);
+const recipeId = params.get('recipe');
+
+// Screens outside the app carry `str-chat`, so the SDK's tokens resolve in them too.
+const Status = ({ children }: { children: ReactNode }) => (
+  <div className='str-chat cookbook-status'>{children}</div>
+);
+
+const RecipeIndex = () => (
+  <Status>
+    <ul>
+      {listRecipes().map(({ id, variant }) => (
+        <li key={`${id}/${variant}`}>
+          <a href={`?recipe=${id}&variant=${variant}`}>
+            {id} ({variant})
+          </a>
+        </li>
+      ))}
+    </ul>
+  </Status>
+);
+
+const start = async () => {
+  // No `?recipe=` shows the list of recipes; `?recipe=base` is the base app on its own.
+  if (!recipeId) return root.render(<RecipeIndex />);
+
+  const variant = params.get('variant') || 'default';
+  const recipe = recipeId === 'base' ? {} : await loadRecipe(recipeId, variant);
+  if (!recipe) {
+    return root.render(
+      <Status>
+        No recipe “{recipeId}” with a variant “{variant}”.
+      </Status>,
+    );
+  }
+
+  root.render(
+    <StrictMode>
+      <BaseApp recipe={recipe} />
+    </StrictMode>,
+  );
+};
+
+start().catch((error: unknown) => {
+  console.error(error);
+  root.render(<Status>The recipe failed to load: {String(error)}</Status>);
+});
diff --git a/examples/cookbook/src/recipes/ai/ai-chat-widget/App.tsx b/examples/cookbook/src/recipes/ai/ai-chat-widget/App.tsx
new file mode 100644
index 0000000000..2a67bd287e
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/ai-chat-widget/App.tsx
@@ -0,0 +1,35 @@
+import { Chat, useCreateChatClient } from 'stream-chat-react';
+import { AssistantWidget } from './AssistantWidget';
+import { isMessageAIGenerated } from './isMessageAIGenerated';
+
+const apiKey = 'YOUR_API_KEY';
+const userId = 'YOUR_USER_ID';
+const userToken = 'YOUR_USER_TOKEN';
+// The user's channel with the assistant, which your backend creates.
+const assistantChannelId = 'YOUR_ASSISTANT_CHANNEL_ID';
+
+/**
+ * An app that has no chat of its own, only the widget. Load the SDK's stylesheet in a CSS layer, as
+ * the base app's `chat.css` does, so the widget's CSS wins over it.
+ */
+export const App = () => {
+  const client = useCreateChatClient({
+    apiKey,
+    tokenOrProvider: userToken,
+    userData: { id: userId },
+  });
+
+  return (
+    <>
+      <main>{/* Your app's own pages. */}</main>
+      {client && (
+        <Chat client={client} isMessageAIGenerated={isMessageAIGenerated}>
+          {/* The SDK's tokens are set on `.str-chat`; without ChatView, the widget needs one. */}
+          <div className='str-chat'>
+            <AssistantWidget channelId={assistantChannelId} />
+          </div>
+        </Chat>
+      )}
+    </>
+  );
+};
diff --git a/examples/cookbook/src/recipes/ai/ai-chat-widget/AssistantWidget.css b/examples/cookbook/src/recipes/ai/ai-chat-widget/AssistantWidget.css
new file mode 100644
index 0000000000..fdc96e8ad4
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/ai-chat-widget/AssistantWidget.css
@@ -0,0 +1,64 @@
+@layer stream-overrides {
+  /*
+   * Pinned to the bottom right of the page, the window stacked above the launcher. 96px clears a
+   * composer along the bottom of the page, such as the base app's.
+   */
+  .cookbook-assistant-widget {
+    position: fixed;
+    z-index: 10;
+    inset-block-end: 96px;
+    inset-inline-end: var(--str-chat__spacing-lg);
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    gap: var(--str-chat__spacing-sm);
+  }
+
+  .cookbook-assistant-launcher {
+    box-shadow: var(--str-chat__box-shadow-3);
+  }
+
+  /* A compact card, never wider or taller than the page leaves room for. */
+  .cookbook-assistant-window {
+    display: flex;
+    flex-direction: column;
+    width: min(380px, calc(100vw - 2 * var(--str-chat__spacing-lg)));
+    height: min(520px, calc(100dvh - 200px));
+    overflow: hidden;
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-xl);
+    background: var(--str-chat__background-core-elevation-1);
+    box-shadow: var(--str-chat__box-shadow-3);
+    color: var(--str-chat__text-primary);
+  }
+
+  .cookbook-assistant-window__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--str-chat__spacing-sm);
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-sm)
+      var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+    border-block-end: 1px solid var(--str-chat__border-core-default);
+  }
+
+  .cookbook-assistant-window__title {
+    margin: 0;
+    font: var(--str-chat__font-heading-sm);
+  }
+
+  /* The channel fills the space under the header. */
+  .cookbook-assistant-window__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .cookbook-assistant-window__note {
+    margin: 0;
+    padding: var(--str-chat__spacing-md);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-body-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/ai/ai-chat-widget/AssistantWidget.tsx b/examples/cookbook/src/recipes/ai/ai-chat-widget/AssistantWidget.tsx
new file mode 100644
index 0000000000..db545200df
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/ai-chat-widget/AssistantWidget.tsx
@@ -0,0 +1,166 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import type { KeyboardEvent } from 'react';
+import type { Channel as StreamChannel } from 'stream-chat';
+import {
+  AIStateIndicator,
+  Button,
+  Channel,
+  LoadingIndicator,
+  MessageComposer,
+  MessageList,
+  useChatContext,
+  useComponentContextIcons,
+} from 'stream-chat-react';
+import './AssistantWidget.css';
+
+/**
+ * Watches the user's channel with the assistant the first time the window opens, and keeps it
+ * afterwards, until `channelId` names another channel. A user who never opens the window costs no
+ * request.
+ */
+const useAssistantChannel = (channelId: string, isOpen: boolean) => {
+  const { client } = useChatContext();
+  const [channel, setChannel] = useState<StreamChannel>();
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen || channel?.id === channelId) return;
+    let cancelled = false;
+    setFailed(false);
+    client
+      .channel('messaging', channelId)
+      .watch()
+      .then((watched) => !cancelled && setChannel(watched))
+      .catch(() => !cancelled && setFailed(true));
+    return () => {
+      cancelled = true;
+    };
+  }, [channel, channelId, client, isOpen]);
+
+  return { channel, failed };
+};
+
+/**
+ * A menu, picker or suggestion list inside the window is open, so Escape closes that first. Their
+ * toggles carry `aria-expanded="true"`, and the composer's textarea carries `aria-controls` while
+ * its suggestions show.
+ */
+const hasOpenPopup = (container: HTMLElement | null) =>
+  !!container?.querySelector('[aria-expanded="true"], textarea[aria-controls]');
+
+/**
+ * The Escape was pressed in the window or on the launcher, and nothing inside the window used it,
+ * as the composer does to leave a command. A modal opened from the window renders in a portal, but
+ * React still bubbles its keydown here, and that Escape closes only the modal.
+ */
+const isEscapeForWindow = (
+  event: KeyboardEvent,
+  container: HTMLElement | null,
+  launcher: HTMLElement | null,
+) => {
+  const target = event.target as Node;
+  return (
+    (!!container?.contains(target) || !!launcher?.contains(target)) &&
+    !event.defaultPrevented &&
+    !hasOpenPopup(container)
+  );
+};
+
+type AssistantWidgetProps = {
+  /** The id of the user's `messaging` channel with the assistant. */
+  channelId: string;
+  /** The window's heading, which also names it for assistive technology. */
+  title?: string;
+};
+
+/**
+ * A launcher button at the bottom right of the page that opens a small, non-modal chat window with
+ * the assistant. Escape or the close button closes it and gives focus back to the launcher.
+ */
+export const AssistantWidget = ({
+  channelId,
+  title = 'Assistant',
+}: AssistantWidgetProps) => {
+  const { IconMessageBubble, IconXmark } = useComponentContextIcons();
+  const [isOpen, setIsOpen] = useState(false);
+  const { channel, failed } = useAssistantChannel(channelId, isOpen);
+  const launcherRef = useRef<HTMLButtonElement>(null);
+  const windowRef = useRef<HTMLElement>(null);
+  const windowId = useId();
+  const titleId = useId();
+
+  const close = () => {
+    setIsOpen(false);
+    launcherRef.current?.focus();
+  };
+
+  const closeOnEscape = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape' || !isOpen) return;
+    // Escape inside the open widget is the widget's, so handlers on the page don't act on it too,
+    // such as the channel list's search, which focuses its input on any Escape.
+    event.stopPropagation();
+    if (!isEscapeForWindow(event, windowRef.current, launcherRef.current)) return;
+    event.preventDefault();
+    close();
+  };
+
+  return (
+    <div className='cookbook-assistant-widget' onKeyDown={closeOnEscape}>
+      <Button
+        appearance='solid'
+        aria-controls={isOpen ? windowId : undefined}
+        aria-expanded={isOpen}
+        aria-label={`Chat with ${title}`}
+        circular
+        className='cookbook-assistant-launcher'
+        onClick={() => (isOpen ? close() : setIsOpen(true))}
+        ref={launcherRef}
+        size='lg'
+        variant='primary'
+      >
+        {isOpen ? <IconXmark /> : <IconMessageBubble />}
+      </Button>
+      {isOpen && (
+        <section
+          aria-labelledby={titleId}
+          className='cookbook-assistant-window'
+          id={windowId}
+          ref={windowRef}
+          role='dialog'
+        >
+          <header className='cookbook-assistant-window__header'>
+            <h2 className='cookbook-assistant-window__title' id={titleId}>
+              {title}
+            </h2>
+            <Button
+              appearance='ghost'
+              aria-label={`Close ${title}`}
+              circular
+              onClick={close}
+              size='md'
+              variant='secondary'
+            >
+              <IconXmark />
+            </Button>
+          </header>
+          <div className='cookbook-assistant-window__body'>
+            {channel ? (
+              <Channel channel={channel}>
+                <MessageList />
+                <AIStateIndicator />
+                {/* Focus moves to the text input when the window opens. */}
+                <MessageComposer focus />
+              </Channel>
+            ) : failed ? (
+              <p className='cookbook-assistant-window__note' role='alert'>
+                Couldn’t open the conversation. Close the window and try again.
+              </p>
+            ) : (
+              <LoadingIndicator />
+            )}
+          </div>
+        </section>
+      )}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/ai/ai-chat-widget/ChannelsWithoutAssistant.tsx b/examples/cookbook/src/recipes/ai/ai-chat-widget/ChannelsWithoutAssistant.tsx
new file mode 100644
index 0000000000..1125ed27d1
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/ai-chat-widget/ChannelsWithoutAssistant.tsx
@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { ChannelPaginator } from 'stream-chat';
+import type { SortParamRequest } from 'stream-chat';
+import { useChatContext } from 'stream-chat-react';
+import { channelFilters, visibleChannelIds } from '../../../base/client';
+
+const sort: SortParamRequest[] = [{ direction: -1, field: 'last_message_at' }];
+
+/**
+ * Not part of the recipe: the base app's channel list without `channelId`, the assistant's channel,
+ * which only the widget opens. Registered in place of the base app's paginator.
+ */
+export const ChannelsWithoutAssistant = ({ channelId }: { channelId: string }) => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    const paginator = new ChannelPaginator({
+      client,
+      filters: {
+        ...channelFilters,
+        id: { $in: visibleChannelIds.filter((id) => id !== channelId) },
+      },
+      id: 'cookbook',
+      requestOptions: { presence: true, state: true },
+      sort,
+    });
+    client.channelManager.insertPaginator({ paginator });
+    return () => {
+      client.channelManager.removePaginator(paginator);
+    };
+  }, [channelId, client]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/ai/ai-chat-widget/OpenWidgetFromUrl.tsx b/examples/cookbook/src/recipes/ai/ai-chat-widget/OpenWidgetFromUrl.tsx
new file mode 100644
index 0000000000..45783fbf47
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/ai-chat-widget/OpenWidgetFromUrl.tsx
@@ -0,0 +1,18 @@
+import { useClickInTurn } from '../../../base/useClickInTurn';
+import type { ClickStep } from '../../../base/useClickInTurn';
+
+// `?widget=open` clicks the launcher, as the user would.
+const steps: ClickStep[] =
+  new URLSearchParams(window.location.search).get('widget') === 'open'
+    ? [
+        {
+          find: () => document.querySelector<HTMLElement>('.cookbook-assistant-launcher'),
+        },
+      ]
+    : [];
+
+/** For the screenshots only, not part of the recipe: opens the widget from the URL. */
+export const OpenWidgetFromUrl = () => {
+  useClickInTurn(steps);
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/ai/ai-chat-widget/default.recipe.tsx b/examples/cookbook/src/recipes/ai/ai-chat-widget/default.recipe.tsx
new file mode 100644
index 0000000000..ee2d451b6d
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/ai-chat-widget/default.recipe.tsx
@@ -0,0 +1,25 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { AssistantWidget } from './AssistantWidget';
+import { ChannelsWithoutAssistant } from './ChannelsWithoutAssistant';
+import { isMessageAIGenerated } from './isMessageAIGenerated';
+import { OpenWidgetFromUrl } from './OpenWidgetFromUrl';
+
+// The user's channel with the assistant, from this recipe's demo-data.json.
+const ASSISTANT_CHANNEL_ID = 'docs-v15-cb-widget-assistant';
+
+// A chat bubble at the bottom right of the base app that opens the user's channel with the
+// assistant. The channel list leaves that channel out. OpenWidgetFromUrl only serves the
+// screenshots.
+const recipe: RecipeConfig = {
+  chatProps: () => ({ isMessageAIGenerated }),
+  chatViewChildren: (
+    <>
+      <ChannelsWithoutAssistant channelId={ASSISTANT_CHANNEL_ID} />
+      <AssistantWidget channelId={ASSISTANT_CHANNEL_ID} />
+      <OpenWidgetFromUrl />
+    </>
+  ),
+  registerChannelPaginator: false,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/ai/ai-chat-widget/demo-data.json b/examples/cookbook/src/recipes/ai/ai-chat-widget/demo-data.json
new file mode 100644
index 0000000000..eab2234339
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/ai-chat-widget/demo-data.json
@@ -0,0 +1,33 @@
+{
+  "users": [{ "id": "docs-v15-ck-assistant", "name": "Assistant" }],
+  "channels": [
+    {
+      "id": "docs-v15-cb-widget-assistant",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-assistant"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-widget-assistant-1",
+          "user": "docs-v15-ck-cleo",
+          "text": "Can you suggest a few short novels for the book club?"
+        },
+        {
+          "id": "docs-v15-ck-widget-assistant-2",
+          "user": "docs-v15-ck-assistant",
+          "text": "Happy to help. Short novels work well for a monthly club: pick ones under 200 pages, so everyone finishes in time. Would you like a mystery, a classic or something light?",
+          "custom": { "ai_generated": true }
+        },
+        {
+          "id": "docs-v15-ck-widget-assistant-3",
+          "user": "docs-v15-ck-cleo",
+          "text": "Something light, please."
+        },
+        {
+          "id": "docs-v15-ck-widget-assistant-4",
+          "user": "docs-v15-ck-assistant",
+          "text": "Then look for a warm, funny story with a small cast, such as a road trip or a summer by the sea. They are quick to read and easy to talk about.",
+          "custom": { "ai_generated": true }
+        }
+      ]
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/ai/ai-chat-widget/isMessageAIGenerated.ts b/examples/cookbook/src/recipes/ai/ai-chat-widget/isMessageAIGenerated.ts
new file mode 100644
index 0000000000..848e5f81d1
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/ai-chat-widget/isMessageAIGenerated.ts
@@ -0,0 +1,13 @@
+import type { LocalMessage } from 'stream-chat';
+
+declare module 'stream-chat' {
+  // The field the backend sets on the assistant's replies. Optional, because every message in the
+  // app shares this interface.
+  interface CustomMessageData {
+    ai_generated?: boolean;
+  }
+}
+
+/** The assistant wrote the message: the backend marks its replies with `ai_generated`. */
+export const isMessageAIGenerated = (message: LocalMessage) =>
+  !!message.custom?.ai_generated;
diff --git a/examples/cookbook/src/recipes/ai/ai-chat-widget/shots.json b/examples/cookbook/src/recipes/ai/ai-chat-widget/shots.json
new file mode 100644
index 0000000000..24845c207b
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/ai-chat-widget/shots.json
@@ -0,0 +1,16 @@
+[
+  {
+    "file": "ai-chat-widget.png",
+    "query": { "channel": "docs-v15-cb-design", "widget": "open" },
+    "waitFor": ".cookbook-assistant-window [data-message-id=\"docs-v15-ck-widget-assistant-4\"]",
+    "settleMs": 1500
+  },
+  {
+    "file": "ai-chat-widget-launcher.png",
+    "query": { "channel": "docs-v15-cb-design" },
+    "waitFor": ".cookbook-assistant-launcher",
+    "clip": ".cookbook-assistant-widget",
+    "padding": 96,
+    "settleMs": 1500
+  }
+]
diff --git a/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/AssistantStatus.css b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/AssistantStatus.css
new file mode 100644
index 0000000000..20a44ab9c2
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/AssistantStatus.css
@@ -0,0 +1,52 @@
+@layer stream-overrides {
+  /* A quiet line under the last message: three pulsing dots and what the assistant is doing. */
+  .cookbook-assistant-status {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-assistant-status[data-ai-state='AI_STATE_ERROR'] {
+    color: var(--str-chat__accent-error);
+  }
+
+  .cookbook-assistant-status__dots {
+    display: flex;
+    gap: var(--str-chat__spacing-xxs);
+  }
+
+  .cookbook-assistant-status__dots span {
+    width: 6px;
+    height: 6px;
+    border-radius: var(--str-chat__radius-full);
+    background: var(--str-chat__accent-primary);
+    animation: cookbook-assistant-pulse 1.2s ease-in-out infinite;
+  }
+
+  .cookbook-assistant-status__dots span:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  .cookbook-assistant-status__dots span:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cookbook-assistant-status__dots span {
+      animation: none;
+    }
+  }
+
+  @keyframes cookbook-assistant-pulse {
+    0%,
+    100% {
+      opacity: 0.3;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+}
diff --git a/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/AssistantStatus.tsx b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/AssistantStatus.tsx
new file mode 100644
index 0000000000..48363d2312
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/AssistantStatus.tsx
@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { AIStates } from 'stream-chat';
+import type { AIState } from 'stream-chat';
+import {
+  TypingIndicator,
+  useAIState,
+  useChannel,
+  useThreadContext,
+} from 'stream-chat-react';
+import type { TypingIndicatorProps } from 'stream-chat-react';
+import { useAnswerAnnouncements } from './useAnswerAnnouncements';
+import './AssistantStatus.css';
+
+/** What the status line says in each state that shows it. */
+const labels: Partial<Record<AIState, string>> = {
+  [AIStates.Error]: 'Couldn’t finish the answer',
+  [AIStates.ExternalSources]: 'Checking sources…',
+  [AIStates.Generating]: 'Writing…',
+  [AIStates.Thinking]: 'Thinking…',
+};
+
+/**
+ * The assistant's state at the end of the channel's message list, where the answer appears, and
+ * the default typing indicator while the assistant is idle. Screen reader announcements come from
+ * `useAnswerAnnouncements()`, so the line itself isn't a live region.
+ */
+const ChannelAssistantStatus = (props: TypingIndicatorProps) => {
+  const { isMessageListScrolledToBottom = true, scrollToBottom } = props;
+  const channel = useChannel();
+  const { aiState } = useAIState(channel);
+  const label = labels[aiState];
+  useAnswerAnnouncements(aiState);
+
+  // Keeps the line in view when it appears, as the typing indicator does.
+  useEffect(() => {
+    if (label && isMessageListScrolledToBottom) scrollToBottom?.();
+  }, [isMessageListScrolledToBottom, label, scrollToBottom]);
+
+  if (!label) return <TypingIndicator {...props} />;
+
+  return (
+    <div className='cookbook-assistant-status' data-ai-state={aiState}>
+      {aiState !== AIStates.Error && (
+        <span aria-hidden='true' className='cookbook-assistant-status__dots'>
+          <span />
+          <span />
+          <span />
+        </span>
+      )}
+      {label}
+    </div>
+  );
+};
+
+/**
+ * Fills the `TypingIndicator` slot. The assistant answers in the channel, so a thread keeps the
+ * default typing indicator.
+ */
+export const AssistantStatus = (props: TypingIndicatorProps) => {
+  const thread = useThreadContext();
+  return thread ? <TypingIndicator {...props} /> : <ChannelAssistantStatus {...props} />;
+};
diff --git a/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/SimulateAnswer.tsx b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/SimulateAnswer.tsx
new file mode 100644
index 0000000000..c8e90ffc68
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/SimulateAnswer.tsx
@@ -0,0 +1,130 @@
+import { useEffect } from 'react';
+import { AIStates, msToNs, nsToMs } from 'stream-chat';
+import type { Channel, Event, LocalMessage, MessagePaginatorState } from 'stream-chat';
+import { useChatContext } from 'stream-chat-react';
+import { isDemoChannelId } from '../../../base/client';
+
+const params = new URLSearchParams(window.location.search);
+const phases = ['thinking', 'streaming', 'done'] as const;
+type Phase = (typeof phases)[number];
+const requestedPhase = params.get('phase') as Phase | null;
+const runs = params.get('simulate') === 'answer';
+const channelId = params.get('channel');
+
+const ASSISTANT_ID = 'docs-v15-ck-assistant';
+const QUESTION_ID = 'docs-v15-ck-garden-assistant-3';
+// Exists only in the page: the demo app never stores it.
+const ANSWER_ID = 'docs-v15-ck-garden-assistant-answer';
+const ANSWER = [
+  'Good picks for a first season with six hours of sun:',
+  '',
+  '- **Lettuce** grows fast, and you can pick the leaves as you need them.',
+  '- **Bush beans** need no support and crop for weeks.',
+  '- **Zucchini** gives plenty from one or two plants.',
+  '- **Radishes** are ready in about a month.',
+  '',
+  'Water in the morning, and mulch the beds to keep the soil moist.',
+].join('\n');
+// The streaming phase stops here, about halfway through the answer.
+const STREAMING_STOP = ANSWER.indexOf('- **Zucchini**');
+
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/** The question the simulation answers is loaded in the channel's message list. */
+const hasQuestion = ({ items }: MessagePaginatorState) =>
+  !!items?.some(({ id }) => id === QUESTION_ID);
+
+/**
+ * For the screenshots: `?simulate=answer&channel=<id>&phase=thinking|streaming|done` plays, in
+ * the page only, the events a backend sends while the assistant answers the channel's last
+ * question, and stops at the phase: the assistant thinking, the answer half written, or the answer
+ * finished. Without `phase`, it plays to the end. When it stops, it sets
+ * `data-simulated-answer` on the root element, for the screenshot to wait for.
+ */
+export const SimulateAnswer = () => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    if (!runs || !isDemoChannelId(channelId)) return;
+    const channel: Channel = client.channel('messaging', channelId);
+    const lastPhase = phases.indexOf(requestedPhase ?? 'done');
+    let cancelled = false;
+
+    const dispatch = (event: Record<string, unknown>) => {
+      if (cancelled) return;
+      client.dispatchEvent({
+        channel_id: channel.id,
+        channel_type: channel.type,
+        cid: channel.cid,
+        created_at: msToNs(Date.now()),
+        custom: {},
+        ...event,
+      } as unknown as Event);
+    };
+
+    const answerWith = (question: LocalMessage, text: string) => ({
+      ...question,
+      created_at: msToNs(nsToMs(question.created_at) + 60_000),
+      custom: { ai_generated: true },
+      html: '',
+      id: ANSWER_ID,
+      text,
+      updated_at: msToNs(Date.now()),
+      // The assistant as the channel's earlier answer has it, so the answer shows its avatar.
+      user: channel.messagePaginator.state
+        .getLatestValue()
+        .items?.find(({ user }) => user?.id === ASSISTANT_ID)?.user,
+      user_id: ASSISTANT_ID,
+    });
+
+    const play = async (question: LocalMessage) => {
+      // The backend posts the empty answer first, then says it's thinking about it.
+      dispatch({ message: answerWith(question, ''), type: 'message.new' });
+      dispatch({
+        ai_state: AIStates.Thinking,
+        message_id: ANSWER_ID,
+        type: 'ai_indicator.update',
+      });
+      if (lastPhase === 0) return;
+
+      await wait(800);
+      dispatch({
+        ai_state: AIStates.Generating,
+        message_id: ANSWER_ID,
+        type: 'ai_indicator.update',
+      });
+      const end = lastPhase === 1 ? STREAMING_STOP : ANSWER.length;
+      for (let length = 40; length < end; length += 40) {
+        await wait(250);
+        const text = ANSWER.slice(0, length);
+        dispatch({ message: answerWith(question, text), type: 'message.updated' });
+      }
+      await wait(250);
+      const text = ANSWER.slice(0, end);
+      dispatch({ message: answerWith(question, text), type: 'message.updated' });
+      if (lastPhase === 1) return;
+
+      dispatch({ type: 'ai_indicator.clear' });
+    };
+
+    const finish = () => {
+      if (!cancelled) document.documentElement.dataset.simulatedAnswer = 'true';
+    };
+
+    // Plays once, as soon as the question is loaded.
+    let started = false;
+    const unsubscribe = channel.messagePaginator.state.subscribe((state) => {
+      if (started || !hasQuestion(state)) return;
+      started = true;
+      const question = state.items?.find(({ id }) => id === QUESTION_ID);
+      if (question) void play(question).then(finish);
+    });
+
+    return () => {
+      cancelled = true;
+      unsubscribe();
+    };
+  }, [client]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/StopButton.css b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/StopButton.css
new file mode 100644
index 0000000000..57ab0549d3
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/StopButton.css
@@ -0,0 +1,19 @@
+@layer stream-overrides {
+  /* The size of the send button's icon, so the button keeps its size when it swaps in. */
+  .cookbook-stop-button__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--str-chat__icon-size-md);
+    height: var(--str-chat__icon-size-md);
+  }
+
+  /* A filled square, the usual sign for stop, in the button's text color. */
+  .cookbook-stop-button__icon::before {
+    content: '';
+    width: 10px;
+    height: 10px;
+    border-radius: var(--str-chat__radius-xxs);
+    background: currentColor;
+  }
+}
diff --git a/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/StopButton.tsx b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/StopButton.tsx
new file mode 100644
index 0000000000..47123002ce
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/StopButton.tsx
@@ -0,0 +1,33 @@
+import type { ComponentProps, MouseEvent } from 'react';
+import { Button, useMessageComposerContext } from 'stream-chat-react';
+import './StopButton.css';
+
+/**
+ * Fills the composer's `StopAIGenerationButton` slot, which shows in place of the send button
+ * while the assistant answers. It gets a button's props, and its `onClick` calls
+ * `Channel.stopAIResponse()`. The button goes away once the answer stops, so the focus moves to
+ * the text field, where the user writes the next question.
+ */
+export const StopButton = ({ onClick }: ComponentProps<'button'>) => {
+  const { textareaRef } = useMessageComposerContext();
+
+  const stop = (event: MouseEvent<HTMLButtonElement>) => {
+    onClick?.(event);
+    textareaRef.current?.focus();
+  };
+
+  return (
+    <Button
+      appearance='solid'
+      aria-label='Stop the answer'
+      circular
+      className='cookbook-stop-button'
+      onClick={stop}
+      size='sm'
+      type='button'
+      variant='primary'
+    >
+      <span aria-hidden='true' className='cookbook-stop-button__icon' />
+    </Button>
+  );
+};
diff --git a/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/WithStreamedAnswers.tsx b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/WithStreamedAnswers.tsx
new file mode 100644
index 0000000000..00b4e9c112
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/WithStreamedAnswers.tsx
@@ -0,0 +1,19 @@
+import type { PropsWithChildren } from 'react';
+import { WithComponents } from 'stream-chat-react';
+import { AssistantStatus } from './AssistantStatus';
+import { StopButton } from './StopButton';
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = {
+  StopAIGenerationButton: StopButton,
+  TypingIndicator: AssistantStatus,
+};
+
+/**
+ * The assistant's state at the end of the message list, and a Stop button in place of the send
+ * button while it answers. `StreamedMessageText` needs no override: `MessageUI` renders it for
+ * every message `Chat`'s `isMessageAIGenerated` returns `true` for.
+ */
+export const WithStreamedAnswers = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/default.recipe.tsx b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/default.recipe.tsx
new file mode 100644
index 0000000000..2648863990
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/default.recipe.tsx
@@ -0,0 +1,22 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { isMessageAIGenerated } from './isMessageAIGenerated';
+import { SimulateAnswer } from './SimulateAnswer';
+import { WithStreamedAnswers } from './WithStreamedAnswers';
+
+// "Streamed answers with a stop button": the assistant's replies type out as they stream, its state
+// shows at the end of the message list, and a Stop button replaces the send button while it
+// answers. SimulateAnswer only serves the screenshots.
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithStreamedAnswers>
+    <SimulateAnswer />
+    {children}
+  </WithStreamedAnswers>
+);
+
+const recipe: RecipeConfig = {
+  chatProps: () => ({ isMessageAIGenerated }),
+  Wrapper,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/demo-data.json b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/demo-data.json
new file mode 100644
index 0000000000..f1332cfa3d
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/demo-data.json
@@ -0,0 +1,27 @@
+{
+  "users": [{ "id": "docs-v15-ck-assistant", "name": "Assistant" }],
+  "channels": [
+    {
+      "id": "docs-v15-cb-garden-assistant",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-assistant"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-garden-assistant-1",
+          "user": "docs-v15-ck-cleo",
+          "text": "Hi! Can you help me plan my garden plot?"
+        },
+        {
+          "id": "docs-v15-ck-garden-assistant-2",
+          "user": "docs-v15-ck-assistant",
+          "text": "Of course. Tell me what you'd like to grow and how much sun the plot gets.",
+          "custom": { "ai_generated": true }
+        },
+        {
+          "id": "docs-v15-ck-garden-assistant-3",
+          "user": "docs-v15-ck-cleo",
+          "text": "It gets about six hours of sun. Which vegetables are easy for a first season?"
+        }
+      ]
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/isMessageAIGenerated.ts b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/isMessageAIGenerated.ts
new file mode 100644
index 0000000000..848e5f81d1
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/isMessageAIGenerated.ts
@@ -0,0 +1,13 @@
+import type { LocalMessage } from 'stream-chat';
+
+declare module 'stream-chat' {
+  // The field the backend sets on the assistant's replies. Optional, because every message in the
+  // app shares this interface.
+  interface CustomMessageData {
+    ai_generated?: boolean;
+  }
+}
+
+/** The assistant wrote the message: the backend marks its replies with `ai_generated`. */
+export const isMessageAIGenerated = (message: LocalMessage) =>
+  !!message.custom?.ai_generated;
diff --git a/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/shots.json b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/shots.json
new file mode 100644
index 0000000000..3aa21ce0eb
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/shots.json
@@ -0,0 +1,41 @@
+[
+  {
+    "file": "streamed-answer-thinking.png",
+    "query": {
+      "channel": "docs-v15-cb-garden-assistant",
+      "simulate": "answer",
+      "phase": "thinking"
+    },
+    "waitFor": ".cookbook-assistant-status",
+    "clip": ".str-chat__channel",
+    "padding": 0,
+    "settleMs": 1500,
+    "viewport": { "width": 1280, "height": 760 }
+  },
+  {
+    "file": "streamed-answer-streaming.png",
+    "query": {
+      "channel": "docs-v15-cb-garden-assistant",
+      "simulate": "answer",
+      "phase": "streaming"
+    },
+    "waitFor": "html[data-simulated-answer] .cookbook-stop-button",
+    "clip": ".str-chat__channel",
+    "padding": 0,
+    "settleMs": 2500,
+    "viewport": { "width": 1280, "height": 760 }
+  },
+  {
+    "file": "streamed-answer-done.png",
+    "query": {
+      "channel": "docs-v15-cb-garden-assistant",
+      "simulate": "answer",
+      "phase": "done"
+    },
+    "waitFor": "html[data-simulated-answer] .str-chat__message-composer",
+    "clip": ".str-chat__channel",
+    "padding": 0,
+    "settleMs": 6000,
+    "viewport": { "width": 1280, "height": 760 }
+  }
+]
diff --git a/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/useAnswerAnnouncements.ts b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/useAnswerAnnouncements.ts
new file mode 100644
index 0000000000..cd73c243d8
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/streamed-answers-with-stop-button/useAnswerAnnouncements.ts
@@ -0,0 +1,42 @@
+import { useEffect, useRef } from 'react';
+import { AIStates } from 'stream-chat';
+import type { AIState } from 'stream-chat';
+import { useAriaLiveAnnouncer } from 'stream-chat-react';
+
+/** The assistant is working on an answer: thinking, checking sources or writing it. */
+const isAnswering = (aiState: AIState) =>
+  aiState === AIStates.Thinking ||
+  aiState === AIStates.ExternalSources ||
+  aiState === AIStates.Generating;
+
+/** What to say when an answer ends in each state that isn't answering. */
+const endings: Partial<Record<AIState, string>> = {
+  [AIStates.Error]: 'The assistant couldn’t finish the answer',
+  [AIStates.Idle]: 'The assistant finished answering',
+  [AIStates.Stop]: 'Answer stopped',
+};
+
+/**
+ * Tells a screen reader how the assistant's answer goes, without reading every streamed word:
+ * that it started, and that it finished, stopped or failed. The finished answer is then one
+ * message the user reads like any other. Each change is announced once: a repeated state, such as
+ * StrictMode running the effect twice, says nothing, and an ending is announced only after an
+ * answer, so mounting on an earlier error stays quiet.
+ */
+export const useAnswerAnnouncements = (aiState: AIState) => {
+  const announce = useAriaLiveAnnouncer();
+  // Starts idle, so opening the channel mid-answer announces it too.
+  const previousState = useRef<AIState>(AIStates.Idle);
+
+  useEffect(() => {
+    if (previousState.current === aiState) return;
+    const wasAnswering = isAnswering(previousState.current);
+    previousState.current = aiState;
+
+    if (isAnswering(aiState)) {
+      if (!wasAnswering) announce('The assistant is answering');
+    } else if (wasAnswering && endings[aiState]) {
+      announce(endings[aiState]);
+    }
+  }, [aiState, announce]);
+};
diff --git a/examples/cookbook/src/recipes/ai/voice-agent-visuals/SimulateVoice.tsx b/examples/cookbook/src/recipes/ai/voice-agent-visuals/SimulateVoice.tsx
new file mode 100644
index 0000000000..b8d2134d0d
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/voice-agent-visuals/SimulateVoice.tsx
@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import type { VoiceAgentState } from 'stream-chat-react/ai-components';
+import demoData from './demo-data.json';
+import type { VoiceSession } from './VoiceSession';
+import { VoiceSessionProvider } from './VoiceSession';
+
+const params = new URLSearchParams(window.location.search);
+const STATES: VoiceAgentState[] = [
+  'idle',
+  'connecting',
+  'listening',
+  'thinking',
+  'speaking',
+];
+
+/** `?state=` names one of the states the visuals take. */
+const isVoiceAgentState = (value: string | null): value is VoiceAgentState =>
+  STATES.includes(value as VoiceAgentState);
+
+const requestedState = params.get('state');
+const state: VoiceAgentState = isVoiceAgentState(requestedState)
+  ? requestedState
+  : 'speaking';
+const freezeAfterFrames = Number(params.get('frames')) || undefined;
+
+const channel = demoData.channels[0];
+const reply = channel.messages[channel.messages.length - 1];
+// The user has heard the reply's first sentence.
+const heardChars = reply.text.indexOf('Drink');
+
+// The time the levels are computed from: the fixed clock's while it runs, else the page's own.
+let clockMs = 0;
+const now = () => (freezeAfterFrames ? clockMs : performance.now());
+
+/** A level that rises and falls like syllables, the same at the same time on every run. */
+const speechLevel = () => {
+  const t = now() / 1000;
+  return 0.2 + 0.4 * Math.abs(Math.sin(t * 7.3)) * (0.6 + 0.4 * Math.sin(t * 1.9));
+};
+
+/** Both visuals have drawn their first frame. */
+const visualsHaveStarted = () =>
+  document.querySelectorAll('.cookbook-voice-panel [data-ready="true"]').length === 2;
+
+/**
+ * Replaces `requestAnimationFrame` with a clock that moves exactly 1/60 s a frame. Once the
+ * visuals have started, it moves `frames` more times and then stops, so the visuals stay on the
+ * same frame for the screenshot, and sets `data-simulated-voice` on the root element. Callbacks
+ * keep running at the stopped time, so the rest of the page still renders.
+ */
+const runFixedClock = (frames: number) => {
+  let callbacks = new Map<number, FrameRequestCallback>();
+  let lastId = 0;
+  let flushes = 0;
+  let startedAt: number | undefined;
+
+  window.requestAnimationFrame = (callback) => {
+    callbacks.set(++lastId, callback);
+    return lastId;
+  };
+  window.cancelAnimationFrame = (id) => {
+    callbacks.delete(id);
+  };
+
+  const flush = () => {
+    flushes++;
+    if (startedAt === undefined && visualsHaveStarted()) startedAt = flushes;
+    if (startedAt === undefined || flushes - startedAt < frames) clockMs += 1000 / 60;
+    else document.documentElement.dataset.simulatedVoice = 'true';
+    const due = callbacks;
+    callbacks = new Map();
+    due.forEach((callback) => callback(clockMs));
+    setTimeout(flush, 16);
+  };
+  setTimeout(flush, 16);
+};
+
+if (freezeAfterFrames) runFixedClock(freezeAfterFrames);
+
+/**
+ * Not part of the recipe: stands in for a voice backend, which the demo app doesn't have. It
+ * provides a voice session in the recipe's channel, in the state `?state=` names (speaking by
+ * default), with levels that move like speech and the reply's first sentence heard.
+ * `?frames=<n>` stops the visuals `n` frames after they start, for the screenshots.
+ */
+export const SimulateVoice = ({ children }: PropsWithChildren) => {
+  const [ended, setEnded] = useState(false);
+
+  const [session] = useState<VoiceSession>(() => ({
+    agentLevel: speechLevel,
+    channelId: channel.id,
+    end: () => setEnded(true),
+    micLevel: speechLevel,
+    reply:
+      state === 'speaking'
+        ? {
+            generating: false,
+            heard: () => ({ chars: heardChars, done: false }),
+            messageId: reply.id,
+          }
+        : undefined,
+    state,
+  }));
+
+  return (
+    <VoiceSessionProvider value={ended ? undefined : session}>
+      {children}
+    </VoiceSessionProvider>
+  );
+};
diff --git a/examples/cookbook/src/recipes/ai/voice-agent-visuals/SpokenMessageText.tsx b/examples/cookbook/src/recipes/ai/voice-agent-visuals/SpokenMessageText.tsx
new file mode 100644
index 0000000000..153e61deb4
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/voice-agent-visuals/SpokenMessageText.tsx
@@ -0,0 +1,44 @@
+import type { LocalMessage } from 'stream-chat';
+import { MessageText, StreamedMessageText, useMessageContext } from 'stream-chat-react';
+import type { StreamedMessageTextProps } from 'stream-chat-react';
+import { useHeardText } from 'stream-chat-react/ai-components';
+import { useVoiceSession } from './VoiceSession';
+import type { VoiceSession } from './VoiceSession';
+
+type Reply = NonNullable<VoiceSession['reply']>;
+
+/** The assistant is speaking this message right now. */
+const isSpokenNow = (
+  reply: VoiceSession['reply'],
+  message: LocalMessage,
+): reply is Reply => reply?.messageId === message.id;
+
+/** The reply's text, revealed as far as the user has heard it. */
+const HeardText = ({
+  message,
+  renderText,
+  reply,
+}: StreamedMessageTextProps & { message: LocalMessage; reply: Reply }) => {
+  const { heardText } = useHeardText({
+    generating: reply.generating,
+    heard: reply.heard,
+    text: message.text ?? '',
+  });
+  return (
+    <MessageText message={{ ...message, text: heardText }} renderText={renderText} />
+  );
+};
+
+/**
+ * Fills the `StreamedMessageText` slot, which `MessageUI` renders for the assistant's replies.
+ * The model writes a reply far ahead of the voice that speaks it, so the reply being spoken shows
+ * only what the user has heard. Every other reply streams in as usual.
+ */
+export const SpokenMessageText = (props: StreamedMessageTextProps) => {
+  const { message: messageFromContext } = useMessageContext();
+  const message = props.message ?? messageFromContext;
+  const reply = useVoiceSession()?.reply;
+
+  if (!isSpokenNow(reply, message)) return <StreamedMessageText {...props} />;
+  return <HeardText {...props} message={message} reply={reply} />;
+};
diff --git a/examples/cookbook/src/recipes/ai/voice-agent-visuals/VoiceAgentPanel.css b/examples/cookbook/src/recipes/ai/voice-agent-visuals/VoiceAgentPanel.css
new file mode 100644
index 0000000000..172fe8a1c2
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/voice-agent-visuals/VoiceAgentPanel.css
@@ -0,0 +1,52 @@
+@layer stream-overrides {
+  /* A strip under the channel header: the glow, the status, the microphone's wave and End. */
+  .cookbook-voice-panel {
+    /* What the glow and the wave sit on, so they pick their light or dark look from it. */
+    --str-chat__ai-voice-backdrop: var(--str-chat__background-core-surface-subtle);
+
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-md);
+    padding-inline-end: var(--str-chat__spacing-lg);
+    border-block-end: 1px solid var(--str-chat__border-core-default);
+    background: var(--str-chat__background-core-surface-subtle);
+  }
+
+  /*
+   * Both draw in the middle of their box: the glow's globe about half as wide as the box, the
+   * wave's string about 84% as wide as its shorter side.
+   */
+  .cookbook-voice-panel__glow,
+  .cookbook-voice-panel__wave {
+    flex: none;
+    width: 128px;
+    height: 128px;
+  }
+
+  .cookbook-voice-panel__text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .cookbook-voice-panel__name {
+    margin: 0;
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-voice-panel__status {
+    margin: 0;
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-heading-sm);
+  }
+
+  /* Read by screen readers only: the panel shows the state on screen. */
+  .cookbook-voice-announcement {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
diff --git a/examples/cookbook/src/recipes/ai/voice-agent-visuals/VoiceAgentPanel.tsx b/examples/cookbook/src/recipes/ai/voice-agent-visuals/VoiceAgentPanel.tsx
new file mode 100644
index 0000000000..2a2973349a
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/voice-agent-visuals/VoiceAgentPanel.tsx
@@ -0,0 +1,74 @@
+import { useId } from 'react';
+import type { MouseEvent } from 'react';
+import { Button } from 'stream-chat-react';
+import { VoiceGlow, VoiceWave } from 'stream-chat-react/ai-components';
+import type { VoiceAgentState } from 'stream-chat-react/ai-components';
+import type { VoiceSession } from './VoiceSession';
+import './VoiceAgentPanel.css';
+
+/** What the status line shows in each state. */
+const statusLabels: Record<VoiceAgentState, string> = {
+  connecting: 'Connecting…',
+  idle: 'Ready',
+  listening: 'Listening',
+  speaking: 'Speaking',
+  thinking: 'Thinking…',
+};
+
+/** The user is talking, so the microphone's level moves the wave. */
+const isUserTalking = (state: VoiceAgentState) => state === 'listening';
+
+/** The assistant is talking, so its voice's level moves the glow. */
+const isAgentTalking = (state: VoiceAgentState) => state === 'speaking';
+
+/**
+ * A call-like strip under the channel header while a voice conversation runs: the assistant as a
+ * glow that moves with its state and voice, a status line, the user's microphone as a wave, and a
+ * button that ends the conversation.
+ */
+export const VoiceAgentPanel = ({ session }: { session: VoiceSession }) => {
+  const { agentLevel, end, micLevel, state } = session;
+  const nameId = useId();
+
+  // The panel and its button go away when the conversation ends, so focus moves to the composer.
+  const handleEnd = (event: MouseEvent<HTMLButtonElement>) => {
+    const composer = event.currentTarget
+      .closest('.str-chat__channel')
+      ?.querySelector('textarea');
+    end();
+    composer?.focus();
+  };
+
+  return (
+    <section aria-labelledby={nameId} className='cookbook-voice-panel'>
+      {/* Both visuals are hidden from screen readers: the status line says the state in words. */}
+      <VoiceGlow
+        aria-hidden='true'
+        audioLevel={isAgentTalking(state) ? agentLevel : undefined}
+        className='cookbook-voice-panel__glow'
+        state={state}
+      />
+      <div className='cookbook-voice-panel__text'>
+        <p className='cookbook-voice-panel__name' id={nameId}>
+          Voice chat with Assistant
+        </p>
+        <p className='cookbook-voice-panel__status'>{statusLabels[state]}</p>
+      </div>
+      <VoiceWave
+        aria-hidden='true'
+        audioLevel={isUserTalking(state) ? micLevel : undefined}
+        className='cookbook-voice-panel__wave'
+        state={isUserTalking(state) ? 'listening' : 'idle'}
+      />
+      <Button
+        appearance='outline'
+        aria-label='End voice chat'
+        onClick={handleEnd}
+        size='sm'
+        variant='danger'
+      >
+        End
+      </Button>
+    </section>
+  );
+};
diff --git a/examples/cookbook/src/recipes/ai/voice-agent-visuals/VoiceChannelHeader.tsx b/examples/cookbook/src/recipes/ai/voice-agent-visuals/VoiceChannelHeader.tsx
new file mode 100644
index 0000000000..30d9964a83
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/voice-agent-visuals/VoiceChannelHeader.tsx
@@ -0,0 +1,46 @@
+import type { Channel } from 'stream-chat';
+import { ChannelHeader, useChannel } from 'stream-chat-react';
+import type { VoiceAgentState } from 'stream-chat-react/ai-components';
+import { VoiceAgentPanel } from './VoiceAgentPanel';
+import { useVoiceSession } from './VoiceSession';
+import type { VoiceSession } from './VoiceSession';
+
+/** The voice conversation is written into this channel. */
+const isSessionChannel = (
+  session: VoiceSession | undefined,
+  channel: Channel,
+): session is VoiceSession => session?.channelId === channel.id;
+
+const inConversation = 'Voice chat started. Talk, and the assistant answers out loud.';
+
+/**
+ * What a screen reader announces in each state. Listening, thinking and speaking can be heard, so
+ * they share one sentence: it's announced once, when the conversation starts, and not on every
+ * turn. Only the states with no sound get their own words.
+ */
+const announcements: Record<VoiceAgentState, string> = {
+  connecting: 'Connecting to the assistant…',
+  idle: 'Voice chat ready',
+  listening: inConversation,
+  speaking: inConversation,
+  thinking: inConversation,
+};
+
+/** The SDK's channel header, with the voice panel under it in the conversation's channel. */
+export const VoiceChannelHeader = () => {
+  const channel = useChannel();
+  const session = useVoiceSession();
+  const inSession = isSessionChannel(session, channel);
+
+  return (
+    <>
+      <ChannelHeader />
+      {inSession && <VoiceAgentPanel session={session} />}
+      {/* Mounted, and empty, before the session starts, so its first words are announced. It
+          follows the session, not the open channel: the voice is heard in every channel. */}
+      <p className='cookbook-voice-announcement' role='status'>
+        {session ? announcements[session.state] : ''}
+      </p>
+    </>
+  );
+};
diff --git a/examples/cookbook/src/recipes/ai/voice-agent-visuals/VoiceSession.tsx b/examples/cookbook/src/recipes/ai/voice-agent-visuals/VoiceSession.tsx
new file mode 100644
index 0000000000..0a887cbb60
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/voice-agent-visuals/VoiceSession.tsx
@@ -0,0 +1,29 @@
+import { createContext, useContext } from 'react';
+import type { HeardTextFunction, VoiceAgentState } from 'stream-chat-react/ai-components';
+
+/**
+ * A live voice conversation with the assistant, as the app's voice backend reports it. The
+ * conversation is also written into a channel: what the user says, and the assistant's replies.
+ */
+export type VoiceSession = {
+  /** The channel the conversation is written into. */
+  channelId: string;
+  /** What the assistant is doing: idle, connecting, listening, thinking or speaking. */
+  state: VoiceAgentState;
+  /** The level of the user's microphone, from 0 to 1, for example from `useAudioLevel()`. */
+  micLevel: () => number | null;
+  /** The level of the assistant's voice, from 0 to 1, for example from `useAudioLevel()`. */
+  agentLevel: () => number | null;
+  /** The reply the assistant is speaking: its message, and how much of it the user has heard. */
+  reply?: { messageId: string; heard: HeardTextFunction; generating: boolean };
+  /** Ends the conversation. */
+  end: () => void;
+};
+
+const VoiceSessionContext = createContext<VoiceSession | undefined>(undefined);
+
+/** Makes the app's voice session available to the channel header and the message text. */
+export const VoiceSessionProvider = VoiceSessionContext.Provider;
+
+/** The voice session, or `undefined` while there is none. */
+export const useVoiceSession = () => useContext(VoiceSessionContext);
diff --git a/examples/cookbook/src/recipes/ai/voice-agent-visuals/WithVoiceAgent.tsx b/examples/cookbook/src/recipes/ai/voice-agent-visuals/WithVoiceAgent.tsx
new file mode 100644
index 0000000000..93249810d0
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/voice-agent-visuals/WithVoiceAgent.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import { WithComponents } from 'stream-chat-react';
+import { SpokenMessageText } from './SpokenMessageText';
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { StreamedMessageText: SpokenMessageText };
+
+/**
+ * The assistant's replies, revealed at the pace of its voice while it speaks them. `MessageUI`
+ * renders the `StreamedMessageText` slot for every message `Chat`'s `isMessageAIGenerated`
+ * returns `true` for.
+ */
+export const WithVoiceAgent = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/ai/voice-agent-visuals/default.recipe.tsx b/examples/cookbook/src/recipes/ai/voice-agent-visuals/default.recipe.tsx
new file mode 100644
index 0000000000..caf2f3079a
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/voice-agent-visuals/default.recipe.tsx
@@ -0,0 +1,23 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { isMessageAIGenerated } from './isMessageAIGenerated';
+import { SimulateVoice } from './SimulateVoice';
+import { VoiceChannelHeader } from './VoiceChannelHeader';
+import { WithVoiceAgent } from './WithVoiceAgent';
+
+// "Voice agent visuals": a voice conversation with the assistant shows under the channel header as
+// a glow for the assistant and a wave for the user's microphone, and the reply being spoken shows
+// only what the user has heard. SimulateVoice stands in for the voice backend.
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <SimulateVoice>
+    <WithVoiceAgent>{children}</WithVoiceAgent>
+  </SimulateVoice>
+);
+
+const recipe: RecipeConfig = {
+  ChannelHeader: VoiceChannelHeader,
+  chatProps: () => ({ isMessageAIGenerated }),
+  Wrapper,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/ai/voice-agent-visuals/demo-data.json b/examples/cookbook/src/recipes/ai/voice-agent-visuals/demo-data.json
new file mode 100644
index 0000000000..23dbe81e92
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/voice-agent-visuals/demo-data.json
@@ -0,0 +1,33 @@
+{
+  "users": [{ "id": "docs-v15-ck-assistant", "name": "Assistant" }],
+  "channels": [
+    {
+      "id": "docs-v15-cb-voice-assistant",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-assistant"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-voice-assistant-1",
+          "user": "docs-v15-ck-cleo",
+          "text": "What should I pack for a day hike?"
+        },
+        {
+          "id": "docs-v15-ck-voice-assistant-2",
+          "user": "docs-v15-ck-assistant",
+          "text": "Water, a snack, a warm layer and a rain jacket. Comfortable shoes matter most.",
+          "custom": { "ai_generated": true }
+        },
+        {
+          "id": "docs-v15-ck-voice-assistant-3",
+          "user": "docs-v15-ck-cleo",
+          "text": "How much water is enough?"
+        },
+        {
+          "id": "docs-v15-ck-voice-assistant-4",
+          "user": "docs-v15-ck-assistant",
+          "text": "About half a liter for every hour of walking, and a little more on a hot day. Drink before you feel thirsty, and refill wherever you can.",
+          "custom": { "ai_generated": true }
+        }
+      ]
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/ai/voice-agent-visuals/isMessageAIGenerated.ts b/examples/cookbook/src/recipes/ai/voice-agent-visuals/isMessageAIGenerated.ts
new file mode 100644
index 0000000000..848e5f81d1
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/voice-agent-visuals/isMessageAIGenerated.ts
@@ -0,0 +1,13 @@
+import type { LocalMessage } from 'stream-chat';
+
+declare module 'stream-chat' {
+  // The field the backend sets on the assistant's replies. Optional, because every message in the
+  // app shares this interface.
+  interface CustomMessageData {
+    ai_generated?: boolean;
+  }
+}
+
+/** The assistant wrote the message: the backend marks its replies with `ai_generated`. */
+export const isMessageAIGenerated = (message: LocalMessage) =>
+  !!message.custom?.ai_generated;
diff --git a/examples/cookbook/src/recipes/ai/voice-agent-visuals/shots.json b/examples/cookbook/src/recipes/ai/voice-agent-visuals/shots.json
new file mode 100644
index 0000000000..1a46b974bc
--- /dev/null
+++ b/examples/cookbook/src/recipes/ai/voice-agent-visuals/shots.json
@@ -0,0 +1,38 @@
+[
+  {
+    "file": "voice-agent-speaking.png",
+    "query": {
+      "channel": "docs-v15-cb-voice-assistant",
+      "state": "speaking",
+      "frames": "90"
+    },
+    "waitFor": "html[data-simulated-voice] [data-message-id=\"docs-v15-ck-voice-assistant-4\"]",
+    "clip": ".str-chat__channel",
+    "padding": 0,
+    "settleMs": 1200
+  },
+  {
+    "file": "voice-agent-listening.png",
+    "query": {
+      "channel": "docs-v15-cb-voice-assistant",
+      "state": "listening",
+      "frames": "90"
+    },
+    "waitFor": "html[data-simulated-voice] .cookbook-voice-panel",
+    "clip": ".cookbook-voice-panel",
+    "padding": 0,
+    "settleMs": 1200
+  },
+  {
+    "file": "voice-agent-thinking.png",
+    "query": {
+      "channel": "docs-v15-cb-voice-assistant",
+      "state": "thinking",
+      "frames": "90"
+    },
+    "waitFor": "html[data-simulated-voice] .cookbook-voice-panel",
+    "clip": ".cookbook-voice-panel",
+    "padding": 0,
+    "settleMs": 1200
+  }
+]
diff --git a/examples/cookbook/src/recipes/channel-list/channel-invites/Invitations.css b/examples/cookbook/src/recipes/channel-list/channel-invites/Invitations.css
new file mode 100644
index 0000000000..19ec7e5dc3
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/channel-invites/Invitations.css
@@ -0,0 +1,64 @@
+@layer stream-overrides {
+  /* Sits between the search bar and the channel list, at the height its rows need, and
+     separated from the channels by a line. */
+  .cookbook-invitations {
+    border-bottom: 1px solid var(--str-chat__border-core-default);
+  }
+
+  .cookbook-invitations__title {
+    margin: 0;
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md)
+      var(--str-chat__spacing-xs);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-invitations__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* The avatar beside the channel's name, who invited the user, and the two buttons. */
+  .cookbook-invitation {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-sm);
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md)
+      var(--str-chat__spacing-sm);
+  }
+
+  .cookbook-invitation__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-xxs);
+    min-width: 0;
+  }
+
+  .cookbook-invitation__title {
+    margin: 0;
+    overflow: hidden;
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-emphasis);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .cookbook-invitation__by {
+    margin: 0;
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-invitation__actions {
+    display: flex;
+    gap: var(--str-chat__spacing-xs);
+    margin-top: var(--str-chat__spacing-xs);
+  }
+
+  .cookbook-invitations__more {
+    display: flex;
+    padding: 0 var(--str-chat__spacing-md) var(--str-chat__spacing-xs);
+  }
+}
diff --git a/examples/cookbook/src/recipes/channel-list/channel-invites/Invitations.tsx b/examples/cookbook/src/recipes/channel-list/channel-invites/Invitations.tsx
new file mode 100644
index 0000000000..a3a609b0fb
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/channel-invites/Invitations.tsx
@@ -0,0 +1,171 @@
+import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import type { Channel, ChannelPaginator, ChannelPaginatorState } from 'stream-chat';
+import {
+  Button,
+  ChannelAvatar,
+  LoadMoreButton,
+  useAriaLiveAnnouncer,
+  useChannelPreviewInfo,
+  useChatContext,
+  useStateStore,
+} from 'stream-chat-react';
+import './Invitations.css';
+
+type Answer = 'accept' | 'decline';
+
+const invitesSelector = ({ hasMoreTail, isLoading, items }: ChannelPaginatorState) => ({
+  hasMoreTail,
+  isLoading,
+  items,
+});
+
+/**
+ * The section has nothing to show but more to load: the first page was never loaded, or the user
+ * answered every loaded invitation while more remain on the server.
+ */
+const needsPage = (items: Channel[] | undefined, hasMoreTail: boolean) =>
+  items === undefined || (items.length === 0 && hasMoreTail);
+
+/**
+ * One invitation: the channel, who invited the user, and Accept and Decline. Each button's name
+ * includes the channel's name, so a screen reader tells the rows apart. While the request runs,
+ * both buttons stay focusable but do nothing, and the pressed one reads "Joining…" or
+ * "Declining…". Once the server answers, the row leaves the section. If the focus is in the row
+ * then, it moves to the next row's first button, or else the previous row's.
+ */
+const Invitation = ({
+  channel,
+  paginator,
+}: {
+  channel: Channel;
+  paginator: ChannelPaginator;
+}) => {
+  const { client } = useChatContext();
+  const announce = useAriaLiveAnnouncer();
+  const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
+    channel,
+  });
+  const [answering, setAnswering] = useState<Answer>();
+  const rowRef = useRef<HTMLLIElement>(null);
+  const inviter = channel.data?.created_by?.name;
+
+  // Runs as the row leaves, while it is still on the page, whatever removed it.
+  useLayoutEffect(() => {
+    const row = rowRef.current;
+    return () => {
+      if (!row?.contains(document.activeElement)) return;
+      const neighbour = row.nextElementSibling ?? row.previousElementSibling;
+      neighbour?.querySelector('button')?.focus();
+    };
+  }, []);
+
+  const answer = async (choice: Answer) => {
+    if (answering) return;
+    setAnswering(choice);
+    try {
+      if (choice === 'accept') await channel.acceptInvite();
+      else await channel.rejectInvite();
+      // An accepted channel joins the channel list through the `member.updated` event that
+      // follows, which removes the row too if it arrives first.
+      paginator.removeItem({ item: channel });
+      announce(
+        choice === 'accept'
+          ? `Joined ${displayTitle}`
+          : `Declined the invitation to ${displayTitle}`,
+      );
+    } catch (error) {
+      setAnswering(undefined);
+      client.notifications.addError({
+        message: `Couldn’t answer the invitation to ${displayTitle}`,
+        origin: { context: { error, panel: 'channel-list' }, emitter: 'Invitation' },
+      });
+    }
+  };
+
+  return (
+    <li className='cookbook-invitation' ref={rowRef}>
+      <ChannelAvatar
+        aria-hidden='true'
+        displayMembers={groupChannelDisplayInfo.members}
+        imageUrl={displayImage}
+        size='xl'
+        userName={displayTitle}
+      />
+      <div className='cookbook-invitation__body'>
+        <p className='cookbook-invitation__title'>{displayTitle}</p>
+        {inviter && <p className='cookbook-invitation__by'>{inviter} invited you</p>}
+        <div className='cookbook-invitation__actions'>
+          {/* aria-disabled, not disabled: a disabled button would lose focus. */}
+          <Button
+            appearance='solid'
+            aria-busy={answering === 'accept'}
+            aria-disabled={!!answering}
+            aria-label={
+              answering === 'accept'
+                ? `Joining ${displayTitle}…`
+                : `Accept invitation to ${displayTitle}`
+            }
+            onClick={() => answer('accept')}
+            size='sm'
+            variant='primary'
+          >
+            {answering === 'accept' ? 'Joining…' : 'Accept'}
+          </Button>
+          <Button
+            appearance='outline'
+            aria-busy={answering === 'decline'}
+            aria-disabled={!!answering}
+            aria-label={
+              answering === 'decline'
+                ? `Declining invitation to ${displayTitle}…`
+                : `Decline invitation to ${displayTitle}`
+            }
+            onClick={() => answer('decline')}
+            size='sm'
+            variant='secondary'
+          >
+            {answering === 'decline' ? 'Declining…' : 'Decline'}
+          </Button>
+        </div>
+      </div>
+    </li>
+  );
+};
+
+/**
+ * The channels the user is invited to, as a list of invitations under an "Invitations" heading.
+ * Loads its first page on mount, and each further page when the user clicks "Load more", or when
+ * the user answered every loaded invitation while more remain. Shows nothing until the first page
+ * arrives, or when there are no invitations.
+ */
+export const Invitations = ({ paginator }: { paginator: ChannelPaginator }) => {
+  const { hasMoreTail, isLoading, items } = useStateStore(
+    paginator.state,
+    invitesSelector,
+  );
+  const titleId = useId();
+
+  useEffect(() => {
+    if (needsPage(items, hasMoreTail)) void paginator.toTail();
+  }, [hasMoreTail, items, paginator]);
+
+  if (!items?.length) return null;
+
+  return (
+    <section aria-labelledby={titleId} className='cookbook-invitations'>
+      <h2 className='cookbook-invitations__title' id={titleId}>
+        Invitations
+      </h2>
+      <ul className='cookbook-invitations__list'>
+        {items.map((channel) => (
+          <Invitation channel={channel} key={channel.cid} paginator={paginator} />
+        ))}
+      </ul>
+      {hasMoreTail && (
+        <div className='cookbook-invitations__more'>
+          <LoadMoreButton isLoading={isLoading} onClick={() => void paginator.toTail()} />
+        </div>
+      )}
+    </section>
+  );
+};
diff --git a/examples/cookbook/src/recipes/channel-list/channel-invites/SimulateInvites.tsx b/examples/cookbook/src/recipes/channel-list/channel-invites/SimulateInvites.tsx
new file mode 100644
index 0000000000..66430165c7
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/channel-invites/SimulateInvites.tsx
@@ -0,0 +1,27 @@
+import type { ClickStep } from '../../../base/useClickInTurn';
+import { useClickInTurn } from '../../../base/useClickInTurn';
+
+const params = new URLSearchParams(window.location.search);
+const accepts = params.get('simulate') === 'accept';
+const channelName = params.get('row') ?? '';
+
+const steps: ClickStep[] = accepts
+  ? [
+      {
+        find: () =>
+          document.querySelector<HTMLElement>(
+            `[aria-label="Accept invitation to ${CSS.escape(channelName)}"]`,
+          ),
+      },
+    ]
+  : [];
+
+/**
+ * For the screenshots: `?simulate=accept&row=<channel name>` presses that invitation's Accept
+ * button, as a click would. The cookbook is read-only, so the request never settles and the button
+ * keeps reading "Joining…".
+ */
+export const SimulateInvites = () => {
+  useClickInTurn(steps);
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/channel-list/channel-invites/WithChannelInvites.tsx b/examples/cookbook/src/recipes/channel-list/channel-invites/WithChannelInvites.tsx
new file mode 100644
index 0000000000..1939261663
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/channel-invites/WithChannelInvites.tsx
@@ -0,0 +1,64 @@
+import { createContext, useContext, useMemo } from 'react';
+import type { ComponentType, PropsWithChildren } from 'react';
+import type {
+  ChannelFilters,
+  ChannelPaginator,
+  SearchControllerState,
+} from 'stream-chat';
+import {
+  Search as DefaultSearch,
+  useChatContext,
+  useComponentContext,
+  useStateStore,
+  WithComponents,
+} from 'stream-chat-react';
+import { Invitations } from './Invitations';
+import { useChannelInvites } from './useChannelInvites';
+
+const InvitesContext = createContext<{
+  invites?: ChannelPaginator;
+  Search: ComponentType;
+}>({ Search: DefaultSearch });
+
+const searchSelector = ({ isActive }: SearchControllerState) => ({ isActive });
+
+/**
+ * The app's search, then the invitations while no search is open. `ChannelNavigation` renders its
+ * `Search` slot right above the channel list, so the invitations sit there too.
+ */
+const SearchWithInvitations = () => {
+  const { invites, Search } = useContext(InvitesContext);
+  const { searchController } = useChatContext();
+  const { isActive } = useStateStore(searchController.state, searchSelector);
+
+  return (
+    <>
+      <Search />
+      {!isActive && invites && <Invitations paginator={invites} />}
+    </>
+  );
+};
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { Search: SearchWithInvitations };
+
+/**
+ * Shows the channels the user is invited to above the channel list, and keeps them out of the
+ * list until the user accepts. `filters` scope both to the user's channels; pass a stable object.
+ * Keeps the app's own `Search` override, if it has one.
+ */
+export const WithChannelInvites = ({
+  children,
+  filters,
+}: PropsWithChildren<{ filters: ChannelFilters }>) => {
+  const invites = useChannelInvites(filters);
+  // Read outside this component's own WithComponents, where `Search` is still the app's.
+  const { Search = DefaultSearch } = useComponentContext();
+  const value = useMemo(() => ({ invites, Search }), [invites, Search]);
+
+  return (
+    <InvitesContext.Provider value={value}>
+      <WithComponents overrides={overrides}>{children}</WithComponents>
+    </InvitesContext.Provider>
+  );
+};
diff --git a/examples/cookbook/src/recipes/channel-list/channel-invites/default.recipe.tsx b/examples/cookbook/src/recipes/channel-list/channel-invites/default.recipe.tsx
new file mode 100644
index 0000000000..7aed9aca3b
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/channel-invites/default.recipe.tsx
@@ -0,0 +1,22 @@
+import type { PropsWithChildren } from 'react';
+import { channelFilters } from '../../../base/client';
+import type { RecipeConfig } from '../../../base/recipe';
+import { SimulateInvites } from './SimulateInvites';
+import { WithChannelInvites } from './WithChannelInvites';
+
+// "Channel invites": an Invitations section above the channel list, whose channel list holds only
+// the channels the user joined. The recipe registers that list's paginator itself, scoped to the
+// cookbook's channels. SimulateInvites only serves the screenshots.
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithChannelInvites filters={channelFilters}>
+    <SimulateInvites />
+    {children}
+  </WithChannelInvites>
+);
+
+const recipe: RecipeConfig = {
+  registerChannelPaginator: false,
+  Wrapper,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/channel-list/channel-invites/demo-data.json b/examples/cookbook/src/recipes/channel-list/channel-invites/demo-data.json
new file mode 100644
index 0000000000..bec1489f1b
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/channel-invites/demo-data.json
@@ -0,0 +1,42 @@
+{
+  "channels": [
+    {
+      "id": "docs-v15-cb-bird-walk",
+      "name": "Bird walk",
+      "createdBy": "docs-v15-ck-bob",
+      "members": ["docs-v15-ck-bob", "docs-v15-ck-dan"],
+      "invites": ["docs-v15-ck-cleo"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-bird-walk-1",
+          "user": "docs-v15-ck-bob",
+          "text": "We start at the lake at eight on Sunday. Bring binoculars if you have them."
+        },
+        {
+          "id": "docs-v15-ck-bird-walk-2",
+          "user": "docs-v15-ck-dan",
+          "text": "I saw two herons there last week."
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-chess",
+      "name": "Chess club",
+      "createdBy": "docs-v15-ck-cara",
+      "members": ["docs-v15-ck-cara", "docs-v15-ck-bob"],
+      "invites": ["docs-v15-ck-cleo"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-chess-1",
+          "user": "docs-v15-ck-cara",
+          "text": "Games every Thursday evening at the library, all levels welcome."
+        },
+        {
+          "id": "docs-v15-ck-chess-2",
+          "user": "docs-v15-ck-bob",
+          "text": "I'll bring the spare boards."
+        }
+      ]
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/channel-list/channel-invites/shots.json b/examples/cookbook/src/recipes/channel-list/channel-invites/shots.json
new file mode 100644
index 0000000000..c61e972d2f
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/channel-invites/shots.json
@@ -0,0 +1,24 @@
+[
+  {
+    "file": "channel-list-invitations.png",
+    "query": {
+      "channel": "docs-v15-cb-design"
+    },
+    "waitFor": ".cookbook-invitation + .cookbook-invitation",
+    "clip": ".str-chat__channel-list",
+    "padding": 0,
+    "settleMs": 1500
+  },
+  {
+    "file": "channel-list-invitation-joining.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "accept",
+      "row": "Bird walk"
+    },
+    "waitFor": ".cookbook-invitation [aria-busy='true']",
+    "clip": ".cookbook-invitations",
+    "padding": 0,
+    "settleMs": 1000
+  }
+]
diff --git a/examples/cookbook/src/recipes/channel-list/channel-invites/useChannelInvites.ts b/examples/cookbook/src/recipes/channel-list/channel-invites/useChannelInvites.ts
new file mode 100644
index 0000000000..5a6a2b5876
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/channel-invites/useChannelInvites.ts
@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+import { ChannelPaginator } from 'stream-chat';
+import type {
+  Channel,
+  ChannelFilters,
+  ChannelMemberResponse,
+  ChannelPaginatorOptions,
+  SortParamRequest,
+} from 'stream-chat';
+import { useChatContext } from 'stream-chat-react';
+
+/** The user joined the channel: they weren't invited, or they accepted the invite. */
+const hasJoined = (channel: Channel) => {
+  const { invite_accepted_at, invited } = channel.state.membership;
+  return !invited || !!invite_accepted_at;
+};
+
+/** The member answered their invite, on this device or another. */
+const hasAnswered = ({ invite_accepted_at, invite_rejected_at }: ChannelMemberResponse) =>
+  !!(invite_accepted_at || invite_rejected_at);
+
+/**
+ * A channel paginator that checks the `joined` filter on the channel's membership, as the server
+ * does, when an event asks whether a channel belongs in the list.
+ */
+class JoinedChannelPaginator extends ChannelPaginator {
+  constructor(options: ChannelPaginatorOptions) {
+    super(options);
+    // First in the list: the last default resolver takes every field it reaches.
+    this.setFilterResolvers([
+      { matchesField: (field) => field === 'joined', resolve: hasJoined },
+      ...this._filterFieldToDataResolvers,
+    ]);
+  }
+}
+
+// The channel with the latest message first.
+const byLastMessage: SortParamRequest[] = [{ direction: -1, field: 'last_message_at' }];
+// The newest channel first.
+const byCreatedAt: SortParamRequest[] = [{ direction: -1, field: 'created_at' }];
+
+/**
+ * Registers the channel list's paginator on `client.channelManager`, limited to channels the user
+ * joined, and returns a second paginator with the channels the user is invited to. `filters`
+ * scope both to the user's channels; pass a stable object. Returns `undefined` until both exist.
+ */
+export const useChannelInvites = (filters: ChannelFilters) => {
+  const { client } = useChatContext();
+  const [invites, setInvites] = useState<ChannelPaginator>();
+
+  useEffect(() => {
+    const channels = new JoinedChannelPaginator({
+      client,
+      filters: { ...filters, joined: true },
+      id: 'channels',
+      requestOptions: { presence: true, state: true },
+      sort: byLastMessage,
+    });
+    const invites = new ChannelPaginator({
+      client,
+      filters: { ...filters, invite: 'pending' },
+      id: 'invites',
+      paginatorOptions: { pageSize: 5 },
+      sort: byCreatedAt,
+    });
+    client.channelManager.insertPaginator({ paginator: channels });
+
+    // A paginator runs one query at a time, so an invite that arrives during a load is noted, and
+    // loaded once that load ends. The reload keeps the rows on screen until its page arrives.
+    let reloadWhenIdle = false;
+    const reload = () => {
+      if (invites.isLoading) {
+        reloadWhenIdle = true;
+        return;
+      }
+      reloadWhenIdle = false;
+      void invites.toTail({ keepPreviousItems: true, reset: 'yes' });
+    };
+    const offLoadEnd = invites.state.subscribeWithSelector(
+      ({ isLoading }) => ({ isLoading }),
+      ({ isLoading }) => {
+        if (!isLoading && reloadWhenIdle) reload();
+      },
+    );
+
+    // `ChannelNavigation` renders a channel list for every paginator on the manager, so the
+    // invites stay off it and follow the events themselves. The invites query watches its
+    // channels, so a watched channel's answer arrives as `member.updated`, not as a
+    // notification. A new invite arrives as `notification.invited`.
+    const { unsubscribe } = client.on((event) => {
+      if (event.type === 'notification.invited') reload();
+      if (
+        event.type === 'member.updated' &&
+        event.member.user_id === client.userId &&
+        hasAnswered(event.member)
+      )
+        invites.removeItem({ id: event.cid });
+    });
+    setInvites(invites);
+
+    return () => {
+      unsubscribe();
+      offLoadEnd();
+      client.channelManager.removePaginator(channels);
+      channels.dispose();
+      invites.dispose();
+      setInvites(undefined);
+    };
+  }, [client, filters]);
+
+  return invites;
+};
diff --git a/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/ChannelListLoadError.tsx b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/ChannelListLoadError.tsx
new file mode 100644
index 0000000000..49e620e77b
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/ChannelListLoadError.tsx
@@ -0,0 +1,57 @@
+import { useEffect } from 'react';
+import {
+  Button,
+  IconExclamationCircleFill,
+  IconRetry,
+  useAriaLiveAnnouncer,
+} from 'stream-chat-react';
+import './ChannelListState.css';
+
+const title = 'Couldn’t load your conversations';
+
+/**
+ * Shown in place of the channel list when its first page failed to load. `onRetry` queries the first
+ * page again. The view stays mounted while the retry runs, so the Retry button keeps focus: it turns
+ * busy, and reads Retry again if the retry fails.
+ */
+export const ChannelListLoadError = ({
+  isRetrying,
+  onRetry,
+}: {
+  isRetrying: boolean;
+  onRetry: () => void;
+}) => {
+  const announce = useAriaLiveAnnouncer();
+
+  // Announced when the error first shows and again whenever a retry fails. Polite, so it follows
+  // the SDK's own error notification, which is announced assertively at the same moment. The dedupe
+  // window swallows the second run of the effect in development.
+  useEffect(() => {
+    if (isRetrying) return;
+    announce(title, { dedupeMs: 1000, priority: 'polite' });
+  }, [announce, isRetrying]);
+
+  return (
+    <div className='cookbook-channel-list-state'>
+      <div className='cookbook-channel-list-state__icon cookbook-channel-list-state__icon--error'>
+        <IconExclamationCircleFill />
+      </div>
+      <p className='cookbook-channel-list-state__title'>{title}</p>
+      <p className='cookbook-channel-list-state__text'>
+        Something went wrong. Try again.
+      </p>
+      {/* aria-disabled, not disabled: a disabled button would lose focus. */}
+      <Button
+        appearance='outline'
+        aria-busy={isRetrying}
+        aria-disabled={isRetrying}
+        onClick={onRetry}
+        size='md'
+        variant='secondary'
+      >
+        <IconRetry />
+        {isRetrying ? 'Retrying…' : 'Retry'}
+      </Button>
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/ChannelListSkeleton.css b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/ChannelListSkeleton.css
new file mode 100644
index 0000000000..38fbea5d8c
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/ChannelListSkeleton.css
@@ -0,0 +1,79 @@
+@layer stream-overrides {
+  .cookbook-channel-list-skeleton {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* The same size and spacing as a channel list row, so nothing moves when the rows arrive. */
+  .cookbook-channel-list-skeleton__row {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-md);
+    padding: calc(var(--str-chat__spacing-sm) + var(--str-chat__spacing-xxs));
+    border-bottom: 1px solid var(--str-chat__border-core-subtle);
+  }
+
+  .cookbook-channel-list-skeleton__avatar {
+    flex-shrink: 0;
+    width: var(--str-chat__size-48);
+    height: var(--str-chat__size-48);
+    border-radius: var(--str-chat__radius-full);
+  }
+
+  .cookbook-channel-list-skeleton__lines {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-xs);
+    min-width: 0;
+  }
+
+  .cookbook-channel-list-skeleton__first-line {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--str-chat__spacing-md);
+  }
+
+  .cookbook-channel-list-skeleton__bar {
+    height: 14px;
+    border-radius: var(--str-chat__radius-full);
+  }
+
+  .cookbook-channel-list-skeleton__bar--time {
+    flex-shrink: 0;
+    width: var(--str-chat__size-48);
+  }
+
+  /* The skeleton tokens are a shimmer laid over a surface, so the shapes get a surface below it that
+     stands out from the list. One shimmer moves across every shape. */
+  .cookbook-channel-list-skeleton__avatar,
+  .cookbook-channel-list-skeleton__bar {
+    background-color: var(--str-chat__background-core-surface-default);
+    background-image: linear-gradient(
+      90deg,
+      var(--str-chat__skeleton-loading-base) 0%,
+      var(--str-chat__skeleton-loading-highlight) 50%,
+      var(--str-chat__skeleton-loading-base) 100%
+    );
+    background-repeat: no-repeat;
+    background-size: 200% 100%;
+    animation: cookbook-channel-list-shimmer 1.4s linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cookbook-channel-list-skeleton__avatar,
+    .cookbook-channel-list-skeleton__bar {
+      animation: none;
+    }
+  }
+
+  @keyframes cookbook-channel-list-shimmer {
+    from {
+      background-position: 200% 0;
+    }
+
+    to {
+      background-position: -200% 0;
+    }
+  }
+}
diff --git a/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/ChannelListSkeleton.tsx b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/ChannelListSkeleton.tsx
new file mode 100644
index 0000000000..ad6ac2500b
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/ChannelListSkeleton.tsx
@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { useAriaLiveAnnouncer } from 'stream-chat-react';
+import './ChannelListSkeleton.css';
+
+// Different widths per row, so the placeholder reads as a list of conversations.
+const rows = [
+  { preview: '88%', title: '52%' },
+  { preview: '70%', title: '38%' },
+  { preview: '80%', title: '60%' },
+  { preview: '64%', title: '44%' },
+  { preview: '76%', title: '34%' },
+];
+
+/**
+ * Placeholder rows shaped like the channel list's rows: an avatar, the title and the time on the
+ * first line, the last message on the second. Screen readers skip the shapes and hear one message
+ * through the SDK's announcer instead.
+ */
+export const ChannelListSkeleton = () => {
+  const announce = useAriaLiveAnnouncer();
+
+  // Delayed, so a first page that arrives quickly is not announced at all; unmounting cancels it.
+  useEffect(() => announce('Loading conversations…', { delayMs: 300 }), [announce]);
+
+  return (
+    <div aria-hidden='true' className='cookbook-channel-list-skeleton'>
+      {rows.map(({ preview, title }, index) => (
+        <div className='cookbook-channel-list-skeleton__row' key={index}>
+          <div className='cookbook-channel-list-skeleton__avatar' />
+          <div className='cookbook-channel-list-skeleton__lines'>
+            <div className='cookbook-channel-list-skeleton__first-line'>
+              <div
+                className='cookbook-channel-list-skeleton__bar'
+                style={{ width: title }}
+              />
+              <div className='cookbook-channel-list-skeleton__bar cookbook-channel-list-skeleton__bar--time' />
+            </div>
+            <div
+              className='cookbook-channel-list-skeleton__bar'
+              style={{ width: preview }}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/ChannelListState.css b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/ChannelListState.css
new file mode 100644
index 0000000000..d859241f03
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/ChannelListState.css
@@ -0,0 +1,44 @@
+@layer stream-overrides {
+  /* The error and the empty list: a centred message with one action. */
+  .cookbook-channel-list-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+    padding: var(--str-chat__spacing-2xl) var(--str-chat__spacing-xl);
+    text-align: center;
+  }
+
+  .cookbook-channel-list-state__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--str-chat__size-56);
+    height: var(--str-chat__size-56);
+    margin-bottom: var(--str-chat__spacing-xs);
+    border-radius: var(--str-chat__radius-full);
+    background: var(--str-chat__background-core-surface-subtle);
+    color: var(--str-chat__accent-primary);
+  }
+
+  .cookbook-channel-list-state__icon svg {
+    width: var(--str-chat__size-28);
+    height: var(--str-chat__size-28);
+  }
+
+  .cookbook-channel-list-state__icon--error {
+    color: var(--str-chat__accent-error);
+  }
+
+  .cookbook-channel-list-state__title {
+    margin: 0;
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-heading-xs);
+  }
+
+  .cookbook-channel-list-state__text {
+    margin: 0 0 var(--str-chat__spacing-sm);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/EmptyChannelList.tsx b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/EmptyChannelList.tsx
new file mode 100644
index 0000000000..6d1730343b
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/EmptyChannelList.tsx
@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { Button, GlobalModal, IconMessageBubbles, IconPlus } from 'stream-chat-react';
+import { NewConversationDialog } from '../starting-a-conversation/NewConversationDialog';
+import './ChannelListState.css';
+
+/**
+ * Shown in place of the channel list when the user has no conversations. The button opens the same
+ * New conversation dialog as the header's button.
+ */
+export const EmptyChannelList = () => {
+  const [open, setOpen] = useState(false);
+  const close = () => setOpen(false);
+
+  return (
+    <div className='cookbook-channel-list-state'>
+      <div className='cookbook-channel-list-state__icon'>
+        <IconMessageBubbles />
+      </div>
+      <p className='cookbook-channel-list-state__title'>No conversations yet</p>
+      <p className='cookbook-channel-list-state__text'>
+        Start one with a person or a group, and it shows up here.
+      </p>
+      <Button
+        appearance='solid'
+        aria-haspopup='dialog'
+        onClick={() => setOpen(true)}
+        size='md'
+        variant='primary'
+      >
+        <IconPlus />
+        New conversation
+      </Button>
+      <GlobalModal onClose={close} open={open}>
+        {/* Mounted only while open, so every opening starts with an empty dialog. */}
+        {open && <NewConversationDialog onClose={close} />}
+      </GlobalModal>
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/SimulateChannelListState.tsx b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/SimulateChannelListState.tsx
new file mode 100644
index 0000000000..0c6b3178e6
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/SimulateChannelListState.tsx
@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+import { useChatContext } from 'stream-chat-react';
+
+/**
+ * For the screenshots only, not part of the recipe. Puts the channel list into one of its states by
+ * changing the client's channel queries, never the demo app's data:
+ *
+ * - `?simulate=channel-list-loading`: the query never settles, so the first page stays loading;
+ * - `?simulate=channel-list-empty`: the query asks for a channel id no channel has, so the server
+ *   returns an empty first page;
+ * - `?simulate=channel-list-error`: every query fails with a server error while the client stays
+ *   connected, so the first page fails once the paginator's retries are used up, and so does Retry.
+ *
+ * Runs before the base app adds its paginator, so the first query already goes through it.
+ */
+export const SimulateChannelListState = () => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    const state = new URLSearchParams(window.location.search).get('simulate');
+    const queryChannels = client.queryChannels.bind(client);
+
+    if (state === 'channel-list-loading') {
+      client.queryChannels = () => new Promise(() => undefined);
+    } else if (state === 'channel-list-empty') {
+      client.queryChannels = (request, requestOptions) =>
+        queryChannels(
+          {
+            ...request,
+            filter_conditions: {
+              $and: [
+                request?.filter_conditions ?? {},
+                { id: { $in: ['docs-v15-cb-no-such-channel'] } },
+              ],
+            },
+          },
+          requestOptions,
+        );
+    } else if (state === 'channel-list-error') {
+      client.queryChannels = () =>
+        Promise.reject(new Error('Request failed with status code 500'));
+    } else {
+      return;
+    }
+
+    return () => {
+      client.queryChannels = queryChannels;
+    };
+  }, [client]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/WithChannelListStates.tsx b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/WithChannelListStates.tsx
new file mode 100644
index 0000000000..08f279a8f7
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/WithChannelListStates.tsx
@@ -0,0 +1,65 @@
+import type { PropsWithChildren } from 'react';
+import { useState } from 'react';
+import type { ChannelPaginator } from 'stream-chat';
+import {
+  useAriaLiveAnnouncer,
+  useChannelListContext,
+  useChannelPaginatorState,
+  WithComponents,
+} from 'stream-chat-react';
+import { ChannelListLoadError } from './ChannelListLoadError';
+import { ChannelListSkeleton } from './ChannelListSkeleton';
+import { EmptyChannelList } from './EmptyChannelList';
+
+type QueryState = { isLoading: boolean; lastQueryError?: Error };
+
+/** The query failed and the paginator stopped trying: its retries are spent and nothing is loading. */
+const hasGivenUp = ({ isLoading, lastQueryError }: QueryState) =>
+  !!lastQueryError && !isLoading;
+
+/** The paginator holds a first page, even an empty one. */
+const hasFirstPage = (paginator: ChannelPaginator) => paginator.items !== undefined;
+
+/**
+ * Shows the error once the paginator has given up, and the skeleton otherwise. While a Retry the user
+ * started runs, the error stays, so the focused Retry button isn't swapped out.
+ */
+const FirstPageFromPaginator = ({ paginator }: { paginator: ChannelPaginator }) => {
+  const state = useChannelPaginatorState(paginator);
+  const announce = useAriaLiveAnnouncer();
+  const [isRetrying, setIsRetrying] = useState(false);
+
+  const retry = () => {
+    if (isRetrying) return;
+    setIsRetrying(true);
+    // A paginator created with `throwErrors: true` rejects here; the error is in its state either way.
+    void paginator
+      .reload()
+      .catch(() => undefined)
+      .finally(() => {
+        setIsRetrying(false);
+        if (hasFirstPage(paginator)) announce('Conversations loaded');
+      });
+  };
+
+  if (!hasGivenUp(state) && !isRetrying) return <ChannelListSkeleton />;
+  return <ChannelListLoadError isRetrying={isRetrying} onRetry={retry} />;
+};
+
+/** What the channel list shows until its first page arrives. */
+const ChannelListFirstPage = () => {
+  const { paginator } = useChannelListContext();
+  if (!paginator) return <ChannelListSkeleton />;
+  return <FirstPageFromPaginator paginator={paginator} />;
+};
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = {
+  EmptyListIndicator: EmptyChannelList,
+  FirstPageLoadingIndicator: ChannelListFirstPage,
+};
+
+/** Replaces the channel list's loading, error and empty states for every list inside it. */
+export const WithChannelListStates = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/default.recipe.tsx b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/default.recipe.tsx
new file mode 100644
index 0000000000..390df9b2b2
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/default.recipe.tsx
@@ -0,0 +1,21 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { WithNewConversation } from '../starting-a-conversation/NewConversationButton';
+import { SimulateChannelListState } from './SimulateChannelListState';
+import { WithChannelListStates } from './WithChannelListStates';
+
+// The empty list's button opens the New conversation dialog, so the recipe builds on Starting a
+// conversation, which registers the handler that creates a new conversation on its first send.
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithNewConversation>
+    <WithChannelListStates>{children}</WithChannelListStates>
+  </WithNewConversation>
+);
+
+// SimulateChannelListState only serves the screenshots.
+const recipe: RecipeConfig = {
+  chatViewChildren: <SimulateChannelListState />,
+  Wrapper,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/shots.json b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/shots.json
new file mode 100644
index 0000000000..1794f19e01
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/empty-and-loading-states/shots.json
@@ -0,0 +1,24 @@
+[
+  {
+    "file": "channel-list-skeleton.png",
+    "query": { "simulate": "channel-list-loading" },
+    "waitFor": ".cookbook-channel-list-skeleton",
+    "clip": ".str-chat__channel-list",
+    "padding": 0
+  },
+  {
+    "file": "channel-list-empty.png",
+    "query": { "simulate": "channel-list-empty" },
+    "waitFor": ".cookbook-channel-list-state",
+    "clip": ".str-chat__channel-list",
+    "padding": 0
+  },
+  {
+    "file": "channel-list-load-error.png",
+    "query": { "simulate": "channel-list-error" },
+    "waitFor": ".cookbook-channel-list-state__icon--error",
+    "clip": ".str-chat__channel-list",
+    "padding": 0,
+    "settleMs": 1500
+  }
+]
diff --git a/examples/cookbook/src/recipes/channel-list/members-and-online-status/ChannelMembers.css b/examples/cookbook/src/recipes/channel-list/members-and-online-status/ChannelMembers.css
new file mode 100644
index 0000000000..a2edba6b08
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/members-and-online-status/ChannelMembers.css
@@ -0,0 +1,34 @@
+@layer stream-overrides {
+  .cookbook-channel-members {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--str-chat__spacing-xs);
+    margin: 0;
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+    border-bottom: 1px solid var(--str-chat__border-core-default);
+    background: var(--str-chat__background-core-elevation-1);
+    list-style: none;
+  }
+
+  .cookbook-channel-members__item {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+    padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-sm);
+    border-radius: var(--str-chat__radius-full);
+    background: var(--str-chat__background-core-surface-subtle);
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-channel-members__dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--str-chat__radius-full);
+    background: var(--str-chat__presence-bg-offline);
+  }
+
+  .cookbook-channel-members__dot--online {
+    background: var(--str-chat__presence-bg-online);
+  }
+}
diff --git a/examples/cookbook/src/recipes/channel-list/members-and-online-status/ChannelMembers.tsx b/examples/cookbook/src/recipes/channel-list/members-and-online-status/ChannelMembers.tsx
new file mode 100644
index 0000000000..2f3b91612d
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/members-and-online-status/ChannelMembers.tsx
@@ -0,0 +1,28 @@
+import { useChannel, useChannelMembersState, VisuallyHidden } from 'stream-chat-react';
+import './ChannelMembers.css';
+
+export const ChannelMembers = () => {
+  const channel = useChannel();
+  const members = useChannelMembersState(channel);
+
+  return (
+    <ul className='cookbook-channel-members'>
+      {Object.values(members).map((member) => (
+        <li className='cookbook-channel-members__item' key={member.user_id}>
+          <span
+            aria-hidden
+            className={
+              member.user?.online
+                ? 'cookbook-channel-members__dot cookbook-channel-members__dot--online'
+                : 'cookbook-channel-members__dot'
+            }
+          />
+          {member.user?.name ?? member.user_id}
+          <VisuallyHidden>
+            {member.user?.online ? ', online' : ', offline'}
+          </VisuallyHidden>
+        </li>
+      ))}
+    </ul>
+  );
+};
diff --git a/examples/cookbook/src/recipes/channel-list/members-and-online-status/SimulatePresence.tsx b/examples/cookbook/src/recipes/channel-list/members-and-online-status/SimulatePresence.tsx
new file mode 100644
index 0000000000..23305ec2bd
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/members-and-online-status/SimulatePresence.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import { StreamChat } from 'stream-chat';
+import { apiKey, fetchToken } from '../../../base/client';
+
+/**
+ * `?simulate=online&online=<user id>,<user id>&channel=<id>` signs those users in, each with a
+ * client of its own, and has them watch the channel, for the screenshot of who is online. The app
+ * renders once they are connected, so the channel loads with them online and watching.
+ */
+export const SimulatePresence = ({ children }: PropsWithChildren) => {
+  const [params] = useState(() => new URLSearchParams(window.location.search));
+  const userIds =
+    params.get('simulate') === 'online'
+      ? (params.get('online') ?? '').split(',').filter(Boolean)
+      : [];
+  const [ready, setReady] = useState(!userIds.length);
+  const userIdsKey = userIds.join(',');
+  const channelId = params.get('channel');
+
+  useEffect(() => {
+    const ids = userIdsKey.split(',').filter(Boolean);
+    if (!ids.length) return;
+
+    let cancelled = false;
+    const others = ids.map(() => new StreamChat(apiKey));
+    void Promise.all(
+      others.map(async (other, index) => {
+        await other.connectUser({ id: ids[index] }, () => fetchToken(ids[index]));
+        if (channelId) await other.channel('messaging', channelId).watch();
+      }),
+    )
+      .catch((error) => console.error('Simulated presence failed', error))
+      .finally(() => {
+        if (!cancelled) setReady(true);
+      });
+
+    return () => {
+      cancelled = true;
+      others.forEach((other) => void other.disconnectUser());
+    };
+  }, [channelId, userIdsKey]);
+
+  return ready ? <>{children}</> : null;
+};
diff --git a/examples/cookbook/src/recipes/channel-list/members-and-online-status/default.recipe.tsx b/examples/cookbook/src/recipes/channel-list/members-and-online-status/default.recipe.tsx
new file mode 100644
index 0000000000..ed0d7e932d
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/members-and-online-status/default.recipe.tsx
@@ -0,0 +1,21 @@
+import { ChannelHeader } from 'stream-chat-react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { ChannelMembers } from './ChannelMembers';
+import { SimulatePresence } from './SimulatePresence';
+
+// The members list renders inside the channel, right under the header. The wrapper element only
+// gives the screenshot one element to crop to.
+const HeaderWithMembers = () => (
+  <div className='cookbook-channel-header-with-members'>
+    <ChannelHeader />
+    <ChannelMembers />
+  </div>
+);
+
+// SimulatePresence only serves the screenshot: it brings some members online first.
+const recipe: RecipeConfig = {
+  ChannelHeader: HeaderWithMembers,
+  Wrapper: SimulatePresence,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/channel-list/members-and-online-status/shots.json b/examples/cookbook/src/recipes/channel-list/members-and-online-status/shots.json
new file mode 100644
index 0000000000..ba18cec1d6
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/members-and-online-status/shots.json
@@ -0,0 +1,13 @@
+[
+  {
+    "file": "channel-members-online-status.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "online",
+      "online": "docs-v15-ck-bob,docs-v15-ck-cara"
+    },
+    "waitFor": ".cookbook-channel-members__dot--online",
+    "clip": ".cookbook-channel-header-with-members",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/SectionedChannelNavigation.css b/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/SectionedChannelNavigation.css
new file mode 100644
index 0000000000..b1430f7357
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/SectionedChannelNavigation.css
@@ -0,0 +1,92 @@
+@layer stream-overrides {
+  /* The one scroll of the column: every section sits in it, one after another, and takes the
+     height its rows need. */
+  .cookbook-channel-sections {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  .cookbook-channel-section + .cookbook-channel-section {
+    border-top: 1px solid var(--str-chat__border-core-default);
+  }
+
+  .cookbook-channel-section__title {
+    margin: 0;
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md)
+      var(--str-chat__spacing-xs);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-channel-section__toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+    width: 100%;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .cookbook-channel-section__toggle:hover {
+    color: var(--str-chat__text-primary);
+  }
+
+  .cookbook-channel-section__chevron {
+    margin-inline-start: auto;
+    transition: transform 150ms ease;
+  }
+
+  .cookbook-channel-section__toggle[aria-expanded='false']
+    .cookbook-channel-section__chevron {
+    transform: rotate(-90deg);
+  }
+
+  /* The load-more button, at the start of the row. The SDK centres the button inside its own
+     wrapper; this row's display: flex shrinks that wrapper to the button, which puts it at the
+     start. The row's start padding and the button's own padding add up to the title's padding, so
+     the label lines up with the section title, and the focus ring stays inside the column. */
+  .cookbook-channel-section__more {
+    display: flex;
+    padding-inline: var(--str-chat__spacing-xs) var(--str-chat__spacing-md);
+  }
+
+  .cookbook-channel-section__more .str-chat__button {
+    padding-inline: var(--str-chat__spacing-xs);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-emphasis);
+    text-transform: none;
+  }
+
+  .cookbook-channel-section__more .str-chat__button:hover {
+    color: var(--str-chat__text-primary);
+  }
+
+  .cookbook-channel-section__empty {
+    margin: 0;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md)
+      var(--str-chat__spacing-md);
+    color: var(--str-chat__text-tertiary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  /* A failed query: the message, and the button that asks again, under the section title. */
+  .cookbook-channel-section__error {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--str-chat__spacing-xs);
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md)
+      var(--str-chat__spacing-md);
+  }
+
+  .cookbook-channel-section__error-text {
+    margin: 0;
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/SectionedChannelNavigation.tsx b/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/SectionedChannelNavigation.tsx
new file mode 100644
index 0000000000..609e7aa58c
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/SectionedChannelNavigation.tsx
@@ -0,0 +1,336 @@
+import type { MouseEvent, PropsWithChildren, ReactNode, RefObject } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import type {
+  ChannelFilters,
+  ChannelPaginator,
+  ChannelPaginatorState,
+  SearchControllerState,
+} from 'stream-chat';
+import {
+  Button,
+  ChannelListContextProvider,
+  ChannelListItem,
+  ChannelListHeader as DefaultChannelListHeader,
+  NotificationList as DefaultNotificationList,
+  Search as DefaultSearch,
+  LoadingChannels,
+  LoadingIndicator,
+  LoadMoreButton,
+  useChannelListKeyboardNavigation,
+  useChatContext,
+  useComponentContext,
+  useComponentContextIcons,
+  useStateStore,
+} from 'stream-chat-react';
+import type { ChannelSections } from './useChannelSections';
+import { useChannelSections } from './useChannelSections';
+import './SectionedChannelNavigation.css';
+
+const searchSelector = ({ isActive }: SearchControllerState) => ({ isActive });
+const sectionSelector = ({
+  hasMoreTail,
+  isLoading,
+  items,
+  lastQueryError,
+}: ChannelPaginatorState) => ({ hasMoreTail, isLoading, items, lastQueryError });
+
+type SectionState = ReturnType<typeof sectionSelector>;
+
+/**
+ * Has no page loaded yet: the paginator holds no items, or holds only channels events put there
+ * before it ever queried.
+ */
+const needsFirstPage = (paginator: ChannelPaginator) =>
+  paginator.items === undefined || !paginator.isInitialized;
+
+/** Found no channels and has no further page to load. */
+const isEmpty = ({ hasMoreTail, items }: SectionState) =>
+  items?.length === 0 && !hasMoreTail;
+
+/** The last query failed, and the section has no channels to show. */
+const failedWithoutChannels = ({ items, lastQueryError }: SectionState) =>
+  !!lastQueryError && !items?.length;
+
+/** Reports each failed query as an error notification, as `ChannelList` does. */
+const useQueryErrorNotification = (lastQueryError: Error | undefined) => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    if (!lastQueryError) return;
+    client.notifications.addError({
+      message: lastQueryError.message,
+      origin: {
+        context: { reason: 'channel query error' },
+        emitter: 'SectionedChannelNavigation',
+      },
+    });
+  }, [client, lastQueryError]);
+};
+
+/**
+ * Returns the paginator's state, reports its failed queries, and loads the first page while
+ * `enabled` and the paginator has none: on mount, after a reset, or while it holds only event
+ * items. Every later page waits for the user's click. A first page that failed waits for the
+ * user's "Try again" too, or, in Archived, for the user to open the section again.
+ */
+const useSectionState = (paginator: ChannelPaginator, enabled = true) => {
+  const state = useStateStore(paginator.state, sectionSelector);
+  useQueryErrorNotification(state.lastQueryError);
+
+  useEffect(() => {
+    if (enabled && needsFirstPage(paginator)) void paginator.toTail();
+  }, [enabled, paginator, state.items]);
+
+  return state;
+};
+
+/** Nothing has focus: the page body holds it, as after the focused button turned disabled. */
+const hasLostFocus = () =>
+  document.activeElement === null || document.activeElement === document.body;
+
+/**
+ * Returns the load-more click handler, which loads the paginator's next page. The button is
+ * disabled while the page loads, which takes focus off it. The keyboard hook then moves focus to
+ * the first row the page adds; when it adds none, this puts focus back on the button, or on the
+ * last row once the button is gone. One of them is always there: with neither, the section shows
+ * its empty state instead of the rows.
+ */
+const useRestoreFocusAfterPage = (
+  navigationRef: RefObject<HTMLElement | null>,
+  paginator: ChannelPaginator,
+  isLoading: boolean,
+) => {
+  const pageRequestedRef = useRef(false);
+
+  useEffect(() => {
+    if (isLoading || !pageRequestedRef.current) return;
+    pageRequestedRef.current = false;
+    if (!hasLostFocus()) return;
+    const focusTargets = navigationRef.current?.querySelectorAll<HTMLElement>(
+      '[role="option"], .cookbook-channel-section__more button',
+    );
+    focusTargets?.[focusTargets.length - 1]?.focus();
+  }, [isLoading, navigationRef]);
+
+  const onLoadMore = () => {
+    // The checks `toTail()` makes before it queries: only a query that starts ends in a focus move.
+    if (paginator.isLoading || !paginator.hasMoreTail) return;
+    pageRequestedRef.current = true;
+    void paginator.toTail();
+  };
+
+  return onLoadMore;
+};
+
+/** The SDK's "Load more" button, shown only while the paginator has another page. */
+const SectionLoadMore = ({
+  onClick,
+  state,
+}: {
+  onClick: () => void;
+  state: SectionState;
+}) =>
+  state.hasMoreTail ? (
+    <div className='cookbook-channel-section__more'>
+      <LoadMoreButton isLoading={state.isLoading} onClick={onClick} />
+    </div>
+  ) : null;
+
+/**
+ * Says the section's channels didn't load, with a button that queries the first page again. The
+ * button goes away once the query starts, so it first moves focus to the section's title.
+ */
+const SectionLoadError = ({ paginator }: { paginator: ChannelPaginator }) => {
+  const retry = (event: MouseEvent<HTMLButtonElement>) => {
+    event.currentTarget.closest('section')?.querySelector('h2')?.focus();
+    void paginator.toTail();
+  };
+
+  return (
+    <div className='cookbook-channel-section__error'>
+      <p className='cookbook-channel-section__error-text'>Couldn’t load channels</p>
+      <Button appearance='outline' onClick={retry} size='sm' variant='secondary'>
+        Try again
+      </Button>
+    </div>
+  );
+};
+
+/**
+ * A section's channels as a listbox named by the section title, holding only the SDK's rows, and
+ * the section's load-more button after it. The keyboard hook sits on the wrapper around both and
+ * finds the rows and the button inside it: the arrow keys reach the button, and a click moves focus
+ * to the first row it loads.
+ */
+const ChannelRows = ({
+  paginator,
+  state,
+  titleId,
+}: {
+  paginator: ChannelPaginator;
+  state: SectionState;
+  titleId: string;
+}) => {
+  const navigationRef = useRef<HTMLDivElement>(null);
+  const { onClickCapture, onKeyDown } = useChannelListKeyboardNavigation(navigationRef);
+  const onLoadMore = useRestoreFocusAfterPage(navigationRef, paginator, state.isLoading);
+
+  return (
+    <div onClickCapture={onClickCapture} onKeyDown={onKeyDown} ref={navigationRef}>
+      <div aria-labelledby={titleId} role='listbox'>
+        {state.items?.map((channel) => (
+          <ChannelListItem channel={channel} key={channel.cid} />
+        ))}
+      </div>
+      <SectionLoadMore onClick={onLoadMore} state={state} />
+    </div>
+  );
+};
+
+/**
+ * A section of one paginator, named by its title. Its `ChannelListContext` holds that paginator, as
+ * `ChannelNavigation` gives each of its lists one: the rows' action notifications use it to show in
+ * the channel-list panel.
+ */
+const Section = ({
+  children,
+  paginator,
+  title,
+  titleId,
+}: PropsWithChildren<{
+  paginator: ChannelPaginator;
+  title: ReactNode;
+  titleId: string;
+}>) => {
+  const value = useMemo(() => ({ paginator }), [paginator]);
+
+  return (
+    <ChannelListContextProvider value={value}>
+      <section aria-labelledby={titleId} className='cookbook-channel-section'>
+        <h2 className='cookbook-channel-section__title' id={titleId} tabIndex={-1}>
+          {title}
+        </h2>
+        {children}
+      </section>
+    </ChannelListContextProvider>
+  );
+};
+
+/** The user's pinned channels. Shows nothing while it loads or has none, unless a query failed. */
+const PinnedSection = ({ paginator }: { paginator: ChannelPaginator }) => {
+  const titleId = useId();
+  const state = useSectionState(paginator);
+  const failed = failedWithoutChannels(state);
+  if (!failed && !state.items?.length) return null;
+
+  return (
+    <Section paginator={paginator} title='Pinned' titleId={titleId}>
+      {failed ? (
+        <SectionLoadError paginator={paginator} />
+      ) : (
+        <ChannelRows paginator={paginator} state={state} titleId={titleId} />
+      )}
+    </Section>
+  );
+};
+
+/** The rest of the user's channels. */
+const InboxSection = ({ paginator }: { paginator: ChannelPaginator }) => {
+  const titleId = useId();
+  const state = useSectionState(paginator);
+
+  return (
+    <Section paginator={paginator} title='Channels' titleId={titleId}>
+      {failedWithoutChannels(state) ? (
+        <SectionLoadError paginator={paginator} />
+      ) : needsFirstPage(paginator) ? (
+        <LoadingChannels />
+      ) : isEmpty(state) ? (
+        <p className='cookbook-channel-section__empty'>No channels</p>
+      ) : (
+        <ChannelRows paginator={paginator} state={state} titleId={titleId} />
+      )}
+    </Section>
+  );
+};
+
+/**
+ * The archive, collapsed until the user opens it. Opening it loads the first page, also when an
+ * event already put a channel in the paginator.
+ */
+const ArchivedSection = ({ paginator }: { paginator: ChannelPaginator }) => {
+  const { IconArchive, IconChevronDown } = useComponentContextIcons();
+  const [open, setOpen] = useState(false);
+  const titleId = useId();
+  const bodyId = useId();
+  const state = useSectionState(paginator, open);
+
+  const toggle = (
+    <button
+      aria-controls={bodyId}
+      aria-expanded={open}
+      className='cookbook-channel-section__toggle'
+      onClick={() => setOpen(!open)}
+      type='button'
+    >
+      <IconArchive />
+      Archived
+      <IconChevronDown className='cookbook-channel-section__chevron' />
+    </button>
+  );
+
+  return (
+    <Section paginator={paginator} title={toggle} titleId={titleId}>
+      <div id={bodyId}>
+        {open &&
+          (failedWithoutChannels(state) ? (
+            <SectionLoadError paginator={paginator} />
+          ) : needsFirstPage(paginator) ? (
+            <LoadingIndicator />
+          ) : isEmpty(state) ? (
+            <p className='cookbook-channel-section__empty'>No archived channels</p>
+          ) : (
+            <ChannelRows paginator={paginator} state={state} titleId={titleId} />
+          ))}
+      </div>
+    </Section>
+  );
+};
+
+// One scroll container for every section, in the order of `useChannelSections()`. The archive,
+// used least and opened by the user, comes last: opening it or loading more of it pushes none of
+// the channels the user works in out of view. The cost is that it sits after every loaded channel.
+const Sections = ({ sections }: { sections: ChannelSections }) => (
+  <div className='cookbook-channel-sections'>
+    <PinnedSection paginator={sections.pinned} />
+    <InboxSection paginator={sections.inbox} />
+    <ArchivedSection paginator={sections.archived} />
+  </div>
+);
+
+/**
+ * `ChannelNavigation` with the channel list split into Pinned, Channels and a collapsible Archived
+ * section that share one scroll, meant to sit inside `ChatView`, which gives it the theme scope.
+ * Each section loads its next page only when the user clicks its button. `filters` scope every
+ * section to the user's channels; pass a stable object.
+ */
+export const SectionedChannelNavigation = ({ filters }: { filters: ChannelFilters }) => {
+  const {
+    ChannelListHeader = DefaultChannelListHeader,
+    NotificationList = DefaultNotificationList,
+    Search = DefaultSearch,
+  } = useComponentContext();
+  const { searchController } = useChatContext();
+  const { isActive } = useStateStore(searchController.state, searchSelector);
+  // Registered here rather than in the sections, so a search keeps what they loaded.
+  const sections = useChannelSections(filters);
+
+  return (
+    <div className='str-chat__channel-list'>
+      <ChannelListHeader />
+      <Search />
+      {!isActive && sections && <Sections sections={sections} />}
+      <NotificationList panel='channel-list' />
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/SimulateSections.tsx b/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/SimulateSections.tsx
new file mode 100644
index 0000000000..9d261f5a55
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/SimulateSections.tsx
@@ -0,0 +1,63 @@
+import { useEffect } from 'react';
+import type { ClickStep } from '../../../base/useClickInTurn';
+import { findByText, useClickInTurn } from '../../../base/useClickInTurn';
+
+const params = new URLSearchParams(window.location.search);
+const simulate = params.get('simulate');
+const rowTitle = params.get('row');
+const opensArchive = simulate === 'archive' || simulate === 'archive-more';
+
+const openArchive: ClickStep = {
+  find: () =>
+    document.querySelector<HTMLElement>(
+      '.cookbook-channel-section__toggle[aria-expanded="false"]',
+    ),
+};
+const loadMoreArchived: ClickStep = {
+  find: () =>
+    document.querySelector<HTMLElement>(
+      '.cookbook-channel-section:has([aria-expanded="true"]) .cookbook-channel-section__more button',
+    ),
+};
+
+const archiveSteps: ClickStep[] =
+  simulate === 'archive-more'
+    ? [openArchive, loadMoreArchived]
+    : opensArchive
+      ? [openArchive]
+      : [];
+
+/**
+ * For the screenshots: `?simulate=archive` opens the Archived section, `?simulate=archive-more`
+ * also clicks its "Load more", and both keep the end of the archive in view while its rows load.
+ * `?simulate=row-menu&row=<channel name>` opens that row's action menu, as a click would. The menu
+ * is opened again whenever it isn't open, since the sections re-render their rows while they load.
+ */
+export const SimulateSections = () => {
+  useClickInTurn(archiveSteps);
+
+  useEffect(() => {
+    if (!opensArchive) return;
+    const timer = setInterval(() => {
+      document
+        .querySelector('.cookbook-channel-section__toggle[aria-expanded="true"]')
+        ?.closest('section')
+        ?.scrollIntoView({ block: 'end' });
+    }, 300);
+    return () => clearInterval(timer);
+  }, []);
+
+  useEffect(() => {
+    if (simulate !== 'row-menu' || !rowTitle) return;
+    const timer = setInterval(() => {
+      const toggle = findByText(
+        '.str-chat__channel-list-item-container',
+        rowTitle,
+      )?.querySelector<HTMLElement>('[data-testid="channel-list-item-dropdown-toggle"]');
+      if (toggle && toggle.getAttribute('aria-expanded') !== 'true') toggle.click();
+    }, 300);
+    return () => clearInterval(timer);
+  }, []);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/default.recipe.tsx b/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/default.recipe.tsx
new file mode 100644
index 0000000000..130275af86
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/default.recipe.tsx
@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react';
+import { channelFilters } from '../../../base/client';
+import type { RecipeConfig } from '../../../base/recipe';
+import { SectionedChannelNavigation } from './SectionedChannelNavigation';
+import { SimulateSections } from './SimulateSections';
+
+// "Pinned and archived channels": the channel list split into Pinned, Archived and Channels, on
+// paginators the recipe registers itself, scoped to the cookbook's channels. SimulateSections only
+// serves the screenshots.
+const Navigation = () => <SectionedChannelNavigation filters={channelFilters} />;
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <>
+    <SimulateSections />
+    {children}
+  </>
+);
+
+const recipe: RecipeConfig = {
+  ChannelNavigation: Navigation,
+  registerChannelPaginator: false,
+  Wrapper,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/demo-data.json b/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/demo-data.json
new file mode 100644
index 0000000000..3c3a3d9caa
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/demo-data.json
@@ -0,0 +1,148 @@
+{
+  "channels": [
+    {
+      "id": "docs-v15-cb-lunch",
+      "name": "Lunch spots",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-bob", "docs-v15-ck-dan"],
+      "pinnedForCurrentUser": true,
+      "messages": [
+        {
+          "id": "docs-v15-ck-lunch-1",
+          "user": "docs-v15-ck-dan",
+          "text": "The noodle place on the corner has a new menu."
+        },
+        {
+          "id": "docs-v15-ck-lunch-2",
+          "user": "docs-v15-ck-bob",
+          "text": "Let's try it on Friday at noon."
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-plant-swap",
+      "name": "Plant swap",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-cara", "docs-v15-ck-dan"],
+      "pinnedForCurrentUser": true,
+      "messages": [
+        {
+          "id": "docs-v15-ck-plant-swap-1",
+          "user": "docs-v15-ck-cara",
+          "text": "I have three spider plant cuttings to give away."
+        },
+        {
+          "id": "docs-v15-ck-plant-swap-2",
+          "user": "docs-v15-ck-cleo",
+          "text": "I would love one, I can bring a fern in return."
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-spring-fair",
+      "name": "Spring fair",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-bob", "docs-v15-ck-cara"],
+      "archivedForCurrentUser": true,
+      "messages": [
+        {
+          "id": "docs-v15-ck-spring-fair-1",
+          "user": "docs-v15-ck-bob",
+          "text": "Thanks for helping at the stand, it was a great day."
+        },
+        {
+          "id": "docs-v15-ck-spring-fair-2",
+          "user": "docs-v15-ck-cara",
+          "text": "See you all at the next one!"
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-game-night",
+      "name": "Board game night",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-bob", "docs-v15-ck-dan"],
+      "archivedForCurrentUser": true,
+      "messages": [
+        {
+          "id": "docs-v15-ck-game-night-1",
+          "user": "docs-v15-ck-dan",
+          "text": "I packed the games back into the cupboard."
+        },
+        {
+          "id": "docs-v15-ck-game-night-2",
+          "user": "docs-v15-ck-cleo",
+          "text": "Thanks! That was a fun evening."
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-winter-market",
+      "name": "Winter market",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-cara", "docs-v15-ck-dan"],
+      "archivedForCurrentUser": true,
+      "messages": [
+        {
+          "id": "docs-v15-ck-winter-market-1",
+          "user": "docs-v15-ck-cara",
+          "text": "The stalls are packed away until next year."
+        },
+        {
+          "id": "docs-v15-ck-winter-market-2",
+          "user": "docs-v15-ck-cleo",
+          "text": "Thanks for the help with the lights!"
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-choir",
+      "name": "Choir practice",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-bob", "docs-v15-ck-cara"],
+      "archivedForCurrentUser": true,
+      "messages": [
+        {
+          "id": "docs-v15-ck-choir-1",
+          "user": "docs-v15-ck-bob",
+          "text": "Last rehearsal of the season, well sung everyone."
+        },
+        {
+          "id": "docs-v15-ck-choir-2",
+          "user": "docs-v15-ck-cara",
+          "text": "See you after the summer break."
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-bike-repair",
+      "name": "Bike repair day",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-bob", "docs-v15-ck-dan"],
+      "archivedForCurrentUser": true,
+      "messages": [
+        {
+          "id": "docs-v15-ck-bike-repair-1",
+          "user": "docs-v15-ck-dan",
+          "text": "All twelve bikes are fixed and back with their owners."
+        },
+        {
+          "id": "docs-v15-ck-bike-repair-2",
+          "user": "docs-v15-ck-cleo",
+          "text": "Great work, the tools are back in the shed."
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-film-club",
+      "name": "Film club",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-cara", "docs-v15-ck-dan"],
+      "archivedForCurrentUser": true,
+      "messages": [
+        {
+          "id": "docs-v15-ck-film-club-1",
+          "user": "docs-v15-ck-dan",
+          "text": "That was the last film on our list."
+        },
+        {
+          "id": "docs-v15-ck-film-club-2",
+          "user": "docs-v15-ck-cara",
+          "text": "Let's pick a new list in the autumn."
+        }
+      ]
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/shots.json b/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/shots.json
new file mode 100644
index 0000000000..15944acd04
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/shots.json
@@ -0,0 +1,42 @@
+[
+  {
+    "file": "channel-list-pinned-and-archived.png",
+    "query": {
+      "channel": "docs-v15-cb-design"
+    },
+    "waitFor": ".cookbook-channel-section:nth-child(2) .str-chat__channel-list-item-container",
+    "clip": ".str-chat__channel-list",
+    "padding": 0
+  },
+  {
+    "file": "channel-list-archived-open.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "archive"
+    },
+    "waitFor": ".cookbook-channel-section:has([aria-expanded='true']) .cookbook-channel-section__more button",
+    "clip": ".str-chat__channel-list",
+    "padding": 0
+  },
+  {
+    "file": "channel-list-archived-load-more.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "archive-more"
+    },
+    "waitFor": ".cookbook-channel-section:has([aria-expanded='true']) .str-chat__channel-list-item-container:nth-child(6)",
+    "clip": ".str-chat__channel-list",
+    "padding": 0
+  },
+  {
+    "file": "channel-list-pin-archive-menu.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "row-menu",
+      "row": "Lunch spots"
+    },
+    "waitFor": "[data-testid='dropdown-action-pin']",
+    "clip": ".str-chat__channel-list",
+    "padding": 88
+  }
+]
diff --git a/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/useChannelSections.ts b/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/useChannelSections.ts
new file mode 100644
index 0000000000..10e8974f7b
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/pinned-and-archived-channels/useChannelSections.ts
@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react';
+import { ChannelPaginator } from 'stream-chat';
+import type {
+  ChannelFilters,
+  PaginatorOwnershipResolver,
+  SortParamRequest,
+} from 'stream-chat';
+import { useChatContext } from 'stream-chat-react';
+
+type SectionKey = 'archived' | 'inbox' | 'pinned';
+
+export type ChannelSections = Record<SectionKey, ChannelPaginator>;
+
+// The most recently pinned channel first.
+const byPinnedAt: SortParamRequest[] = [{ direction: -1, field: 'pinned_at' }];
+// The channel with the latest message first.
+const byLastMessage: SortParamRequest[] = [{ direction: -1, field: 'last_message_at' }];
+
+// The sections in the order they show. A channel that matches several shows only in the first of
+// them: a pinned channel matches the inbox too, and shows under Pinned. `pageSize` is the number of
+// channels one query asks for, the first page and each click on a section's load-more button:
+// pinned channels and the inbox 10 at a time, the archive, opened less often, 5.
+const sectionDefinitions: {
+  extraFilters: ChannelFilters;
+  key: SectionKey;
+  pageSize: number;
+  sort: SortParamRequest[];
+}[] = [
+  {
+    extraFilters: { archived: false, pinned: true },
+    key: 'pinned',
+    pageSize: 10,
+    sort: byPinnedAt,
+  },
+  { extraFilters: { archived: false }, key: 'inbox', pageSize: 10, sort: byLastMessage },
+  { extraFilters: { archived: true }, key: 'archived', pageSize: 5, sort: byLastMessage },
+];
+
+// Presence keeps members' online status current. A row previews only the latest message, so each
+// channel comes with its newest 5 messages instead of the default 25: a few rather than one, since
+// the preview skips some messages, such as system messages. Opening a channel loads its own page.
+const requestOptions = { message_limit: 5, presence: true, state: true };
+
+// Fixed ids, which `firstSectionOwns` uses to tell the sections from other paginators. The manager
+// holds one ownership rule, so there is one set of sections.
+const sectionId = (key: SectionKey) => `sections-${key}`;
+const sectionIds = sectionDefinitions.map(({ key }) => sectionId(key));
+const isSection = (id: string) => sectionIds.includes(id);
+
+// Of the sections a channel matches, only the first owns it. Paginators that aren't sections keep
+// every channel they match.
+const firstSectionOwns: PaginatorOwnershipResolver = ({ matchingPaginators }) => {
+  const owner = sectionIds.find((id) => matchingPaginators.some((p) => p.id === id));
+  return matchingPaginators
+    .filter(({ id }) => !isSection(id) || id === owner)
+    .map(({ id }) => id);
+};
+
+/**
+ * Creates the three paginators of a sectioned channel list and registers them on
+ * `client.channelManager`, beside any paginators already there: the user's pinned channels, the
+ * rest of their channels, and their archive. It also sets the manager's ownership rule: a channel
+ * that matches several sections shows only in the first, and every other paginator keeps its
+ * matches. The manager holds a single rule, so use one sectioned list per client. On unmount the
+ * hook removes its paginators and resets the rule to the default. `filters` scope all three to the
+ * user's channels; pass a stable object. Returns `undefined` until they are registered.
+ */
+export const useChannelSections = (filters: ChannelFilters) => {
+  const { client } = useChatContext();
+  const [sections, setSections] = useState<ChannelSections>();
+
+  useEffect(() => {
+    const entries = sectionDefinitions.map(
+      ({ extraFilters, key, pageSize, sort }) =>
+        [
+          key,
+          new ChannelPaginator({
+            client,
+            filters: { ...filters, ...extraFilters },
+            id: sectionId(key),
+            paginatorOptions: { pageSize },
+            requestOptions,
+            sort,
+          }),
+        ] as const,
+    );
+    const paginators = entries.map(([, paginator]) => paginator);
+
+    const { channelManager } = client;
+    channelManager.setPaginators([...channelManager.paginators, ...paginators]);
+    channelManager.setOwnershipResolver(firstSectionOwns);
+    setSections(Object.fromEntries(entries) as ChannelSections);
+
+    return () => {
+      channelManager.setPaginators(
+        channelManager.paginators.filter((paginator) => !paginators.includes(paginator)),
+      );
+      // The manager doesn't expose the rule it had before, so the default takes its place.
+      channelManager.setOwnershipResolver();
+      setSections(undefined);
+    };
+  }, [client, filters]);
+
+  return sections;
+};
diff --git a/examples/cookbook/src/recipes/channel-list/preview-ui/ChannelChip.css b/examples/cookbook/src/recipes/channel-list/preview-ui/ChannelChip.css
new file mode 100644
index 0000000000..71f093be3b
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/preview-ui/ChannelChip.css
@@ -0,0 +1,41 @@
+@layer stream-overrides {
+  .cookbook-channel-chip {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+    width: 200px;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__background-core-elevation-1);
+    color: var(--str-chat__text-primary);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .cookbook-channel-chip:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-channel-chip__text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .cookbook-channel-chip__title,
+  .cookbook-channel-chip__preview {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .cookbook-channel-chip__title {
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-channel-chip__preview {
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/channel-list/preview-ui/ChannelChip.tsx b/examples/cookbook/src/recipes/channel-list/preview-ui/ChannelChip.tsx
new file mode 100644
index 0000000000..91d626d8aa
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/preview-ui/ChannelChip.tsx
@@ -0,0 +1,53 @@
+import type { Channel, MessagePaginatorAggregateState } from 'stream-chat';
+import {
+  ChannelAvatar,
+  useChannelPreviewInfo,
+  useLatestMessagePreview,
+  useStateStore,
+  useWorkspaceNavigation,
+} from 'stream-chat-react';
+import './ChannelChip.css';
+
+const latestMessageSelector = ({ latestMessage }: MessagePaginatorAggregateState) => ({
+  latestMessage: latestMessage ?? undefined,
+});
+
+export const ChannelChip = ({ channel }: { channel: Channel }) => {
+  const { openChannel } = useWorkspaceNavigation();
+  const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
+    channel,
+  });
+  const { latestMessage } = useStateStore(
+    channel.messagePaginator.aggregateState,
+    latestMessageSelector,
+  );
+  const { senderName, text, type } = useLatestMessagePreview({
+    latestMessage,
+    participantCount: channel.data?.member_count,
+  });
+
+  return (
+    <button
+      className='cookbook-channel-chip'
+      onClick={(event) => openChannel(channel, { event })}
+      type='button'
+    >
+      <ChannelAvatar
+        aria-hidden
+        displayMembers={groupChannelDisplayInfo.members}
+        imageUrl={displayImage}
+        // Group avatars come in lg, xl and 2xl.
+        size='lg'
+        userName={displayTitle}
+      />
+      <span className='cookbook-channel-chip__text'>
+        <span className='cookbook-channel-chip__title'>{displayTitle}</span>
+        <span className='cookbook-channel-chip__preview'>
+          {type === 'giphy' ? '🎞️ ' : null}
+          {senderName ? `${senderName}: ` : null}
+          {text}
+        </span>
+      </span>
+    </button>
+  );
+};
diff --git a/examples/cookbook/src/recipes/channel-list/preview-ui/CompactChannelRow.css b/examples/cookbook/src/recipes/channel-list/preview-ui/CompactChannelRow.css
new file mode 100644
index 0000000000..0bec5b9ded
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/preview-ui/CompactChannelRow.css
@@ -0,0 +1,58 @@
+@layer stream-overrides {
+  .cookbook-channel-row {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+    width: 100%;
+    min-width: 0;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 0;
+    border-radius: var(--str-chat__radius-lg);
+    background: none;
+    color: var(--str-chat__text-primary);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .cookbook-channel-row:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-channel-row[aria-selected='true'] {
+    background: var(--str-chat__background-utility-selected);
+  }
+
+  .cookbook-channel-row__main {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .cookbook-channel-row__top {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--str-chat__spacing-xs);
+  }
+
+  .cookbook-channel-row__title {
+    overflow: hidden;
+    font: var(--str-chat__font-body-emphasis);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .cookbook-channel-row .str-chat__channel-list-item-timestamp {
+    color: var(--str-chat__text-tertiary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-channel-row__unread {
+    min-width: 20px;
+    padding: var(--str-chat__spacing-xxxs) var(--str-chat__spacing-xs);
+    border-radius: var(--str-chat__radius-full);
+    background: var(--str-chat__badge-bg-primary);
+    color: var(--str-chat__badge-text-on-accent);
+    font: var(--str-chat__font-caption-emphasis);
+    text-align: center;
+  }
+}
diff --git a/examples/cookbook/src/recipes/channel-list/preview-ui/CompactChannelRow.tsx b/examples/cookbook/src/recipes/channel-list/preview-ui/CompactChannelRow.tsx
new file mode 100644
index 0000000000..91939aa685
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/preview-ui/CompactChannelRow.tsx
@@ -0,0 +1,96 @@
+import type { PropsWithChildren } from 'react';
+import type { ChannelListItemUIProps } from 'stream-chat-react';
+import {
+  ChannelAvatar,
+  ChannelListItemActionButtons,
+  ChannelListItemTimestamp,
+  composeChannelListItemAccessibleLabel,
+  SummarizedMessagePreview,
+  useChatContext,
+  useTranslationContext,
+  useWorkspaceNavigation,
+  WithComponents,
+} from 'stream-chat-react';
+import './CompactChannelRow.css';
+
+const CompactChannelRow = ({
+  accessibleLabelConfig,
+  active,
+  channel,
+  className,
+  displayImage,
+  displayTitle,
+  groupChannelDisplayInfo,
+  messageDeliveryStatus,
+  onSelect,
+  previewedMessage,
+  unread,
+}: ChannelListItemUIProps) => {
+  const { client, isMessageAIGenerated } = useChatContext();
+  const { t, tDateTimeParser, userLanguage } = useTranslationContext();
+  const { openChannel } = useWorkspaceNavigation();
+  // What a screen reader announces for the row: name, unread count, last message and its time.
+  const accessibleLabel = composeChannelListItemAccessibleLabel(
+    {
+      active,
+      channel,
+      client,
+      displayTitle,
+      isMessageAIGenerated,
+      latestMessage: previewedMessage,
+      messageDeliveryStatus,
+      t,
+      tDateTimeParser,
+      unreadCount: unread,
+      userLanguage,
+    },
+    accessibleLabelConfig,
+  );
+
+  return (
+    <div className='str-chat__channel-list-item-container'>
+      <button
+        aria-label={accessibleLabel}
+        aria-selected={active || undefined}
+        // Search results pass their own class, `str-chat__search-result`.
+        className={
+          className ? `cookbook-channel-row ${className}` : 'cookbook-channel-row'
+        }
+        onClick={(event) => {
+          if (onSelect) onSelect(event);
+          else openChannel(channel, { event });
+        }}
+        role='option'
+        type='button'
+      >
+        <ChannelAvatar
+          aria-hidden
+          displayMembers={groupChannelDisplayInfo?.members}
+          imageUrl={displayImage}
+          size='lg'
+          userName={displayTitle}
+        />
+        <div className='cookbook-channel-row__main'>
+          <div className='cookbook-channel-row__top'>
+            <span className='cookbook-channel-row__title'>{displayTitle}</span>
+            <ChannelListItemTimestamp previewedMessage={previewedMessage} />
+          </div>
+          <SummarizedMessagePreview
+            latestMessage={previewedMessage}
+            messageDeliveryStatus={messageDeliveryStatus}
+            participantCount={channel.data?.member_count}
+          />
+        </div>
+        {!!unread && <span className='cookbook-channel-row__unread'>{unread}</span>}
+      </button>
+      <ChannelListItemActionButtons />
+    </div>
+  );
+};
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { ChannelListItemUI: CompactChannelRow };
+
+export const WithCompactChannelRows = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/channel-list/preview-ui/SimulateUnread.tsx b/examples/cookbook/src/recipes/channel-list/preview-ui/SimulateUnread.tsx
new file mode 100644
index 0000000000..2993bceb05
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/preview-ui/SimulateUnread.tsx
@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { useChatContext } from 'stream-chat-react';
+
+/**
+ * `?simulate=unread&unread=<channel id>&count=<n>` shows `n` unread messages for the user in that
+ * channel, for the screenshot of the unread badge. It changes only this page's copy of the
+ * channel's read state, so the shared demo data stays read. Pick a channel that isn't open:
+ * opening one marks it read.
+ */
+export const SimulateUnread = () => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const channelId = params.get('unread');
+    const count = Number(params.get('count') ?? 1);
+    const userId = client.userId;
+    if (params.get('simulate') !== 'unread' || !channelId || !userId) return;
+
+    // The channel list loads this same instance, so the change shows in its row.
+    const channel = client.channel('messaging', channelId);
+    // Re-applied whenever the read state changes, because the channel's query writes it on load.
+    return channel.state.subscribeWithSelector(
+      ({ read }) => ({ ownRead: read[userId] }),
+      ({ ownRead }) => {
+        if (!ownRead || ownRead.unread_messages === count) return;
+        channel.state.read = {
+          ...channel.state.read,
+          [userId]: { ...ownRead, unread_messages: count },
+        };
+      },
+    );
+  }, [client]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/channel-list/preview-ui/chips.recipe.tsx b/examples/cookbook/src/recipes/channel-list/preview-ui/chips.recipe.tsx
new file mode 100644
index 0000000000..b108aae48d
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/preview-ui/chips.recipe.tsx
@@ -0,0 +1,27 @@
+import { ChannelHeader, useChatContext } from 'stream-chat-react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { ChannelChip } from './ChannelChip';
+import './recent-strip.css';
+
+// "Using display helpers": a "Recent" strip of ChannelChips under the channel header. The channel
+// list loads these same channel instances, so the chips fill in once it has queried them.
+const recentChannelIds = ['docs-v15-cb-trip', 'docs-v15-cb-books', 'docs-v15-cb-garden'];
+
+const HeaderWithRecentChannels = () => {
+  const { client } = useChatContext();
+
+  return (
+    <div className='cookbook-recent-channels-demo'>
+      <ChannelHeader />
+      <div className='cookbook-recent-channels'>
+        {recentChannelIds.map((id) => (
+          <ChannelChip channel={client.channel('messaging', id)} key={id} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const recipe: RecipeConfig = { ChannelHeader: HeaderWithRecentChannels };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/channel-list/preview-ui/default.recipe.tsx b/examples/cookbook/src/recipes/channel-list/preview-ui/default.recipe.tsx
new file mode 100644
index 0000000000..c460a5287d
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/preview-ui/default.recipe.tsx
@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { WithCompactChannelRows } from './CompactChannelRow';
+import { SimulateUnread } from './SimulateUnread';
+
+// "Custom channel preview": every row of the channel list rendered by CompactChannelRow.
+// SimulateUnread only serves the screenshot of the unread badge.
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithCompactChannelRows>
+    <SimulateUnread />
+    {children}
+  </WithCompactChannelRows>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/channel-list/preview-ui/recent-strip.css b/examples/cookbook/src/recipes/channel-list/preview-ui/recent-strip.css
new file mode 100644
index 0000000000..ff40eaa414
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/preview-ui/recent-strip.css
@@ -0,0 +1,9 @@
+/* Cookbook only: lays out the strip of chips the `chips` variant renders under the header. */
+@layer stream-overrides {
+  .cookbook-recent-channels {
+    display: flex;
+    gap: var(--str-chat__spacing-sm);
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+    border-bottom: 1px solid var(--str-chat__border-core-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/channel-list/preview-ui/shots.json b/examples/cookbook/src/recipes/channel-list/preview-ui/shots.json
new file mode 100644
index 0000000000..93e3fcff5e
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/preview-ui/shots.json
@@ -0,0 +1,22 @@
+[
+  {
+    "file": "channel-list-custom-preview.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "unread",
+      "unread": "docs-v15-cb-books",
+      "count": "2"
+    },
+    "waitFor": ".cookbook-channel-row__unread",
+    "clip": ".str-chat__channel-list",
+    "padding": 0
+  },
+  {
+    "file": "channel-list-channel-chips.png",
+    "variant": "chips",
+    "query": { "channel": "docs-v15-cb-design" },
+    "waitFor": ".cookbook-channel-chip__preview:not(:empty)",
+    "clip": ".cookbook-recent-channels-demo",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/channel-list/starting-a-conversation/NewConversationButton.css b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/NewConversationButton.css
new file mode 100644
index 0000000000..7918c3d8e6
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/NewConversationButton.css
@@ -0,0 +1,13 @@
+@layer stream-overrides {
+  /* The default header and the button share a row. */
+  .cookbook-channel-list-header {
+    display: flex;
+    align-items: center;
+    padding-inline-end: var(--str-chat__spacing-md);
+  }
+
+  .cookbook-channel-list-header__title {
+    flex: 1;
+    min-width: 0;
+  }
+}
diff --git a/examples/cookbook/src/recipes/channel-list/starting-a-conversation/NewConversationButton.tsx b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/NewConversationButton.tsx
new file mode 100644
index 0000000000..e5054e0842
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/NewConversationButton.tsx
@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import {
+  Button,
+  ChannelListHeader,
+  GlobalModal,
+  IconPlus,
+  useChatContext,
+  WithComponents,
+} from 'stream-chat-react';
+import { NewConversationDialog } from './NewConversationDialog';
+import { createOnFirstSend } from './startConversation';
+import './NewConversationButton.css';
+
+/** The default channel list header, with a button beside it that opens the dialog. */
+const ChannelListHeaderWithButton = () => {
+  const [open, setOpen] = useState(false);
+  const close = () => setOpen(false);
+
+  return (
+    <div className='cookbook-channel-list-header'>
+      <div className='cookbook-channel-list-header__title'>
+        <ChannelListHeader />
+      </div>
+      <Button
+        appearance='solid'
+        aria-haspopup='dialog'
+        aria-label='New conversation'
+        circular
+        onClick={() => setOpen(true)}
+        size='md'
+        variant='primary'
+      >
+        <IconPlus />
+      </Button>
+      <GlobalModal onClose={close} open={open}>
+        {/* Mounted only while open, so every opening starts with an empty dialog. */}
+        {open && <NewConversationDialog onClose={close} />}
+      </GlobalModal>
+    </div>
+  );
+};
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { ChannelListHeader: ChannelListHeaderWithButton };
+
+/**
+ * Adds the New conversation button to the channel list header, and registers the send handler that
+ * creates a new conversation on its first message.
+ */
+export const WithNewConversation = ({ children }: PropsWithChildren) => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    client.config.set({
+      channel: { requestHandlers: { sendMessageRequest: createOnFirstSend(client) } },
+    });
+  }, [client]);
+
+  return <WithComponents overrides={overrides}>{children}</WithComponents>;
+};
diff --git a/examples/cookbook/src/recipes/channel-list/starting-a-conversation/NewConversationDialog.css b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/NewConversationDialog.css
new file mode 100644
index 0000000000..1acadcb738
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/NewConversationDialog.css
@@ -0,0 +1,124 @@
+@layer stream-overrides {
+  /* A fixed size, so the dialog doesn't resize as people are picked and results change. */
+  .cookbook-new-conversation {
+    width: 440px;
+    max-width: calc(100vw - 2 * var(--str-chat__spacing-md));
+    height: 560px;
+    max-height: calc(100vh - 2 * var(--str-chat__spacing-xl));
+  }
+
+  /* The form holds the body and the footer, so it takes over the prompt's column. */
+  .cookbook-new-conversation__form {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .cookbook-new-conversation__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--str-chat__spacing-xs);
+    margin: 0 0 var(--str-chat__spacing-md);
+    padding: 0;
+    list-style: none;
+  }
+
+  .cookbook-new-conversation__chip {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xxs);
+    padding: var(--str-chat__spacing-xxxs) var(--str-chat__spacing-xxxs)
+      var(--str-chat__spacing-xxxs) var(--str-chat__spacing-xxs);
+    border-radius: var(--str-chat__radius-full);
+    background: var(--str-chat__background-utility-selected);
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-new-conversation__chip-remove {
+    display: flex;
+    padding: var(--str-chat__spacing-xxxs);
+    border: 0;
+    border-radius: var(--str-chat__radius-full);
+    background: none;
+    color: var(--str-chat__text-secondary);
+    cursor: pointer;
+  }
+
+  .cookbook-new-conversation__chip-remove:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-new-conversation__chip-remove svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .cookbook-new-conversation__label {
+    display: block;
+    margin-bottom: var(--str-chat__spacing-xxs);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-new-conversation__input {
+    width: 100%;
+    margin-bottom: var(--str-chat__spacing-sm);
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-full);
+    background: var(--str-chat__background-core-surface-subtle);
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-new-conversation__input:focus-visible {
+    border-color: var(--str-chat__accent-primary);
+    outline: none;
+  }
+
+  .cookbook-new-conversation__results {
+    margin: 0 0 var(--str-chat__spacing-sm);
+    padding: 0;
+    list-style: none;
+  }
+
+  .cookbook-new-conversation__result-button {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+    width: 100%;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 0;
+    border-radius: var(--str-chat__radius-lg);
+    background: none;
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-emphasis);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .cookbook-new-conversation__result-button:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-new-conversation__result-button:focus-visible {
+    outline: 2px solid var(--str-chat__accent-primary);
+    outline-offset: -2px;
+  }
+
+  .cookbook-new-conversation__status,
+  .cookbook-new-conversation__error {
+    margin: 0 0 var(--str-chat__spacing-sm);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-new-conversation__status {
+    color: var(--str-chat__text-tertiary);
+  }
+
+  .cookbook-new-conversation__error {
+    color: var(--str-chat__accent-error);
+  }
+}
diff --git a/examples/cookbook/src/recipes/channel-list/starting-a-conversation/NewConversationDialog.tsx b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/NewConversationDialog.tsx
new file mode 100644
index 0000000000..d8aacd439f
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/NewConversationDialog.tsx
@@ -0,0 +1,179 @@
+import { useId, useRef, useState } from 'react';
+import type { FormEvent } from 'react';
+import type { UserResponse } from 'stream-chat';
+import {
+  Avatar,
+  IconXmark,
+  Prompt,
+  useChatContext,
+  useWorkspaceNavigation,
+} from 'stream-chat-react';
+import { findDirectConversation, startLocalConversation } from './startConversation';
+import { usePeopleSearch } from './usePeopleSearch';
+import './NewConversationDialog.css';
+
+const nameOf = (user: UserResponse) => user.name ?? user.id;
+
+// The avatar repeats the name beside it, so it's hidden from assistive technology. Avatar renders
+// role="button" by default, which a chip or a result mustn't announce.
+const decorative = { 'aria-hidden': true, role: 'presentation' } as const;
+
+/**
+ * Names the conversation, picks the people to talk to and opens the conversation with them: the
+ * user's existing direct conversation for one person, otherwise a new conversation that's created,
+ * with its name, on its first message.
+ */
+export const NewConversationDialog = ({ onClose }: { onClose: () => void }) => {
+  const { channelManager, client } = useChatContext();
+  const { openChannel } = useWorkspaceNavigation();
+  const [text, setText] = useState('');
+  const [selected, setSelected] = useState<UserResponse[]>([]);
+  const [name, setName] = useState('');
+  const [isOpening, setIsOpening] = useState(false);
+  const [error, setError] = useState<string>();
+  const { failed, isLoading, people } = usePeopleSearch(text);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const id = useId();
+
+  const selectedIds = new Set(selected.map((user) => user.id));
+  const results: UserResponse[] = people.filter(
+    (user: UserResponse) => !selectedIds.has(user.id),
+  );
+  const isGroup = selected.length > 1;
+
+  // The picked result and a removed chip leave the list, so the focus goes back to the input.
+  const add = (user: UserResponse) => {
+    setSelected((current) => [...current, user]);
+    setText('');
+    inputRef.current?.focus();
+  };
+  const remove = (user: UserResponse) => {
+    setSelected((current) => current.filter(({ id }) => id !== user.id));
+    inputRef.current?.focus();
+  };
+
+  const start = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!selected.length) return;
+    setIsOpening(true);
+    setError(undefined);
+    try {
+      const existing =
+        selected.length === 1
+          ? await findDirectConversation(client, selected[0].id)
+          : undefined;
+      if (existing) channelManager.ingestChannel(existing);
+      const channel = existing ?? startLocalConversation(client, selected, name.trim());
+      // A conversation that already exists keeps its own name, so the user learns why the typed
+      // one isn't shown. The notification shows in the channel panel, where the conversation opens.
+      if (!channel.isProvisional && name.trim()) {
+        client.notifications.addInfo({
+          message: 'This conversation already exists, so its name was left unchanged.',
+          origin: { emitter: 'NewConversationDialog' },
+        });
+      }
+      openChannel(channel);
+      onClose();
+    } catch {
+      setError("Couldn't open the conversation. Try again.");
+      setIsOpening(false);
+    }
+  };
+
+  return (
+    <Prompt.Root className='cookbook-new-conversation'>
+      <Prompt.Header close={onClose} title='New conversation' />
+      <form className='cookbook-new-conversation__form' onSubmit={start}>
+        <Prompt.Body className='cookbook-new-conversation__body'>
+          <label className='cookbook-new-conversation__label' htmlFor={`${id}-name`}>
+            {isGroup ? 'Group name (optional)' : 'Name (optional)'}
+          </label>
+          {/* The conversation's name, not the user's, so the browser doesn't offer to fill it. */}
+          <input
+            autoComplete='off'
+            className='cookbook-new-conversation__input'
+            id={`${id}-name`}
+            onChange={(event) => setName(event.target.value)}
+            value={name}
+          />
+          {!!selected.length && (
+            <ul aria-label='Selected people' className='cookbook-new-conversation__chips'>
+              {selected.map((user) => (
+                <li className='cookbook-new-conversation__chip' key={user.id}>
+                  <Avatar {...decorative} size='xs' userName={nameOf(user)} />
+                  {nameOf(user)}
+                  <button
+                    aria-label={`Remove ${nameOf(user)}`}
+                    className='cookbook-new-conversation__chip-remove'
+                    onClick={() => remove(user)}
+                    type='button'
+                  >
+                    <IconXmark />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+          <label className='cookbook-new-conversation__label' htmlFor={`${id}-search`}>
+            Add people
+          </label>
+          {/* The dialog's content mounts a render after the modal opens, so the input takes the
+              focus itself. */}
+          <input
+            aria-controls={`${id}-results`}
+            autoFocus
+            className='cookbook-new-conversation__input'
+            id={`${id}-search`}
+            onChange={(event) => setText(event.target.value)}
+            placeholder='Search by name'
+            ref={inputRef}
+            type='search'
+            value={text}
+          />
+          <ul
+            aria-busy={isLoading}
+            aria-label='People'
+            className='cookbook-new-conversation__results'
+            id={`${id}-results`}
+          >
+            {results.map((user) => (
+              <li className='cookbook-new-conversation__result' key={user.id}>
+                <button
+                  className='cookbook-new-conversation__result-button'
+                  onClick={() => add(user)}
+                  type='button'
+                >
+                  <Avatar {...decorative} size='md' userName={nameOf(user)} />
+                  {nameOf(user)}
+                </button>
+              </li>
+            ))}
+          </ul>
+          {!results.length && (
+            <p className='cookbook-new-conversation__status' role='status'>
+              {isLoading ? 'Searching…' : failed ? 'The search failed.' : 'No one found'}
+            </p>
+          )}
+          {error && (
+            <p className='cookbook-new-conversation__error' role='alert'>
+              {error}
+            </p>
+          )}
+        </Prompt.Body>
+        <Prompt.Footer>
+          <Prompt.FooterControls>
+            <Prompt.FooterControlsButtonSecondary onClick={onClose} type='button'>
+              Cancel
+            </Prompt.FooterControlsButtonSecondary>
+            <Prompt.FooterControlsButtonPrimary
+              disabled={!selected.length || isOpening}
+              type='submit'
+            >
+              Start conversation
+            </Prompt.FooterControlsButtonPrimary>
+          </Prompt.FooterControls>
+        </Prompt.Footer>
+      </form>
+    </Prompt.Root>
+  );
+};
diff --git a/examples/cookbook/src/recipes/channel-list/starting-a-conversation/SimulateNewConversation.tsx b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/SimulateNewConversation.tsx
new file mode 100644
index 0000000000..b0cb289a6e
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/SimulateNewConversation.tsx
@@ -0,0 +1,150 @@
+import { useEffect } from 'react';
+import { useChatContext, useWorkspaceNavigation } from 'stream-chat-react';
+import demoData from '../../../base/demo-data.json';
+
+const castIds = demoData.users.map((user) => user.id);
+
+const waitFor = <T extends Element>(find: () => T | null | undefined) =>
+  new Promise<T>((resolve) => {
+    const timer = setInterval(() => {
+      const element = find();
+      if (!element) return;
+      clearInterval(timer);
+      resolve(element);
+    }, 100);
+  });
+
+/** Sets an input's value the way typing does, so React's onChange runs. */
+const typeInto = (input: HTMLInputElement, text: string) => {
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(
+    input,
+    text,
+  );
+  input.dispatchEvent(new Event('input', { bubbles: true }));
+};
+
+/**
+ * For the screenshots only, not part of the recipe. Keeps the people search to the cookbook's cast,
+ * so other users of the shared demo app never show up, and drives the dialog from the URL:
+ *
+ * - `?simulate=new-conversation` opens the dialog;
+ * - `&people=Cara,Dan` picks those people by name, and `&name=<text>` types the conversation's name;
+ * - `&start=1` presses Start conversation;
+ * - `&draft=<text>` then types the text into the composer of the conversation it opened, and
+ *   `&send=1` sends it.
+ */
+export const SimulateNewConversation = () => {
+  const { client } = useChatContext();
+  const { openChannels } = useWorkspaceNavigation();
+  const params = new URLSearchParams(window.location.search);
+  const draft = params.get('draft');
+  const openChannel = openChannels[0];
+
+  useEffect(() => {
+    const queryUsers = client.queryUsers.bind(client);
+    client.queryUsers = (request, requestOptions) =>
+      queryUsers(
+        {
+          ...request,
+          payload: {
+            ...request?.payload,
+            filter_conditions: {
+              $and: [request?.payload?.filter_conditions ?? {}, { id: { $in: castIds } }],
+            },
+          },
+        },
+        requestOptions,
+      );
+    return () => {
+      client.queryUsers = queryUsers;
+    };
+  }, [client]);
+
+  useEffect(() => {
+    if (params.get('simulate') !== 'new-conversation') return;
+    let cancelled = false;
+
+    void (async () => {
+      // The header renders with the channel list, after the client connects.
+      await waitFor(() => document.querySelector('.str-chat__channel-list-item'));
+      const button = await waitFor(() =>
+        document.querySelector<HTMLButtonElement>(
+          '.cookbook-channel-list-header button[aria-label="New conversation"]',
+        ),
+      );
+      if (cancelled) return;
+      button.click();
+      for (const name of params.get('people')?.split(',') ?? []) {
+        // The avatar's initials come first in the text.
+        const result = await waitFor(() =>
+          [
+            ...document.querySelectorAll<HTMLButtonElement>(
+              '.cookbook-new-conversation__result-button',
+            ),
+          ].find((element) => element.textContent?.endsWith(name)),
+        );
+        if (cancelled) return;
+        result.click();
+      }
+      const name = params.get('name');
+      if (name) {
+        // The name field is the dialog's only input that isn't the search.
+        const input = await waitFor(() =>
+          document.querySelector<HTMLInputElement>(
+            '.cookbook-new-conversation input:not([type="search"])',
+          ),
+        );
+        if (cancelled) return;
+        typeInto(input, name);
+      }
+      if (params.get('start') === '1') {
+        // Enabled once the picked people have rendered.
+        const submit = await waitFor(() =>
+          document.querySelector<HTMLButtonElement>(
+            '.cookbook-new-conversation [type="submit"]:not(:disabled)',
+          ),
+        );
+        if (!cancelled) submit.click();
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+    // Runs once: the URL is read on load.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    // Types only into the conversation the dialog opened, not the channel `?channel=` opened first.
+    if (!draft || !openChannel || openChannel.id === params.get('channel')) return;
+    let cancelled = false;
+
+    void (async () => {
+      const textarea = await waitFor(() =>
+        document.querySelector<HTMLTextAreaElement>('.str-chat__channel textarea'),
+      );
+      if (cancelled) return;
+      textarea.focus();
+      await openChannel.messageComposer.textComposer.handleChange({
+        selection: { end: draft.length, start: draft.length },
+        text: draft,
+      });
+      if (cancelled || params.get('send') !== '1') return;
+      const send = await waitFor(() =>
+        document.querySelector<HTMLButtonElement>(
+          '.str-chat__channel .str-chat__send-button:not(:disabled)',
+        ),
+      );
+      if (!cancelled) send.click();
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+    // Types once per opened channel.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [openChannel]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/channel-list/starting-a-conversation/default.recipe.tsx b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/default.recipe.tsx
new file mode 100644
index 0000000000..b6f1ecec0a
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/default.recipe.tsx
@@ -0,0 +1,12 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { WithNewConversation } from './NewConversationButton';
+import { SimulateNewConversation } from './SimulateNewConversation';
+
+// A New conversation button in the channel list header. SimulateNewConversation only serves the
+// screenshots: it sits inside ChatView, where the open channels are known.
+const recipe: RecipeConfig = {
+  chatViewChildren: <SimulateNewConversation />,
+  Wrapper: WithNewConversation,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/channel-list/starting-a-conversation/shots.json b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/shots.json
new file mode 100644
index 0000000000..be99161a4f
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/shots.json
@@ -0,0 +1,63 @@
+[
+  {
+    "file": "new-conversation-picker.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "new-conversation",
+      "people": "Cara,Dan",
+      "name": "Plant swap"
+    },
+    "waitFor": ".cookbook-new-conversation__chip + .cookbook-new-conversation__chip",
+    "clip": ".cookbook-new-conversation",
+    "padding": 16,
+    "settleMs": 1500
+  },
+  {
+    "file": "new-conversation-button.png",
+    "query": {
+      "channel": "docs-v15-cb-design"
+    },
+    "waitFor": ".cookbook-channel-list-header button",
+    "clip": ".str-chat__channel-list",
+    "padding": 0
+  },
+  {
+    "file": "new-conversation-draft.png",
+    "query": {
+      "simulate": "new-conversation",
+      "people": "Dan",
+      "start": "1",
+      "draft": "Hi Dan, are you coming to the plant swap on Saturday?"
+    },
+    "waitFor": ".str-chat__channel textarea",
+    "settleMs": 2500
+  },
+  {
+    "file": "new-conversation-existing.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "new-conversation",
+      "people": "Bob",
+      "name": "Lunch plans",
+      "start": "1"
+    },
+    "waitFor": ".str-chat__channel .str-chat__notification--info",
+    "clip": ".str-chat__channel",
+    "padding": 0,
+    "settleMs": 1000
+  },
+  {
+    "file": "new-conversation-sending.png",
+    "query": {
+      "simulate": "new-conversation",
+      "people": "Dan",
+      "start": "1",
+      "draft": "Hi Dan, are you coming to the plant swap on Saturday?",
+      "send": "1"
+    },
+    "waitFor": ".str-chat__message--sending",
+    "clip": ".str-chat__channel",
+    "padding": 0,
+    "settleMs": 1500
+  }
+]
diff --git a/examples/cookbook/src/recipes/channel-list/starting-a-conversation/startConversation.ts b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/startConversation.ts
new file mode 100644
index 0000000000..5b1205205d
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/startConversation.ts
@@ -0,0 +1,87 @@
+import { localMessageToNewMessagePayload } from 'stream-chat';
+import type {
+  Channel,
+  ChannelMemberResponse,
+  OperationRequestFn,
+  StreamChat,
+  UserResponse,
+} from 'stream-chat';
+
+/** A two-member channel is their direct conversation if made from its members, or unnamed. */
+export const isDirectConversation = (channel: Channel) =>
+  !!channel.id?.startsWith('!members-') || !('name' in (channel.data?.custom ?? {}));
+
+/**
+ * The user's direct conversation with another user, if they have one (see
+ * `isDirectConversation()`). The query only reads: it creates nothing, and it watches what it finds,
+ * so the conversation opens with its history and receives events.
+ */
+export const findDirectConversation = async (client: StreamChat, userId: string) => {
+  const channels = await client.queryChannelsAndHydrate({
+    // Exactly the two of them: both are members, and there are two members. The server doesn't
+    // take `$eq` on `members`.
+    filter_conditions: {
+      $and: [{ members: { $in: [client.userId ?? ''] } }, { members: { $in: [userId] } }],
+      member_count: 2,
+      type: 'messaging',
+    },
+  });
+  return channels.find(isDirectConversation);
+};
+
+/**
+ * A conversation with `people` that exists only in this client until its first message: a channel
+ * created from its members, without an id, so it's provisional (`Channel.isProvisional`). If the
+ * client already has a loaded conversation created from exactly these members, `client.channel()`
+ * returns that one instead.
+ */
+export const startLocalConversation = (
+  client: StreamChat,
+  people: UserResponse[],
+  name: string,
+): Channel => {
+  const channel = client.channel('messaging', {
+    // Sent with the query that creates the channel on the first send.
+    ...(name ? { custom: { name } } : {}),
+    members: [client.userId ?? '', ...people.map(({ id }) => id)].map((user_id) => ({
+      user_id,
+    })),
+  });
+  if (!channel.isProvisional || channel.messagePaginator.hasResults) return channel;
+
+  // Nothing is loaded for a channel the server doesn't have yet, so the app fills in what the
+  // channel shows until then: its members, the user first, and an empty first page of messages,
+  // shorter than a page, so the message list has nothing older to load. The members carry only the
+  // user: the server's members replace them when the channel is created.
+  const me = client.user as UserResponse;
+  channel.state.members = Object.fromEntries(
+    [me, ...people].map((user) => [
+      user.id,
+      { user, user_id: user.id } as ChannelMemberResponse,
+    ]),
+  );
+  channel.messagePaginator.placeExternalQueryPage([], channel.messagePaginator.pageSize);
+  return channel;
+};
+
+/**
+ * Sends the first message of a provisional channel: `Channel.watch()` creates the channel on the
+ * server, with its members and name, and resolves with the object to use from then on. That's this
+ * one, or the one that superseded it when the client already had the channel under its real cid.
+ * Messages in every other channel are sent the usual way.
+ */
+export const createOnFirstSend =
+  (client: StreamChat): OperationRequestFn<'send'> =>
+  async (params, defaultRequest) => {
+    const channel = client.channelManager.get(params.localMessage.cid);
+    if (!channel?.isProvisional) return defaultRequest(params);
+
+    const created = await channel.watch();
+    // Shows the new channel in the channel lists whose filters it matches.
+    client.channelManager.ingestChannel(created);
+    const { message } = await created.sendMessage({
+      message: params.message ?? localMessageToNewMessagePayload(params.localMessage),
+      ...params.options,
+    });
+    return { message };
+  };
diff --git a/examples/cookbook/src/recipes/channel-list/starting-a-conversation/usePeopleSearch.ts b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/usePeopleSearch.ts
new file mode 100644
index 0000000000..7a33121232
--- /dev/null
+++ b/examples/cookbook/src/recipes/channel-list/starting-a-conversation/usePeopleSearch.ts
@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { UserSearchSource } from 'stream-chat';
+import type { SearchSourceState, UserResponse } from 'stream-chat';
+import { useChatContext, useStateStore } from 'stream-chat-react';
+
+const resultsSelector = ({
+  isLoading,
+  items,
+  lastQueryError,
+}: SearchSourceState<UserResponse>) => ({ isLoading, items, lastQueryError });
+
+/**
+ * People to start a conversation with, by name or id, sorted by name. An empty text lists everyone,
+ * so the dialog has suggestions before the user types. The user isn't among the results.
+ */
+export const usePeopleSearch = (text: string) => {
+  const { client } = useChatContext();
+  const [source] = useState(
+    () =>
+      new UserSearchSource(client, {
+        allowEmptySearchString: true,
+        pageSize: 10,
+        sort: [{ direction: 1, field: 'name' }],
+      }),
+  );
+  const { isLoading, items, lastQueryError } = useStateStore(
+    source.state,
+    resultsSelector,
+  );
+
+  useEffect(() => {
+    source.activate();
+    // Waits for a pause in typing, and cancels the query of the text before.
+    void source.search(text.trim());
+  }, [source, text]);
+
+  // Drops the scheduled query and the one in flight when the dialog closes.
+  useEffect(
+    () => () => {
+      source.cancelScheduledQuery();
+      source.resetState();
+    },
+    [source],
+  );
+
+  return { failed: !!lastQueryError, isLoading, people: items ?? [] };
+};
diff --git a/examples/cookbook/src/recipes/composer/attachment-previews/CustomAttachmentPreviewList.css b/examples/cookbook/src/recipes/composer/attachment-previews/CustomAttachmentPreviewList.css
new file mode 100644
index 0000000000..9524a47b9c
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/attachment-previews/CustomAttachmentPreviewList.css
@@ -0,0 +1,22 @@
+@layer stream-overrides {
+  .cookbook-event-preview {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-max);
+    background: var(--str-chat__background-core-surface-card);
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-event-preview__remove {
+    display: flex;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--str-chat__text-secondary);
+    cursor: pointer;
+  }
+}
diff --git a/examples/cookbook/src/recipes/composer/attachment-previews/CustomAttachmentPreviewList.tsx b/examples/cookbook/src/recipes/composer/attachment-previews/CustomAttachmentPreviewList.tsx
new file mode 100644
index 0000000000..2aa137fa94
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/attachment-previews/CustomAttachmentPreviewList.tsx
@@ -0,0 +1,42 @@
+import type { PropsWithChildren } from 'react';
+import type { UnsupportedAttachmentPreviewProps } from 'stream-chat-react';
+import {
+  AttachmentPreviewList,
+  UnsupportedAttachmentPreview,
+  useComponentContextIcons,
+  WithComponents,
+} from 'stream-chat-react';
+import './CustomAttachmentPreviewList.css';
+
+const EventOrUnsupportedPreview = (props: UnsupportedAttachmentPreviewProps) => {
+  const { IconXmarkSmall } = useComponentContextIcons();
+  const { attachment, removeAttachments } = props;
+
+  if (attachment.type !== 'event') {
+    return <UnsupportedAttachmentPreview {...props} />;
+  }
+
+  return (
+    <div className='cookbook-event-preview'>
+      <span className='cookbook-event-preview__title'>📅 {attachment.title}</span>
+      <button
+        aria-label='Remove event'
+        className='cookbook-event-preview__remove'
+        onClick={() => removeAttachments([attachment.localMetadata.id])}
+        type='button'
+      >
+        <IconXmarkSmall />
+      </button>
+    </div>
+  );
+};
+
+export const CustomAttachmentPreviewList = () => (
+  <AttachmentPreviewList UnsupportedAttachmentPreview={EventOrUnsupportedPreview} />
+);
+
+const overrides = { AttachmentPreviewList: CustomAttachmentPreviewList };
+
+export const WithEventPreviews = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/composer/attachment-previews/DemoAttachments.tsx b/examples/cookbook/src/recipes/composer/attachment-previews/DemoAttachments.tsx
new file mode 100644
index 0000000000..2a099d0aea
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/attachment-previews/DemoAttachments.tsx
@@ -0,0 +1,138 @@
+import { useEffect } from 'react';
+import type { LocalAttachment } from 'stream-chat';
+import { useChatContext } from 'stream-chat-react';
+
+/**
+ * For the screenshots only, not part of the recipe: `?attachments=images|event|voice` adds
+ * attachments to the channel's composer (`?channel=`) on this device, as if the user had picked
+ * them. Nothing is uploaded or sent.
+ */
+
+// Gradient tiles in the SDK's default blues, drawn locally so no image is fetched.
+const drawTile = async (from: string, to: string) => {
+  const canvas = document.createElement('canvas');
+  canvas.width = canvas.height = 96;
+  const context = canvas.getContext('2d');
+  if (context) {
+    const gradient = context.createLinearGradient(0, 0, 96, 96);
+    gradient.addColorStop(0, from);
+    gradient.addColorStop(1, to);
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, 96, 96);
+  }
+  const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve));
+  return new File([blob ?? new Blob()], 'tile.png', { type: 'image/png' });
+};
+
+// One second of silence, so the audio player has something to load.
+const silentWav = () => {
+  const sampleRate = 8000;
+  const buffer = new ArrayBuffer(44 + sampleRate);
+  const view = new DataView(buffer);
+  const write = (offset: number, text: string) =>
+    [...text].forEach((char, index) => view.setUint8(offset + index, char.charCodeAt(0)));
+  write(0, 'RIFF');
+  view.setUint32(4, 36 + sampleRate, true);
+  write(8, 'WAVEfmt ');
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
+  view.setUint16(22, 1, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate, true);
+  view.setUint16(32, 1, true);
+  view.setUint16(34, 8, true);
+  write(36, 'data');
+  view.setUint32(40, sampleRate, true);
+  new Uint8Array(buffer, 44).fill(128);
+  return new File([buffer], 'voice-message.wav', { type: 'audio/wav' });
+};
+
+const buildAttachments = (kind: string): Promise<LocalAttachment[]> => {
+  if (kind === 'images') {
+    const tiles = [
+      ['#a5c5ff', '#005fff', 'finished', undefined],
+      ['#c3d9ff', '#4586ff', 'finished', undefined],
+      ['#e3edff', '#78a8ff', 'uploading', 60],
+    ] as const;
+    return Promise.all(
+      tiles.map(async ([from, to, uploadState, uploadProgress], index) => {
+        const file = await drawTile(from, to);
+        return {
+          custom: {},
+          fallback: file.name,
+          localMetadata: {
+            file,
+            id: `cookbook-demo-image-${index}`,
+            previewUri: URL.createObjectURL(file),
+            uploadProgress,
+            uploadState,
+          },
+          type: 'image',
+        };
+      }),
+    );
+  }
+  if (kind === 'event') {
+    return Promise.resolve([
+      {
+        custom: {},
+        // The type requires a file and an upload state, though an event has nothing to upload.
+        localMetadata: {
+          file: new File([], 'event'),
+          id: 'cookbook-demo-event',
+          uploadState: 'finished',
+        },
+        title: 'Garden plot meetup, Saturday 10:00',
+        type: 'event',
+      },
+    ]);
+  }
+  if (kind === 'voice') {
+    const file = silentWav();
+    return Promise.resolve([
+      {
+        custom: { duration: 1 },
+        localMetadata: {
+          file,
+          id: 'cookbook-demo-voice',
+          previewUri: URL.createObjectURL(file),
+          uploadState: 'finished',
+        },
+        title: file.name,
+        type: 'voiceRecording',
+      },
+    ]);
+  }
+  return Promise.resolve([]);
+};
+
+export const DemoAttachments = () => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const channelId = params.get('channel');
+    const kind = params.get('attachments');
+    if (!channelId || !kind) return;
+
+    let cancelled = false;
+    let timer: ReturnType<typeof setInterval> | undefined;
+    void buildAttachments(kind).then((attachments) => {
+      // Waits for the channel's composer to be on screen: it resets its state while it sets up.
+      timer = setInterval(() => {
+        if (cancelled || !document.querySelector('.str-chat__channel textarea')) return;
+        clearInterval(timer);
+        client
+          .channel('messaging', channelId)
+          .messageComposer.attachmentManager.upsertAttachments(attachments);
+      }, 200);
+    });
+
+    return () => {
+      cancelled = true;
+      if (timer) clearInterval(timer);
+    };
+  }, [client]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/composer/attachment-previews/ImageAttachmentPreview.css b/examples/cookbook/src/recipes/composer/attachment-previews/ImageAttachmentPreview.css
new file mode 100644
index 0000000000..36a5939833
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/attachment-previews/ImageAttachmentPreview.css
@@ -0,0 +1,65 @@
+@layer stream-overrides {
+  .cookbook-image-preview {
+    position: relative;
+  }
+
+  .cookbook-image-preview__thumbnail {
+    overflow: hidden;
+    width: 48px;
+    height: 48px;
+    padding: 0;
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__background-core-surface-subtle);
+    cursor: pointer;
+  }
+
+  .cookbook-image-preview__thumbnail:disabled {
+    cursor: default;
+  }
+
+  .cookbook-image-preview__thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* The progress ring sits over the thumbnail. */
+  .cookbook-image-preview__progress {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__background-core-overlay-light);
+    pointer-events: none;
+  }
+
+  /* A file that can't be uploaded shows the error mark over a dimmed thumbnail. */
+  .cookbook-image-preview__error {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--str-chat__border-utility-error);
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__background-core-overlay-light);
+    color: var(--str-chat__accent-error);
+    pointer-events: none;
+  }
+
+  .cookbook-image-preview__retry {
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    padding: var(--str-chat__spacing-xxs);
+    border: 0;
+    border-radius: var(--str-chat__radius-max);
+    background: var(--str-chat__accent-error);
+    color: var(--str-chat__text-on-accent);
+    font: var(--str-chat__font-caption-emphasis);
+    cursor: pointer;
+  }
+}
diff --git a/examples/cookbook/src/recipes/composer/attachment-previews/ImageAttachmentPreview.tsx b/examples/cookbook/src/recipes/composer/attachment-previews/ImageAttachmentPreview.tsx
new file mode 100644
index 0000000000..d99b908a0f
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/attachment-previews/ImageAttachmentPreview.tsx
@@ -0,0 +1,71 @@
+import { isUploadConfirmationPending } from 'stream-chat';
+import type { ImageAttachmentPreviewProps } from 'stream-chat-react';
+import {
+  RemoveAttachmentPreviewButton,
+  UploadProgressIndicator,
+  useComponentContextIcons,
+} from 'stream-chat-react';
+
+export const ImageAttachmentPreview = ({
+  attachment,
+  handleRetry,
+  openPreview,
+  removeAttachments,
+}: ImageAttachmentPreviewProps) => {
+  const { IconExclamationMark } = useComponentContextIcons();
+  const { id, previewUri, uploadPermissionCheck, uploadProgress, uploadState } =
+    attachment.localMetadata;
+  // The local file until the upload finishes, then the uploaded image.
+  const src = attachment.image_url || previewUri;
+  // Blocked, or over the size limit: retrying can't help, so the preview only shows the error.
+  const cannotUpload =
+    uploadState === 'blocked' || uploadPermissionCheck?.reason === 'size_limit';
+  const canRetry = uploadState === 'failed' && !cannotUpload;
+
+  return (
+    <div className='cookbook-image-preview'>
+      <button
+        aria-label='Open image'
+        className='cookbook-image-preview__thumbnail'
+        disabled={uploadState !== 'finished' || cannotUpload}
+        onClick={openPreview}
+        type='button'
+      >
+        {src && <img alt='' src={src} />}
+      </button>
+      {uploadState === 'uploading' && (
+        <div className='cookbook-image-preview__progress'>
+          <UploadProgressIndicator
+            // True while the file is sent but the server hasn't confirmed it: a spinner, not 100%.
+            uploadConfirmationPending={isUploadConfirmationPending(
+              attachment.localMetadata,
+            )}
+            uploadProgress={uploadProgress}
+          />
+        </div>
+      )}
+      {cannotUpload && (
+        <div
+          aria-label="Can't upload"
+          className='cookbook-image-preview__error'
+          role='img'
+        >
+          <IconExclamationMark />
+        </div>
+      )}
+      {canRetry && (
+        <button
+          className='cookbook-image-preview__retry'
+          onClick={() => handleRetry(attachment)}
+          type='button'
+        >
+          Retry
+        </button>
+      )}
+      <RemoveAttachmentPreviewButton
+        onClick={() => removeAttachments([id])}
+        uploadState={uploadState}
+      />
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/composer/attachment-previews/UploadPercent.css b/examples/cookbook/src/recipes/composer/attachment-previews/UploadPercent.css
new file mode 100644
index 0000000000..aafcb739c9
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/attachment-previews/UploadPercent.css
@@ -0,0 +1,9 @@
+@layer stream-overrides {
+  .cookbook-upload-percent {
+    padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xs);
+    border-radius: var(--str-chat__radius-max);
+    background: var(--str-chat__background-core-elevation-1);
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+}
diff --git a/examples/cookbook/src/recipes/composer/attachment-previews/UploadPercent.tsx b/examples/cookbook/src/recipes/composer/attachment-previews/UploadPercent.tsx
new file mode 100644
index 0000000000..01301fd2ec
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/attachment-previews/UploadPercent.tsx
@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from 'react';
+import type { ProgressIndicatorProps } from 'stream-chat-react';
+import { WithComponents } from 'stream-chat-react';
+import './UploadPercent.css';
+
+const UploadPercent = ({ percent }: ProgressIndicatorProps) => (
+  <span className='cookbook-upload-percent'>{Math.round(percent)}%</span>
+);
+
+const overrides = { ProgressIndicator: UploadPercent };
+
+export const WithUploadPercent = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/composer/attachment-previews/VoiceRecordingPreview.css b/examples/cookbook/src/recipes/composer/attachment-previews/VoiceRecordingPreview.css
new file mode 100644
index 0000000000..d453a350c4
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/attachment-previews/VoiceRecordingPreview.css
@@ -0,0 +1,14 @@
+@layer stream-overrides {
+  .cookbook-voice-preview {
+    position: relative;
+    width: fit-content;
+    padding: var(--str-chat__spacing-xxs);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-max);
+    background: var(--str-chat__background-core-surface-subtle);
+  }
+
+  .cookbook-voice-preview audio {
+    height: 32px;
+  }
+}
diff --git a/examples/cookbook/src/recipes/composer/attachment-previews/VoiceRecordingPreview.tsx b/examples/cookbook/src/recipes/composer/attachment-previews/VoiceRecordingPreview.tsx
new file mode 100644
index 0000000000..1fa7f00ffa
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/attachment-previews/VoiceRecordingPreview.tsx
@@ -0,0 +1,35 @@
+import type { PropsWithChildren } from 'react';
+import type { VoiceRecordingPreviewProps } from 'stream-chat-react';
+import {
+  RemoveAttachmentPreviewButton,
+  VoiceRecordingPreviewSlot,
+  WithComponents,
+} from 'stream-chat-react';
+import './VoiceRecordingPreview.css';
+
+const CompactVoiceRecordingPreview = ({
+  attachment,
+  removeAttachments,
+}: VoiceRecordingPreviewProps) => {
+  const { id, previewUri, uploadState } = attachment.localMetadata;
+
+  return (
+    <div className='cookbook-voice-preview'>
+      <audio controls src={attachment.asset_url || previewUri} />
+      <RemoveAttachmentPreviewButton
+        onClick={() => removeAttachments([id])}
+        uploadState={uploadState}
+      />
+    </div>
+  );
+};
+
+const CustomVoiceRecordingPreviewSlot = () => (
+  <VoiceRecordingPreviewSlot VoiceRecordingPreview={CompactVoiceRecordingPreview} />
+);
+
+const overrides = { VoiceRecordingPreviewSlot: CustomVoiceRecordingPreviewSlot };
+
+export const WithVoicePreview = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/composer/attachment-previews/WithSquareImagePreviews.tsx b/examples/cookbook/src/recipes/composer/attachment-previews/WithSquareImagePreviews.tsx
new file mode 100644
index 0000000000..355e437000
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/attachment-previews/WithSquareImagePreviews.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import { AttachmentPreviewList, WithComponents } from 'stream-chat-react';
+import { ImageAttachmentPreview } from './ImageAttachmentPreview';
+import './ImageAttachmentPreview.css';
+
+const CustomAttachmentPreviewList = () => (
+  <AttachmentPreviewList ImageAttachmentPreview={ImageAttachmentPreview} />
+);
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { AttachmentPreviewList: CustomAttachmentPreviewList };
+
+export const WithSquareImagePreviews = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/composer/attachment-previews/default.recipe.tsx b/examples/cookbook/src/recipes/composer/attachment-previews/default.recipe.tsx
new file mode 100644
index 0000000000..3bd3d6724e
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/attachment-previews/default.recipe.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { DemoAttachments } from './DemoAttachments';
+import { WithSquareImagePreviews } from './WithSquareImagePreviews';
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithSquareImagePreviews>
+    <DemoAttachments />
+    {children}
+  </WithSquareImagePreviews>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/composer/attachment-previews/event.recipe.tsx b/examples/cookbook/src/recipes/composer/attachment-previews/event.recipe.tsx
new file mode 100644
index 0000000000..07755c5b2c
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/attachment-previews/event.recipe.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { DemoAttachments } from './DemoAttachments';
+import { WithEventPreviews } from './CustomAttachmentPreviewList';
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithEventPreviews>
+    <DemoAttachments />
+    {children}
+  </WithEventPreviews>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/composer/attachment-previews/shots.json b/examples/cookbook/src/recipes/composer/attachment-previews/shots.json
new file mode 100644
index 0000000000..434a4f6e5d
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/attachment-previews/shots.json
@@ -0,0 +1,33 @@
+[
+  {
+    "file": "composer-square-image-previews.png",
+    "query": { "channel": "docs-v15-cb-design", "attachments": "images" },
+    "waitFor": ".cookbook-image-preview__progress",
+    "clip": ".str-chat__message-composer-container",
+    "padding": 0
+  },
+  {
+    "file": "composer-upload-percent.png",
+    "variant": "upload-percent",
+    "query": { "channel": "docs-v15-cb-design", "attachments": "images" },
+    "waitFor": ".cookbook-upload-percent",
+    "clip": ".str-chat__message-composer-container",
+    "padding": 0
+  },
+  {
+    "file": "composer-event-attachment-preview.png",
+    "variant": "event",
+    "query": { "channel": "docs-v15-cb-design", "attachments": "event" },
+    "waitFor": ".cookbook-event-preview",
+    "clip": ".str-chat__message-composer-container",
+    "padding": 0
+  },
+  {
+    "file": "composer-voice-recording-preview.png",
+    "variant": "voice",
+    "query": { "channel": "docs-v15-cb-design", "attachments": "voice" },
+    "waitFor": ".cookbook-voice-preview",
+    "clip": ".str-chat__message-composer-container",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/composer/attachment-previews/upload-percent.recipe.tsx b/examples/cookbook/src/recipes/composer/attachment-previews/upload-percent.recipe.tsx
new file mode 100644
index 0000000000..a1890adb68
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/attachment-previews/upload-percent.recipe.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { DemoAttachments } from './DemoAttachments';
+import { WithUploadPercent } from './UploadPercent';
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithUploadPercent>
+    <DemoAttachments />
+    {children}
+  </WithUploadPercent>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/composer/attachment-previews/voice.recipe.tsx b/examples/cookbook/src/recipes/composer/attachment-previews/voice.recipe.tsx
new file mode 100644
index 0000000000..a349049feb
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/attachment-previews/voice.recipe.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { DemoAttachments } from './DemoAttachments';
+import { WithVoicePreview } from './VoiceRecordingPreview';
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithVoicePreview>
+    <DemoAttachments />
+    {children}
+  </WithVoicePreview>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/composer/custom-composer/AlsoSendInChannel.tsx b/examples/cookbook/src/recipes/composer/custom-composer/AlsoSendInChannel.tsx
new file mode 100644
index 0000000000..e237c546c7
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-composer/AlsoSendInChannel.tsx
@@ -0,0 +1,27 @@
+import type { MessageComposerState } from 'stream-chat';
+import { useMessageComposerController, useStateStore } from 'stream-chat-react';
+
+const showReplyInChannelSelector = ({ showReplyInChannel }: MessageComposerState) => ({
+  showReplyInChannel,
+});
+
+export const AlsoSendInChannel = () => {
+  const messageComposer = useMessageComposerController();
+  const { showReplyInChannel } = useStateStore(
+    messageComposer.state,
+    showReplyInChannelSelector,
+  );
+
+  if (!messageComposer.threadId) return null;
+
+  return (
+    <label className='cookbook-composer__also-send'>
+      <input
+        checked={showReplyInChannel}
+        onChange={() => messageComposer.toggleShowReplyInChannel()}
+        type='checkbox'
+      />
+      Also send in channel
+    </label>
+  );
+};
diff --git a/examples/cookbook/src/recipes/composer/custom-composer/CustomMessageComposer.css b/examples/cookbook/src/recipes/composer/custom-composer/CustomMessageComposer.css
new file mode 100644
index 0000000000..fde1d977f1
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-composer/CustomMessageComposer.css
@@ -0,0 +1,34 @@
+@layer stream-overrides {
+  .cookbook-composer {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--str-chat__spacing-sm);
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+  }
+
+  .cookbook-composer__center {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-xs);
+    min-width: 0;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-xl);
+    background: var(--str-chat__background-core-elevation-1);
+  }
+
+  .cookbook-composer__input {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+  }
+
+  .cookbook-composer__also-send {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/composer/custom-composer/CustomMessageComposer.tsx b/examples/cookbook/src/recipes/composer/custom-composer/CustomMessageComposer.tsx
new file mode 100644
index 0000000000..6b17a0f73b
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-composer/CustomMessageComposer.tsx
@@ -0,0 +1,67 @@
+import type { MessageComposerState, TextComposerState } from 'stream-chat';
+import {
+  AttachmentPreviewList,
+  AttachmentSelector,
+  AudioRecorder,
+  CommandChip,
+  defaultAttachmentSelectorActionSet,
+  LinkPreviewList,
+  MessageComposerActions,
+  MessageComposerUI,
+  QuotedMessagePreview,
+  TextareaComposer,
+  useMessageComposerContext,
+  useMessageComposerController,
+  useStateStore,
+  VoiceRecordingPreviewSlot,
+  WithDragAndDropUpload,
+} from 'stream-chat-react';
+import { AlsoSendInChannel } from './AlsoSendInChannel';
+import './CustomMessageComposer.css';
+
+const editedMessageSelector = ({ editedMessage }: MessageComposerState) => ({
+  editedMessage,
+});
+const commandSelector = ({ command }: TextComposerState) => ({ command });
+
+// Every action of the default menu except Location.
+const attachmentActions = defaultAttachmentSelectorActionSet.filter(
+  (action) => action.type !== 'addLocation',
+);
+
+export const CustomMessageComposer = () => {
+  const { recordingController } = useMessageComposerContext();
+  const messageComposer = useMessageComposerController();
+  const { editedMessage } = useStateStore(messageComposer.state, editedMessageSelector);
+  const { command } = useStateStore(messageComposer.textComposer.state, commandSelector);
+
+  // The default UI shows the message being edited, with a button to cancel the edit.
+  if (editedMessage) return <MessageComposerUI />;
+
+  // While the user records a voice message, the recorder takes the composer's place.
+  if (recordingController.recordingState) return <AudioRecorder />;
+
+  return (
+    // Channel and Thread stack a drop zone placed directly inside them in a column.
+    // This wrapper keeps the composer's row out of that rule; it needs no styles of its own.
+    <div className='cookbook-composer-root'>
+      <WithDragAndDropUpload className='cookbook-composer' component='div'>
+        {!command && (
+          <AttachmentSelector attachmentSelectorActionSet={attachmentActions} />
+        )}
+        <div className='cookbook-composer__center'>
+          <QuotedMessagePreview />
+          <VoiceRecordingPreviewSlot />
+          <AttachmentPreviewList />
+          <LinkPreviewList />
+          <div className='cookbook-composer__input'>
+            {command && <CommandChip command={command} />}
+            <TextareaComposer />
+          </div>
+          <AlsoSendInChannel />
+        </div>
+        <MessageComposerActions />
+      </WithDragAndDropUpload>
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/composer/custom-composer/PrefillComposer.tsx b/examples/cookbook/src/recipes/composer/custom-composer/PrefillComposer.tsx
new file mode 100644
index 0000000000..3334609b73
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-composer/PrefillComposer.tsx
@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { useChatContext } from 'stream-chat-react';
+
+/**
+ * For the screenshot only, not part of the recipe: `?quote=<message id>&text=<text>` quotes that
+ * message in the channel's composer (`?channel=`) and types the text, without sending anything.
+ */
+export const PrefillComposer = () => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const channelId = params.get('channel');
+    const quoteId = params.get('quote');
+    const text = params.get('text');
+    if (!channelId || (!quoteId && !text)) return;
+
+    const channel = client.channel('messaging', channelId);
+    const timer = setInterval(() => {
+      const quoted = quoteId ? channel.messagePaginator.getItem(quoteId) : undefined;
+      if (quoteId && !quoted) return;
+      clearInterval(timer);
+      if (quoted) channel.messageComposer.setQuotedMessage(quoted);
+      if (text) channel.messageComposer.textComposer.setText(text);
+    }, 200);
+
+    return () => clearInterval(timer);
+  }, [client]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/composer/custom-composer/WithCustomComposer.tsx b/examples/cookbook/src/recipes/composer/custom-composer/WithCustomComposer.tsx
new file mode 100644
index 0000000000..bb9aabdcae
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-composer/WithCustomComposer.tsx
@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from 'react';
+import { WithComponents } from 'stream-chat-react';
+import { CustomMessageComposer } from './CustomMessageComposer';
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { MessageComposerUI: CustomMessageComposer };
+
+export const WithCustomComposer = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/composer/custom-composer/default.recipe.tsx b/examples/cookbook/src/recipes/composer/custom-composer/default.recipe.tsx
new file mode 100644
index 0000000000..0db00d541a
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-composer/default.recipe.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { WithCustomComposer } from './WithCustomComposer';
+import { PrefillComposer } from './PrefillComposer';
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithCustomComposer>
+    <PrefillComposer />
+    {children}
+  </WithCustomComposer>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/composer/custom-composer/shots.json b/examples/cookbook/src/recipes/composer/custom-composer/shots.json
new file mode 100644
index 0000000000..e8ff215e5c
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-composer/shots.json
@@ -0,0 +1,13 @@
+[
+  {
+    "file": "custom-composer-layout.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "quote": "docs-v15-ck-design-6",
+      "text": "Sounds good, thanks!"
+    },
+    "waitFor": ".cookbook-composer .str-chat__quoted-message-preview",
+    "clip": ".cookbook-composer",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/composer/custom-suggestions/CustomAutocompleteSuggestionItem.tsx b/examples/cookbook/src/recipes/composer/custom-suggestions/CustomAutocompleteSuggestionItem.tsx
new file mode 100644
index 0000000000..34e1479917
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-suggestions/CustomAutocompleteSuggestionItem.tsx
@@ -0,0 +1,6 @@
+import type { SuggestionItemProps } from 'stream-chat-react';
+import { SuggestionListItem } from 'stream-chat-react';
+
+export const CustomAutocompleteSuggestionItem = (props: SuggestionItemProps) => (
+  <SuggestionListItem {...props} className='cookbook-suggestion-item' />
+);
diff --git a/examples/cookbook/src/recipes/composer/custom-suggestions/CustomSuggestionList.css b/examples/cookbook/src/recipes/composer/custom-suggestions/CustomSuggestionList.css
new file mode 100644
index 0000000000..df5768a830
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-suggestions/CustomSuggestionList.css
@@ -0,0 +1,21 @@
+@layer stream-overrides {
+  .cookbook-suggestion-row {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+    width: 100%;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 0;
+    border-radius: var(--str-chat__radius-lg);
+    background: none;
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-default);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  /* The SDK marks the row the arrow keys reached with this class. */
+  .cookbook-suggestion-row.str-chat__suggestion-list-item--selected {
+    background: var(--str-chat__background-utility-selected);
+  }
+}
diff --git a/examples/cookbook/src/recipes/composer/custom-suggestions/CustomSuggestionList.tsx b/examples/cookbook/src/recipes/composer/custom-suggestions/CustomSuggestionList.tsx
new file mode 100644
index 0000000000..070b677d55
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-suggestions/CustomSuggestionList.tsx
@@ -0,0 +1,50 @@
+import type { MentionSuggestion } from 'stream-chat';
+import type {
+  SuggestionListItemComponentProps,
+  SuggestionListProps,
+  UserItemProps,
+} from 'stream-chat-react';
+import {
+  Avatar,
+  defaultComponents,
+  MentionItem,
+  SuggestionList,
+} from 'stream-chat-react';
+
+const CustomUserItem = ({
+  className,
+  entity,
+  // Kept off the button: the list already gives the focused row its class.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  focused,
+  ...buttonProps
+}: UserItemProps) => {
+  const title = entity.name ?? entity.id;
+  if (!title) return null;
+
+  return (
+    <button
+      {...buttonProps}
+      // Keeps the classes the list passes, such as the one for the focused row.
+      className={`${className ?? ''} cookbook-suggestion-row`}
+      type='button'
+    >
+      <Avatar imageUrl={entity.image} size='sm' userName={title} />
+      <span>{title}</span>
+    </button>
+  );
+};
+
+const CustomMentionItem = (props: SuggestionListItemComponentProps) => (
+  <MentionItem
+    {...props}
+    entity={props.entity as MentionSuggestion}
+    UserItem={CustomUserItem}
+  />
+);
+
+const rows = { ...defaultComponents, '@': CustomMentionItem };
+
+export const CustomSuggestionList = (props: SuggestionListProps) => (
+  <SuggestionList {...props} suggestionItemComponents={rows} />
+);
diff --git a/examples/cookbook/src/recipes/composer/custom-suggestions/GroupMentionItem.tsx b/examples/cookbook/src/recipes/composer/custom-suggestions/GroupMentionItem.tsx
new file mode 100644
index 0000000000..fe6798155e
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-suggestions/GroupMentionItem.tsx
@@ -0,0 +1,31 @@
+import type { MentionSuggestion } from 'stream-chat';
+import type {
+  SuggestionListItemComponentProps,
+  UserGroupItemProps,
+} from 'stream-chat-react';
+import { MentionItem } from 'stream-chat-react';
+
+const CustomUserGroupItem = ({
+  className,
+  entity,
+  // Kept off the button: the list already gives the focused row its class.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  focused,
+  ...buttonProps
+}: UserGroupItemProps) => (
+  <button
+    {...buttonProps}
+    className={`${className ?? ''} cookbook-suggestion-row`}
+    type='button'
+  >
+    👥 {entity.name}
+  </button>
+);
+
+export const GroupMentionItem = (props: SuggestionListItemComponentProps) => (
+  <MentionItem
+    {...props}
+    entity={props.entity as MentionSuggestion}
+    UserGroupItem={CustomUserGroupItem}
+  />
+);
diff --git a/examples/cookbook/src/recipes/composer/custom-suggestions/StyledSuggestionList.css b/examples/cookbook/src/recipes/composer/custom-suggestions/StyledSuggestionList.css
new file mode 100644
index 0000000000..8df47d0d5a
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-suggestions/StyledSuggestionList.css
@@ -0,0 +1,10 @@
+@layer stream-overrides {
+  .cookbook-suggestion-list {
+    min-width: 240px;
+    padding: var(--str-chat__spacing-xs);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-2xl);
+    background: var(--str-chat__background-core-elevation-1);
+    box-shadow: var(--str-chat__box-shadow-3);
+  }
+}
diff --git a/examples/cookbook/src/recipes/composer/custom-suggestions/StyledSuggestionList.tsx b/examples/cookbook/src/recipes/composer/custom-suggestions/StyledSuggestionList.tsx
new file mode 100644
index 0000000000..db9ccc8cc9
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-suggestions/StyledSuggestionList.tsx
@@ -0,0 +1,7 @@
+import type { SuggestionListProps } from 'stream-chat-react';
+import { SuggestionList } from 'stream-chat-react';
+import './StyledSuggestionList.css';
+
+export const StyledSuggestionList = (props: SuggestionListProps) => (
+  <SuggestionList {...props} className='cookbook-suggestion-list' />
+);
diff --git a/examples/cookbook/src/recipes/composer/custom-suggestions/SuggestionListWithTags.tsx b/examples/cookbook/src/recipes/composer/custom-suggestions/SuggestionListWithTags.tsx
new file mode 100644
index 0000000000..dd54602004
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-suggestions/SuggestionListWithTags.tsx
@@ -0,0 +1,30 @@
+import type {
+  SuggestionListItemComponentProps,
+  SuggestionListProps,
+} from 'stream-chat-react';
+import { defaultComponents, SuggestionList } from 'stream-chat-react';
+
+type Tag = { id: string; name: string };
+
+const TagItem = ({
+  className,
+  entity,
+  // Kept off the button: the list already gives the focused row its class.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  focused,
+  ...buttonProps
+}: SuggestionListItemComponentProps) => (
+  <button
+    {...buttonProps}
+    className={`${className ?? ''} cookbook-suggestion-row`}
+    type='button'
+  >
+    #{(entity as Tag).name}
+  </button>
+);
+
+const rows = { ...defaultComponents, '#': TagItem };
+
+export const SuggestionListWithTags = (props: SuggestionListProps) => (
+  <SuggestionList {...props} suggestionItemComponents={rows} />
+);
diff --git a/examples/cookbook/src/recipes/composer/custom-suggestions/TypeFromUrl.tsx b/examples/cookbook/src/recipes/composer/custom-suggestions/TypeFromUrl.tsx
new file mode 100644
index 0000000000..f13a6237ff
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-suggestions/TypeFromUrl.tsx
@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { useChatContext } from 'stream-chat-react';
+
+/**
+ * For the screenshots only, not part of the recipe: `?type=<text>` types the text into the
+ * channel's composer (`?channel=`), the way a keystroke does, so its suggestions open. Nothing is
+ * sent.
+ */
+export const TypeFromUrl = () => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const channelId = params.get('channel');
+    const text = params.get('type');
+    if (!channelId || !text) return;
+
+    const timer = setInterval(() => {
+      const textarea = document.querySelector<HTMLTextAreaElement>(
+        '.str-chat__channel textarea',
+      );
+      if (!textarea) return;
+      clearInterval(timer);
+      textarea.focus();
+      void client
+        .channel('messaging', channelId)
+        .messageComposer.textComposer.handleChange({
+          selection: { end: text.length, start: text.length },
+          text,
+        });
+    }, 200);
+
+    return () => clearInterval(timer);
+  }, [client]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/composer/custom-suggestions/WithCustomSuggestionList.tsx b/examples/cookbook/src/recipes/composer/custom-suggestions/WithCustomSuggestionList.tsx
new file mode 100644
index 0000000000..dba785912d
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-suggestions/WithCustomSuggestionList.tsx
@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from 'react';
+import { WithComponents } from 'stream-chat-react';
+import { CustomSuggestionList } from './CustomSuggestionList';
+import './CustomSuggestionList.css';
+
+const overrides = { AutocompleteSuggestionList: CustomSuggestionList };
+
+export const WithCustomSuggestionList = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/composer/custom-suggestions/default.recipe.tsx b/examples/cookbook/src/recipes/composer/custom-suggestions/default.recipe.tsx
new file mode 100644
index 0000000000..2327e379de
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-suggestions/default.recipe.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { TypeFromUrl } from './TypeFromUrl';
+import { WithCustomSuggestionList } from './WithCustomSuggestionList';
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithCustomSuggestionList>
+    <TypeFromUrl />
+    {children}
+  </WithCustomSuggestionList>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/composer/custom-suggestions/shots.json b/examples/cookbook/src/recipes/composer/custom-suggestions/shots.json
new file mode 100644
index 0000000000..9c56d8b651
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-suggestions/shots.json
@@ -0,0 +1,18 @@
+[
+  {
+    "file": "composer-custom-mention-suggestions.png",
+    "query": { "channel": "docs-v15-cb-design", "type": "Thanks @" },
+    "waitFor": ".cookbook-suggestion-row",
+    "hover": ".cookbook-suggestion-row >> nth=1",
+    "clip": ".str-chat__channel",
+    "padding": 0
+  },
+  {
+    "file": "composer-styled-suggestion-list.png",
+    "variant": "styled-list",
+    "query": { "channel": "docs-v15-cb-design", "type": "Thanks @" },
+    "waitFor": ".cookbook-suggestion-list",
+    "clip": ".str-chat__channel",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/composer/custom-suggestions/styled-list.recipe.tsx b/examples/cookbook/src/recipes/composer/custom-suggestions/styled-list.recipe.tsx
new file mode 100644
index 0000000000..c483a55e78
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/custom-suggestions/styled-list.recipe.tsx
@@ -0,0 +1,18 @@
+import type { PropsWithChildren } from 'react';
+import { WithComponents } from 'stream-chat-react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { StyledSuggestionList } from './StyledSuggestionList';
+import { TypeFromUrl } from './TypeFromUrl';
+
+const overrides = { AutocompleteSuggestionList: StyledSuggestionList };
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>
+    <TypeFromUrl />
+    {children}
+  </WithComponents>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/composer/gif-picker/DemoGifShots.tsx b/examples/cookbook/src/recipes/composer/gif-picker/DemoGifShots.tsx
new file mode 100644
index 0000000000..b717a6cd41
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/gif-picker/DemoGifShots.tsx
@@ -0,0 +1,78 @@
+import { useEffect } from 'react';
+
+/**
+ * For the screenshots only, not part of the recipe. In the channel `?channel=`, without sending
+ * anything: `?gif=<text>` opens the GIF picker and types the text into its field, and
+ * `&pick=<title>` then clicks the result with that title.
+ */
+
+type Timers = Set<ReturnType<typeof setInterval>>;
+
+/** Resolves with the element once `find` returns it. The polling interval stays in `timers` until then. */
+const waitFor = <T extends Element>(find: () => T | null | undefined, timers: Timers) =>
+  new Promise<T>((resolve) => {
+    const timer = setInterval(() => {
+      const element = find();
+      if (!element) return;
+      clearInterval(timer);
+      timers.delete(timer);
+      resolve(element);
+    }, 200);
+    timers.add(timer);
+  });
+
+export const DemoGifShots = () => {
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const text = params.get('gif');
+    const pick = params.get('pick');
+    if (!params.get('channel') || text === null) return;
+    let cancelled = false;
+    const timers: Timers = new Set();
+
+    void (async () => {
+      // Waits for the channel's messages, so the composer has finished setting up.
+      await waitFor(
+        () => document.querySelector('.str-chat__channel .str-chat__li'),
+        timers,
+      );
+      const button = await waitFor(
+        () =>
+          document.querySelector<HTMLButtonElement>(
+            '.str-chat__channel .cookbook-gif-button',
+          ),
+        timers,
+      );
+      if (cancelled) return;
+      button.click();
+      const input = await waitFor(
+        () => document.querySelector<HTMLInputElement>('.cookbook-gif-picker__input'),
+        timers,
+      );
+      if (cancelled) return;
+      // Sets the value the way typing does, so React's onChange runs.
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(
+        input,
+        text,
+      );
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+      if (!pick) return;
+      const tile = await waitFor(
+        () =>
+          document.querySelector<HTMLButtonElement>(
+            `.cookbook-gif-picker__tile[aria-label="${CSS.escape(pick)}"]`,
+          ),
+        timers,
+      );
+      if (!cancelled) tile.click();
+    })();
+
+    return () => {
+      cancelled = true;
+      timers.forEach((timer) => clearInterval(timer));
+      timers.clear();
+    };
+  }, []);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/composer/gif-picker/GifAttachmentPreview.css b/examples/cookbook/src/recipes/composer/gif-picker/GifAttachmentPreview.css
new file mode 100644
index 0000000000..ba0f2a4fc9
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/gif-picker/GifAttachmentPreview.css
@@ -0,0 +1,28 @@
+@layer stream-overrides {
+  .cookbook-gif-preview {
+    position: relative;
+    width: 96px;
+    height: 72px;
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__background-core-surface-subtle);
+  }
+
+  .cookbook-gif-preview__image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--str-chat__radius-lg);
+    object-fit: cover;
+  }
+
+  .cookbook-gif-preview__badge {
+    position: absolute;
+    inset-block-end: var(--str-chat__spacing-xxs);
+    inset-inline-start: var(--str-chat__spacing-xxs);
+    padding: 0 var(--str-chat__spacing-xxs);
+    border-radius: var(--str-chat__radius-sm);
+    background: var(--str-chat__background-core-surface-card);
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+}
diff --git a/examples/cookbook/src/recipes/composer/gif-picker/GifAttachmentPreview.tsx b/examples/cookbook/src/recipes/composer/gif-picker/GifAttachmentPreview.tsx
new file mode 100644
index 0000000000..7bc178b103
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/gif-picker/GifAttachmentPreview.tsx
@@ -0,0 +1,35 @@
+import { isGiphyAttachment } from 'stream-chat';
+import type { UnsupportedAttachmentPreviewProps } from 'stream-chat-react';
+import {
+  AttachmentPreviewList,
+  RemoveAttachmentPreviewButton,
+  UnsupportedAttachmentPreview,
+} from 'stream-chat-react';
+import './GifAttachmentPreview.css';
+
+const GifOrUnsupportedPreview = (props: UnsupportedAttachmentPreviewProps) => {
+  const { attachment, removeAttachments } = props;
+
+  if (!isGiphyAttachment(attachment)) {
+    return <UnsupportedAttachmentPreview {...props} />;
+  }
+
+  return (
+    <div className='cookbook-gif-preview'>
+      <img
+        alt={attachment.title || 'GIF'}
+        className='cookbook-gif-preview__image'
+        src={attachment.thumb_url}
+      />
+      <span className='cookbook-gif-preview__badge'>GIF</span>
+      <RemoveAttachmentPreviewButton
+        aria-label='Remove GIF'
+        onClick={() => removeAttachments([attachment.localMetadata.id])}
+      />
+    </div>
+  );
+};
+
+export const GifAttachmentPreviewList = () => (
+  <AttachmentPreviewList UnsupportedAttachmentPreview={GifOrUnsupportedPreview} />
+);
diff --git a/examples/cookbook/src/recipes/composer/gif-picker/GifButton.tsx b/examples/cookbook/src/recipes/composer/gif-picker/GifButton.tsx
new file mode 100644
index 0000000000..2ef7577ed6
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/gif-picker/GifButton.tsx
@@ -0,0 +1,101 @@
+import { useId, useState } from 'react';
+import type { TextComposerState } from 'stream-chat';
+import {
+  AdditionalMessageComposerActions,
+  Button,
+  createIcon,
+  DialogAnchor,
+  useDialog,
+  useDialogIsOpen,
+  useMessageComposerController,
+  useStateStore,
+} from 'stream-chat-react';
+import type { Gif } from './gif';
+import { toGiphyAttachment } from './gif';
+import { GifPicker } from './GifPicker';
+
+const IconGif = createIcon(
+  'IconGif',
+  <>
+    <rect
+      fill='none'
+      height='13'
+      rx='3'
+      stroke='currentColor'
+      strokeWidth='1.5'
+      width='18'
+      x='1'
+      y='3.5'
+    />
+    <text
+      fill='currentColor'
+      fontFamily='inherit'
+      fontSize='7.5'
+      fontWeight='700'
+      textAnchor='middle'
+      x='10'
+      y='12.7'
+    >
+      GIF
+    </text>
+  </>,
+);
+
+const commandSelector = ({ command }: TextComposerState) => ({ command });
+
+/** The GIF button: opens the picker above itself; picking a GIF adds it to the composer. */
+export const GifButton = () => {
+  // The channel's and the thread's composer each have a button, so each needs its own dialog.
+  const dialogId = `gif-picker-${useId()}`;
+  const dialog = useDialog({ id: dialogId });
+  const isOpen = useDialogIsOpen(dialogId);
+  const [button, setButton] = useState<HTMLButtonElement | null>(null);
+  const messageComposer = useMessageComposerController();
+  const { command } = useStateStore(messageComposer.textComposer.state, commandSelector);
+
+  // A command takes the whole composer, as the default actions next to the input assume.
+  if (command) return null;
+
+  const pick = (gif: Gif) => {
+    messageComposer.attachmentManager.upsertAttachments([toGiphyAttachment(gif)]);
+    dialog.close();
+  };
+
+  return (
+    <>
+      <Button
+        appearance='ghost'
+        aria-expanded={isOpen}
+        aria-label='Add a GIF'
+        circular
+        className='cookbook-gif-button'
+        onClick={() => dialog.toggle()}
+        ref={setButton}
+        size='sm'
+        variant='secondary'
+      >
+        <IconGif />
+      </Button>
+      <DialogAnchor
+        aria-label='Choose a GIF'
+        id={dialogId}
+        offset={8}
+        placement='top-end'
+        referenceElement={button}
+        // Out of the tab order, so opening the picker focuses its search field.
+        tabIndex={-1}
+        trapFocus
+      >
+        <GifPicker onPick={pick} />
+      </DialogAnchor>
+    </>
+  );
+};
+
+/** The area after the composer's input: the SDK's default, which holds the emoji picker, and the GIF button. */
+export const ComposerActionsWithGifButton = () => (
+  <>
+    <AdditionalMessageComposerActions />
+    <GifButton />
+  </>
+);
diff --git a/examples/cookbook/src/recipes/composer/gif-picker/GifChannel.tsx b/examples/cookbook/src/recipes/composer/gif-picker/GifChannel.tsx
new file mode 100644
index 0000000000..fcf920c5aa
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/gif-picker/GifChannel.tsx
@@ -0,0 +1,12 @@
+import type { Channel as StreamChannel } from 'stream-chat';
+import { Channel, MessageComposer, MessageList } from 'stream-chat-react';
+import { WithGifPicker } from './WithGifPicker';
+
+export const GifChannel = ({ channel }: { channel: StreamChannel }) => (
+  <WithGifPicker>
+    <Channel channel={channel}>
+      <MessageList />
+      <MessageComposer />
+    </Channel>
+  </WithGifPicker>
+);
diff --git a/examples/cookbook/src/recipes/composer/gif-picker/GifPicker.css b/examples/cookbook/src/recipes/composer/gif-picker/GifPicker.css
new file mode 100644
index 0000000000..66e14dca8c
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/gif-picker/GifPicker.css
@@ -0,0 +1,92 @@
+@layer stream-overrides {
+  .cookbook-gif-picker {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-xs);
+    width: 360px;
+    padding: var(--str-chat__spacing-sm);
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__background-core-elevation-1);
+    box-shadow: var(--str-chat__box-shadow-3);
+    color: var(--str-chat__text-primary);
+  }
+
+  .cookbook-gif-picker__input {
+    width: 100%;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-full);
+    background: var(--str-chat__background-core-surface-subtle);
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-gif-picker__input:focus-visible {
+    border-color: var(--str-chat__accent-primary);
+    outline: none;
+  }
+
+  .cookbook-gif-picker__heading {
+    padding-inline: var(--str-chat__spacing-xxs);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-gif-picker__scroller {
+    height: 264px;
+    overflow-y: auto;
+  }
+
+  .cookbook-gif-picker__grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--str-chat__spacing-xxs);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .cookbook-gif-picker__tile {
+    display: block;
+    width: 100%;
+    padding: 0;
+    border: 2px solid transparent;
+    border-radius: var(--str-chat__radius-md);
+    background: var(--str-chat__background-core-surface-subtle);
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  .cookbook-gif-picker__tile:hover,
+  .cookbook-gif-picker__tile:focus-visible {
+    border-color: var(--str-chat__accent-primary);
+    outline: none;
+  }
+
+  .cookbook-gif-picker__image {
+    display: block;
+    width: 100%;
+    aspect-ratio: 4 / 3;
+    object-fit: cover;
+  }
+
+  .cookbook-gif-picker__status {
+    margin: 0;
+    padding: var(--str-chat__spacing-sm);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+    text-align: center;
+  }
+
+  /* The status stays in the page while it has nothing to say, so it takes no room then. */
+  .cookbook-gif-picker__status:empty {
+    padding: 0;
+  }
+
+  .cookbook-gif-picker__attribution {
+    margin: 0;
+    color: var(--str-chat__text-tertiary);
+    font: var(--str-chat__font-caption-default);
+    text-align: end;
+  }
+}
diff --git a/examples/cookbook/src/recipes/composer/gif-picker/GifPicker.tsx b/examples/cookbook/src/recipes/composer/gif-picker/GifPicker.tsx
new file mode 100644
index 0000000000..5183c5bc1c
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/gif-picker/GifPicker.tsx
@@ -0,0 +1,177 @@
+import type { KeyboardEvent } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import type { SearchSourceState } from 'stream-chat';
+import { useStateStore } from 'stream-chat-react';
+import type { Gif } from './gif';
+import { GifSearchSource } from './GifSearchSource';
+import './GifPicker.css';
+
+// The grid's column count, the same as `grid-template-columns` in GifPicker.css.
+const COLUMNS = 3;
+
+// With a key the results come from Giphy, which asks apps to credit it next to them. Without one
+// they come from the recipe's own catalogue, which needs no credit.
+const GIPHY_API_KEY: string | undefined = import.meta.env.VITE_GIPHY_API_KEY;
+
+const sourceSelector = ({
+  hasNext,
+  isLoading,
+  items,
+  lastQueryError,
+  searchQuery,
+}: SearchSourceState<Gif>) => ({
+  hasNext,
+  isLoading,
+  items,
+  lastQueryError,
+  searchQuery,
+});
+
+/**
+ * A search field over a grid of GIFs: trending while the field is empty, results for its text
+ * otherwise. The next page loads when the end of the grid scrolls into view. The arrow keys move
+ * from the field into the grid and around it, and Enter picks the focused GIF.
+ */
+export const GifPicker = ({ onPick }: { onPick: (gif: Gif) => void }) => {
+  // One source per opened picker, so every opening starts with the trending GIFs.
+  const [source] = useState(
+    () =>
+      new GifSearchSource({
+        apiKey: GIPHY_API_KEY,
+        debounceMs: 300,
+        pageSize: 12,
+      }),
+  );
+  const { hasNext, isLoading, items, lastQueryError, searchQuery } = useStateStore(
+    source.state,
+    sourceSelector,
+  );
+  const [text, setText] = useState('');
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const gridRef = useRef<HTMLUListElement>(null);
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    source.activate();
+    void source.search('');
+    return () => source.cancelScheduledQuery();
+  }, [source]);
+
+  // Loads the next page once the end of the grid is in view. It waits while the typed text hasn't
+  // been searched yet: the next page and a new search share one debounce, so loading a page then
+  // would drop the new search.
+  useEffect(() => {
+    const end = endRef.current;
+    if (!end || !items?.length || !hasNext || text !== searchQuery) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) void source.search();
+      },
+      { root: scrollerRef.current, rootMargin: '0px 0px 120px 0px' },
+    );
+    observer.observe(end);
+    return () => observer.disconnect();
+  }, [hasNext, items, searchQuery, source, text]);
+
+  const focusTile = (index: number) => {
+    const tiles = gridRef.current?.querySelectorAll<HTMLButtonElement>('button');
+    const tile = tiles?.[Math.max(0, Math.min(index, tiles.length - 1))];
+    tile?.focus();
+  };
+
+  const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key !== 'ArrowDown' || !items?.length) return;
+    event.preventDefault();
+    focusTile(0);
+  };
+
+  const handleGridKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {
+    const steps: Record<string, number> = {
+      ArrowDown: COLUMNS,
+      ArrowLeft: -1,
+      ArrowRight: 1,
+      ArrowUp: -COLUMNS,
+    };
+    const step = steps[event.key];
+    if (step === undefined) return;
+    event.preventDefault();
+    const next = focusedIndex + step;
+    if (next < 0) inputRef.current?.focus();
+    else focusTile(next);
+  };
+
+  const status = lastQueryError
+    ? "Couldn't load GIFs."
+    : items?.length === 0
+      ? `No GIFs for “${searchQuery}”.`
+      : !items && isLoading
+        ? 'Loading…'
+        : undefined;
+
+  return (
+    <div className='cookbook-gif-picker'>
+      <input
+        aria-label='Search GIFs'
+        className='cookbook-gif-picker__input'
+        onChange={(event) => {
+          setText(event.target.value);
+          setFocusedIndex(0);
+          void source.search(event.target.value);
+        }}
+        onKeyDown={handleInputKeyDown}
+        placeholder='Search GIFs'
+        ref={inputRef}
+        type='search'
+        value={text}
+      />
+      <div className='cookbook-gif-picker__heading'>
+        {searchQuery ? `Results for “${searchQuery}”` : 'Trending'}
+      </div>
+      <div className='cookbook-gif-picker__scroller' ref={scrollerRef}>
+        {/* Always rendered, so screen readers announce a status when its text changes. */}
+        <p aria-live='polite' className='cookbook-gif-picker__status'>
+          {status}
+        </p>
+        {!!items?.length && (
+          <ul
+            aria-label='GIFs'
+            className='cookbook-gif-picker__grid'
+            onKeyDown={handleGridKeyDown}
+            ref={gridRef}
+          >
+            {items.map((gif, index) => (
+              <li key={gif.id}>
+                <button
+                  // Giphy titles are often empty.
+                  aria-label={gif.title || 'GIF'}
+                  className='cookbook-gif-picker__tile'
+                  onClick={() => onPick(gif)}
+                  onFocus={() => setFocusedIndex(index)}
+                  // One tile in the tab order: the arrow keys move between the others.
+                  tabIndex={index === focusedIndex ? 0 : -1}
+                  type='button'
+                >
+                  <img
+                    alt=''
+                    className='cookbook-gif-picker__image'
+                    loading='lazy'
+                    src={gif.images.fixed_width_downsampled.url}
+                  />
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+        {isLoading && !!items?.length && (
+          <p className='cookbook-gif-picker__status'>Loading more…</p>
+        )}
+        <div ref={endRef} />
+      </div>
+      {!!GIPHY_API_KEY && (
+        <p className='cookbook-gif-picker__attribution'>Powered by GIPHY</p>
+      )}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/composer/gif-picker/GifSearchSource.ts b/examples/cookbook/src/recipes/composer/gif-picker/GifSearchSource.ts
new file mode 100644
index 0000000000..9e9386f751
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/gif-picker/GifSearchSource.ts
@@ -0,0 +1,32 @@
+import { BaseSearchSource } from 'stream-chat';
+import type { SearchQueryOptions, SearchSourceOptions } from 'stream-chat';
+import { searchCatalogue } from './catalogue';
+import type { Gif } from './gif';
+import { fetchGiphyPage } from './giphy';
+
+/**
+ * Searches GIFs: Giphy's search, or its trending GIFs while the search text is empty. Without an
+ * API key, it searches the local catalogue instead.
+ */
+export class GifSearchSource extends BaseSearchSource<Gif> {
+  readonly type = 'gifs';
+  private readonly apiKey?: string;
+
+  constructor({ apiKey, ...options }: SearchSourceOptions & { apiKey?: string } = {}) {
+    // An empty search text is a query too: it loads the trending GIFs.
+    super({ allowEmptySearchString: true, ...options });
+    this.apiKey = apiKey;
+  }
+
+  protected async query(searchQuery: string, { signal }: SearchQueryOptions = {}) {
+    const page = { limit: this.pageSize, offset: this.offset ?? 0 };
+    const items = this.apiKey
+      ? await fetchGiphyPage({ apiKey: this.apiKey, page, searchQuery, signal })
+      : searchCatalogue(searchQuery, page);
+    return { items };
+  }
+
+  protected filterQueryResults(items: Gif[]) {
+    return items;
+  }
+}
diff --git a/examples/cookbook/src/recipes/composer/gif-picker/WithGifPicker.tsx b/examples/cookbook/src/recipes/composer/gif-picker/WithGifPicker.tsx
new file mode 100644
index 0000000000..c92cbf9666
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/gif-picker/WithGifPicker.tsx
@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from 'react';
+import { WithComponents } from 'stream-chat-react';
+import { GifAttachmentPreviewList } from './GifAttachmentPreview';
+import { ComposerActionsWithGifButton } from './GifButton';
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = {
+  AdditionalMessageComposerActions: ComposerActionsWithGifButton,
+  AttachmentPreviewList: GifAttachmentPreviewList,
+};
+
+export const WithGifPicker = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/composer/gif-picker/catalogue.ts b/examples/cookbook/src/recipes/composer/gif-picker/catalogue.ts
new file mode 100644
index 0000000000..13ea118731
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/gif-picker/catalogue.ts
@@ -0,0 +1,75 @@
+import type { Gif } from './gif';
+import { toImages } from './gif';
+import type { GifPage } from './giphy';
+
+/** A picsum.photos still at a given size. */
+const still = (photoId: number, width: number, height: number) => ({
+  frames: '1',
+  height: String(height),
+  size: '',
+  url: `https://picsum.photos/id/${photoId}/${width}/${height}`,
+  width: String(width),
+});
+
+/** Every rendition of the same still, in the sizes Giphy uses. */
+const stillImages = (photoId: number) =>
+  toImages({
+    fixed_height: still(photoId, 267, 200),
+    fixed_height_downsampled: still(photoId, 267, 200),
+    fixed_height_still: still(photoId, 267, 200),
+    fixed_width: still(photoId, 200, 150),
+    fixed_width_downsampled: still(photoId, 200, 150),
+    fixed_width_still: still(photoId, 200, 150),
+    original: still(photoId, 800, 600),
+  });
+
+type CatalogueEntry = Gif & { tags: string[] };
+
+const entry = (photoId: number, title: string, tags: string[]): CatalogueEntry => ({
+  id: `picsum-${photoId}`,
+  images: stillImages(photoId),
+  tags,
+  title,
+});
+
+/** The GIFs the picker offers without an API key: still photos, matched by title and tags. */
+export const catalogue: CatalogueEntry[] = [
+  entry(1016, 'Red canyon', ['canyon', 'mountain', 'rock', 'desert', 'travel']),
+  entry(29, 'Snowy peaks', ['mountain', 'snow', 'winter', 'travel']),
+  entry(1039, 'Waterfall', ['waterfall', 'water', 'mountain', 'nature']),
+  entry(1043, 'Green valley', ['valley', 'mountain', 'nature']),
+  entry(28, 'Forest path', ['forest', 'tree', 'nature']),
+  entry(1018, 'Green hills', ['hill', 'mountain', 'travel', 'nature']),
+  entry(225, 'Cup of tea', ['tea', 'drink', 'cozy']),
+  entry(312, 'Honey jar', ['honey', 'food', 'sweet']),
+  entry(488, 'Salad bowl', ['salad', 'food', 'lunch']),
+  entry(1080, 'Strawberries', ['strawberry', 'fruit', 'food', 'sweet']),
+  entry(237, 'Puppy', ['dog', 'puppy', 'animal', 'cute']),
+  entry(1025, 'Dog in a blanket', ['dog', 'animal', 'cozy', 'cute']),
+  entry(1015, 'River bend', ['river', 'water', 'mountain', 'travel']),
+  entry(1036, 'Snowy camp', ['camp', 'snow', 'mountain', 'winter']),
+  entry(13, 'Pebble beach', ['beach', 'sea', 'water', 'travel']),
+  entry(1084, 'Walrus', ['walrus', 'animal', 'sea']),
+  entry(433, 'Bear', ['bear', 'animal', 'nature']),
+  entry(1074, 'Big cat', ['cat', 'animal']),
+  entry(1002, 'Earth from space', ['space', 'earth', 'wow']),
+  entry(1022, 'Northern lights', ['sky', 'mountain', 'night', 'wow', 'winter']),
+  entry(1069, 'Jellyfish', ['jellyfish', 'sea', 'animal']),
+  entry(102, 'Raspberries', ['raspberry', 'fruit', 'food']),
+  entry(1050, 'Sea cliffs', ['sea', 'water', 'mountain', 'rock', 'travel']),
+  entry(15, 'Forest waterfall', ['waterfall', 'water', 'mountain', 'forest']),
+];
+
+/** One page of the catalogue: every entry for an empty query, else those matching it. */
+export const searchCatalogue = (searchQuery: string, { limit, offset }: GifPage) => {
+  const words = searchQuery.toLowerCase().split(/\s+/).filter(Boolean);
+  const matches = catalogue.filter(({ tags, title }) => {
+    const text = [title, ...tags].join(' ').toLowerCase();
+    return words.every((word) => text.includes(word));
+  });
+  return matches.slice(offset, offset + limit).map(({ id, images, title }) => ({
+    id,
+    images,
+    title,
+  }));
+};
diff --git a/examples/cookbook/src/recipes/composer/gif-picker/default.recipe.tsx b/examples/cookbook/src/recipes/composer/gif-picker/default.recipe.tsx
new file mode 100644
index 0000000000..45bddbcf50
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/gif-picker/default.recipe.tsx
@@ -0,0 +1,18 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { DemoGifShots } from './DemoGifShots';
+import { WithGifPicker } from './WithGifPicker';
+
+// A GIF button next to the composer's input. The base app's channels view renders the channel,
+// so the wrapper goes around it; GifChannel.tsx is the same wrapper around a channel of your own.
+// DemoGifShots only serves the screenshots.
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithGifPicker>
+    <DemoGifShots />
+    {children}
+  </WithGifPicker>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/composer/gif-picker/gif.ts b/examples/cookbook/src/recipes/composer/gif-picker/gif.ts
new file mode 100644
index 0000000000..bf8773a7f8
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/gif-picker/gif.ts
@@ -0,0 +1,54 @@
+import type { GiphyVersions, ImageData, Images, LocalAttachment } from 'stream-chat';
+
+/** One GIF the picker offers: its id, a title for screen readers, and its renditions. */
+export type Gif = {
+  id: string;
+  images: Images;
+  title: string;
+};
+
+/**
+ * The renditions in the shape `attachment.giphy` takes: the seven versions the SDK knows, with
+ * every field a string. A missing field becomes an empty string.
+ */
+export const toImages = (
+  versions: Partial<Record<GiphyVersions, Partial<ImageData>>>,
+): Images => {
+  const imageData = (version: GiphyVersions): ImageData => {
+    const {
+      frames = '',
+      height = '',
+      size = '',
+      url = '',
+      width = '',
+    } = versions[version] ?? {};
+    return { frames, height, size, url, width };
+  };
+  return {
+    fixed_height: imageData('fixed_height'),
+    fixed_height_downsampled: imageData('fixed_height_downsampled'),
+    fixed_height_still: imageData('fixed_height_still'),
+    fixed_width: imageData('fixed_width'),
+    fixed_width_downsampled: imageData('fixed_width_downsampled'),
+    fixed_width_still: imageData('fixed_width_still'),
+    original: imageData('original'),
+  };
+};
+
+/**
+ * The attachment the composer adds for a GIF. Nothing is uploaded, but the composer sends only
+ * attachments whose upload state is `finished`, and the type requires a file, so it gets an empty
+ * one. `thumb_url` is the image the message list shows; `attachment.giphy` gives its size.
+ */
+export const toGiphyAttachment = (gif: Gif): LocalAttachment => ({
+  custom: {},
+  giphy: gif.images,
+  localMetadata: {
+    file: new File([], gif.id),
+    id: crypto.randomUUID(),
+    uploadState: 'finished',
+  },
+  thumb_url: gif.images.fixed_height.url,
+  title: gif.title,
+  type: 'giphy',
+});
diff --git a/examples/cookbook/src/recipes/composer/gif-picker/giphy.ts b/examples/cookbook/src/recipes/composer/gif-picker/giphy.ts
new file mode 100644
index 0000000000..c57b4d3578
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/gif-picker/giphy.ts
@@ -0,0 +1,45 @@
+import type { GiphyVersions, ImageData } from 'stream-chat';
+import type { Gif } from './gif';
+import { toImages } from './gif';
+
+/** The part of a Giphy API GIF object the picker reads. */
+type GiphyGif = {
+  id: string;
+  images: Partial<Record<GiphyVersions, Partial<ImageData>>>;
+  title: string;
+};
+
+export type GifPage = { limit: number; offset: number };
+
+/**
+ * One page of Giphy's search results, or of its trending GIFs when `searchQuery` is empty.
+ * `signal` cancels the request when a newer query starts.
+ */
+export const fetchGiphyPage = async ({
+  apiKey,
+  page,
+  searchQuery,
+  signal,
+}: {
+  apiKey: string;
+  page: GifPage;
+  searchQuery: string;
+  signal?: AbortSignal;
+}): Promise<Gif[]> => {
+  const params = new URLSearchParams({
+    api_key: apiKey,
+    limit: String(page.limit),
+    offset: String(page.offset),
+    rating: 'g',
+  });
+  if (searchQuery) params.set('q', searchQuery);
+  const endpoint = searchQuery ? 'search' : 'trending';
+
+  const response = await fetch(`https://api.giphy.com/v1/gifs/${endpoint}?${params}`, {
+    signal,
+  });
+  if (!response.ok) throw new Error(`Giphy answered ${response.status}`);
+  const { data } = (await response.json()) as { data: GiphyGif[] };
+
+  return data.map(({ id, images, title }) => ({ id, images: toImages(images), title }));
+};
diff --git a/examples/cookbook/src/recipes/composer/gif-picker/shots.json b/examples/cookbook/src/recipes/composer/gif-picker/shots.json
new file mode 100644
index 0000000000..b58150b831
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/gif-picker/shots.json
@@ -0,0 +1,18 @@
+[
+  {
+    "file": "gif-picker.png",
+    "query": { "channel": "docs-v15-cb-trip", "gif": "mountain" },
+    "waitFor": ".cookbook-gif-picker__image",
+    "clip": ".cookbook-gif-picker",
+    "padding": 56,
+    "settleMs": 2000
+  },
+  {
+    "file": "gif-picker-composer.png",
+    "query": { "channel": "docs-v15-cb-trip", "gif": "mountain", "pick": "Snowy peaks" },
+    "waitFor": ".cookbook-gif-preview__image",
+    "clip": ".str-chat__message-composer-container",
+    "padding": 0,
+    "settleMs": 1500
+  }
+]
diff --git a/examples/cookbook/src/recipes/composer/inline-message-editing/EditFromUrl.tsx b/examples/cookbook/src/recipes/composer/inline-message-editing/EditFromUrl.tsx
new file mode 100644
index 0000000000..f897d00ae4
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/inline-message-editing/EditFromUrl.tsx
@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { useChatContext } from 'stream-chat-react';
+import { useInlineEdit } from './InlineEditContext';
+
+/**
+ * For the screenshot only, not part of the recipe: `?edit=<message id>` opens the inline editor on
+ * that message of the channel (`?channel=`), and `&text=<text>` types the text into the channel's
+ * own composer at the bottom. Nothing is sent.
+ */
+export const EditFromUrl = () => {
+  const { client } = useChatContext();
+  const { startEditing } = useInlineEdit();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const channelId = params.get('channel');
+    const messageId = params.get('edit');
+    const text = params.get('text');
+    if (!channelId || !messageId) return;
+
+    const channel = client.channel('messaging', channelId);
+    const timer = setInterval(() => {
+      const message = channel.messagePaginator.getItem(messageId);
+      if (!message || !document.querySelector('.str-chat__channel textarea')) return;
+      clearInterval(timer);
+      if (text) channel.messageComposer.textComposer.setText(text);
+      startEditing(message, false);
+    }, 200);
+
+    return () => clearInterval(timer);
+  }, [client, startEditing]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/composer/inline-message-editing/InlineEditAction.tsx b/examples/cookbook/src/recipes/composer/inline-message-editing/InlineEditAction.tsx
new file mode 100644
index 0000000000..8731f09472
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/inline-message-editing/InlineEditAction.tsx
@@ -0,0 +1,42 @@
+import type { MessageActionSetItem } from 'stream-chat-react';
+import {
+  ContextMenuButton,
+  defaultMessageActionSet,
+  MessageActions,
+  useComponentContextIcons,
+  useContextMenuContext,
+  useMessageContext,
+} from 'stream-chat-react';
+import { useInlineEdit } from './InlineEditContext';
+
+const InlineEditAction = () => {
+  const { IconEdit } = useComponentContextIcons();
+  const { closeMenu } = useContextMenuContext();
+  const { message, threadList = false } = useMessageContext();
+  const { startEditing } = useInlineEdit();
+
+  return (
+    <ContextMenuButton
+      Icon={IconEdit}
+      onClick={() => {
+        startEditing(message, threadList);
+        closeMenu();
+      }}
+    >
+      Edit Message
+    </ContextMenuButton>
+  );
+};
+
+// Declared once: the base filter recomputes whenever it gets a new list. The item keeps the
+// `edit` type, so the menu still shows it only to users who can edit the message. The "more"
+// button has no type, hence the `in` check.
+const messageActionSet: MessageActionSetItem[] = defaultMessageActionSet.map((item) =>
+  'type' in item && item.type === 'edit'
+    ? { ...item, Component: InlineEditAction }
+    : item,
+);
+
+export const InlineEditMessageActions = () => (
+  <MessageActions messageActionSet={messageActionSet} />
+);
diff --git a/examples/cookbook/src/recipes/composer/inline-message-editing/InlineEditContext.tsx b/examples/cookbook/src/recipes/composer/inline-message-editing/InlineEditContext.tsx
new file mode 100644
index 0000000000..4ac01b6367
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/inline-message-editing/InlineEditContext.tsx
@@ -0,0 +1,78 @@
+import type { PropsWithChildren } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { LocalMessage, MessageComposerState } from 'stream-chat';
+import { MessageComposer as MessageComposerController } from 'stream-chat';
+import { useChatContext } from 'stream-chat-react';
+
+/** The message being edited, the list it is edited in, and the composer that holds the edit. */
+export type InlineEdit = {
+  composer: MessageComposerController;
+  messageId: string;
+  threadList: boolean;
+};
+
+type InlineEditContextValue = {
+  edit: InlineEdit | null;
+  startEditing: (message: LocalMessage, threadList: boolean) => void;
+};
+
+const InlineEditContext = createContext<InlineEditContextValue>({
+  edit: null,
+  startEditing: () => undefined,
+});
+
+export const useInlineEdit = () => useContext(InlineEditContext);
+
+const editedMessageSelector = (state: MessageComposerState) => ({
+  editedMessage: state.editedMessage,
+});
+
+/** Owns the edit composer: at most one message is edited at a time. */
+export const InlineEditProvider = ({ children }: PropsWithChildren) => {
+  const { client } = useChatContext();
+  const [edit, setEdit] = useState<InlineEdit | null>(null);
+  // The edit in progress, read when a new one starts, so its composer is emptied exactly once.
+  const editRef = useRef(edit);
+  useEffect(() => {
+    editRef.current = edit;
+  }, [edit]);
+
+  const startEditing = useCallback(
+    (message: LocalMessage, threadList: boolean) => {
+      // The composition context is the message, so this composer edits only that message.
+      const composer = new MessageComposerController({
+        client,
+        composition: message,
+        compositionContext: message,
+      });
+      editRef.current?.composer.clear();
+      setEdit({ composer, messageId: message.id, threadList });
+    },
+    [client],
+  );
+
+  // Saving or cancelling empties the composer, which ends the edit.
+  useEffect(() => {
+    if (!edit) return;
+    return edit.composer.state.subscribeWithSelector(
+      editedMessageSelector,
+      ({ editedMessage }) => {
+        if (!editedMessage) setEdit((current) => (current === edit ? null : current));
+      },
+    );
+  }, [edit]);
+
+  const value = useMemo(() => ({ edit, startEditing }), [edit, startEditing]);
+
+  return (
+    <InlineEditContext.Provider value={value}>{children}</InlineEditContext.Provider>
+  );
+};
diff --git a/examples/cookbook/src/recipes/composer/inline-message-editing/InlineEditor.css b/examples/cookbook/src/recipes/composer/inline-message-editing/InlineEditor.css
new file mode 100644
index 0000000000..6e8fd5dfeb
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/inline-message-editing/InlineEditor.css
@@ -0,0 +1,49 @@
+@layer stream-overrides {
+  /* A raised card with the accent border of an active field, so the editor stands apart from the
+     list and the bubbles around it. */
+  .cookbook-inline-editor {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-xs);
+    margin-inline: var(--str-chat__spacing-md);
+    padding: var(--str-chat__spacing-sm);
+    border: 1px solid var(--str-chat__border-utility-active);
+    border-radius: var(--str-chat__radius-xl);
+    background: var(--str-chat__background-core-elevation-1);
+    box-shadow: var(--str-chat__box-shadow-1);
+  }
+
+  /* The card frames the composer, so the bottom bar's background, top border and padding go. */
+  .cookbook-inline-editor .str-chat__message-composer-container {
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  .cookbook-inline-editor__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--str-chat__spacing-sm);
+    padding-inline: var(--str-chat__spacing-xs);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-inline-editor__hint {
+    margin-inline-end: auto;
+    color: var(--str-chat__text-secondary);
+  }
+
+  .cookbook-inline-editor__button {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-emphasis);
+    cursor: pointer;
+  }
+
+  .cookbook-inline-editor__button--save {
+    color: var(--str-chat__text-link);
+  }
+}
diff --git a/examples/cookbook/src/recipes/composer/inline-message-editing/InlineEditor.tsx b/examples/cookbook/src/recipes/composer/inline-message-editing/InlineEditor.tsx
new file mode 100644
index 0000000000..49a769500f
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/inline-message-editing/InlineEditor.tsx
@@ -0,0 +1,59 @@
+import type { KeyboardEvent } from 'react';
+import type { MessageComposer as MessageComposerController } from 'stream-chat';
+import {
+  MessageComposer,
+  MessageComposerControllerProvider,
+  useMessageComposerSubmitFn,
+  WithComponents,
+} from 'stream-chat-react';
+import './InlineEditor.css';
+
+// The editor stands where the message was, so the composer's "Edit Message" preview of it is left
+// out.
+const overrides = { EditedMessagePreview: () => null };
+
+const InlineEditorFooter = ({ onCancel }: { onCancel: () => void }) => {
+  // Saves the edit, as the composer's checkmark and the Enter key do.
+  const submit = useMessageComposerSubmitFn();
+
+  return (
+    <div className='cookbook-inline-editor__footer'>
+      <span className='cookbook-inline-editor__hint'>Esc to cancel · Enter to save</span>
+      <button className='cookbook-inline-editor__button' onClick={onCancel} type='button'>
+        Cancel
+      </button>
+      <button
+        className='cookbook-inline-editor__button cookbook-inline-editor__button--save'
+        onClick={() => void submit()}
+        type='button'
+      >
+        Save
+      </button>
+    </div>
+  );
+};
+
+export const InlineEditor = ({ composer }: { composer: MessageComposerController }) => {
+  // Clearing the composer ends the edit and closes the editor.
+  const cancel = composer.clear;
+
+  // Runs before the textarea's own handler, so an open suggestion list or command takes Esc first.
+  const handleKeyDownCapture = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'Escape') return;
+    const { command, suggestions } = composer.textComposer;
+    if (command || suggestions) return;
+    event.preventDefault();
+    cancel();
+  };
+
+  return (
+    <div className='cookbook-inline-editor' onKeyDownCapture={handleKeyDownCapture}>
+      <MessageComposerControllerProvider messageComposerController={composer}>
+        <WithComponents overrides={overrides}>
+          <MessageComposer focus />
+          <InlineEditorFooter onCancel={cancel} />
+        </WithComponents>
+      </MessageComposerControllerProvider>
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/composer/inline-message-editing/WithInlineMessageEditing.tsx b/examples/cookbook/src/recipes/composer/inline-message-editing/WithInlineMessageEditing.tsx
new file mode 100644
index 0000000000..c62a6fca57
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/inline-message-editing/WithInlineMessageEditing.tsx
@@ -0,0 +1,28 @@
+import type { PropsWithChildren } from 'react';
+import { MessageUI, useMessageContext, WithComponents } from 'stream-chat-react';
+import { InlineEditMessageActions } from './InlineEditAction';
+import { InlineEditor } from './InlineEditor';
+import { InlineEditProvider, useInlineEdit } from './InlineEditContext';
+
+const InlineEditingMessageUI = () => {
+  const { message, threadList = false } = useMessageContext();
+  const { edit } = useInlineEdit();
+
+  // The same message can show in the channel and in its thread; only the list it was opened in
+  // shows the editor.
+  const isEditedHere = edit?.messageId === message.id && edit.threadList === threadList;
+
+  return isEditedHere ? <InlineEditor composer={edit.composer} /> : <MessageUI />;
+};
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = {
+  MessageActions: InlineEditMessageActions,
+  MessageUI: InlineEditingMessageUI,
+};
+
+export const WithInlineMessageEditing = ({ children }: PropsWithChildren) => (
+  <InlineEditProvider>
+    <WithComponents overrides={overrides}>{children}</WithComponents>
+  </InlineEditProvider>
+);
diff --git a/examples/cookbook/src/recipes/composer/inline-message-editing/default.recipe.tsx b/examples/cookbook/src/recipes/composer/inline-message-editing/default.recipe.tsx
new file mode 100644
index 0000000000..3e2d1c2e21
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/inline-message-editing/default.recipe.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { EditFromUrl } from './EditFromUrl';
+import { WithInlineMessageEditing } from './WithInlineMessageEditing';
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithInlineMessageEditing>
+    <EditFromUrl />
+    {children}
+  </WithInlineMessageEditing>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/composer/inline-message-editing/shots.json b/examples/cookbook/src/recipes/composer/inline-message-editing/shots.json
new file mode 100644
index 0000000000..87d2e6bd38
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/inline-message-editing/shots.json
@@ -0,0 +1,14 @@
+[
+  {
+    "file": "composer-inline-message-editing.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "edit": "docs-v15-ck-design-3",
+      "text": "I will share the sidebar draft after lunch"
+    },
+    "viewport": { "width": 1280, "height": 860 },
+    "waitFor": ".cookbook-inline-editor",
+    "clip": ".str-chat__channel",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/AddPollDialog.css b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/AddPollDialog.css
new file mode 100644
index 0000000000..55b74c1c83
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/AddPollDialog.css
@@ -0,0 +1,7 @@
+@layer stream-overrides {
+  .cookbook-add-poll__form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-sm);
+  }
+}
diff --git a/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/AddPollDialog.tsx b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/AddPollDialog.tsx
new file mode 100644
index 0000000000..5107511d9e
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/AddPollDialog.tsx
@@ -0,0 +1,104 @@
+import type { PollComposerState } from 'stream-chat';
+import type { PollCreationDialogProps } from 'stream-chat-react';
+import {
+  Prompt,
+  TextInput,
+  useCanCreatePoll,
+  useMessageComposerController,
+  useStateStore,
+} from 'stream-chat-react';
+import { deleteUnsentPoll } from './removePendingPoll';
+import './AddPollDialog.css';
+
+const pollFieldsSelector = ({ data }: PollComposerState) => ({
+  name: data.name,
+  options: data.options,
+});
+
+/**
+ * Creates the poll and adds it to the composer, without sending anything. The message goes out
+ * when the user sends it from the composer. `AttachmentSelector` resets the form each time it opens
+ * the dialog.
+ */
+export const AddPollDialog = ({ close }: PollCreationDialogProps) => {
+  const messageComposer = useMessageComposerController();
+  const { pollComposer } = messageComposer;
+  const { name, options } = useStateStore(pollComposer.state, pollFieldsSelector);
+  const canCreatePoll = useCanCreatePoll();
+
+  const addPoll = async () => {
+    close();
+    // A poll already waiting in the composer, which the new one replaces.
+    const previousPollId = messageComposer.pollId;
+    try {
+      // Creates the poll on the server and sets `messageComposer.state.pollId`.
+      await messageComposer.createPoll();
+    } catch {
+      // `createPoll()` already reported the failure as a notification.
+    }
+    // `createPoll()` may also return without creating anything, when the form doesn't compose.
+    // Until a new poll is in the composer, the previous one stays there and on the server.
+    const { pollId } = messageComposer;
+    if (previousPollId && pollId && pollId !== previousPollId) {
+      deleteUnsentPoll(messageComposer, previousPollId);
+    }
+  };
+
+  return (
+    <Prompt.Root className='str-chat__poll-creation-dialog'>
+      <Prompt.Header close={close} title='Create poll' />
+      <Prompt.Body>
+        <form
+          autoComplete='off'
+          className='cookbook-add-poll__form'
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (canCreatePoll) void addPoll();
+          }}
+        >
+          <TextInput
+            data-autofocus
+            id='cookbook-add-poll-question'
+            label='Question'
+            onBlur={() => pollComposer.handleFieldBlur('name')}
+            onChange={(event) =>
+              pollComposer.updateFields({ data: { name: event.target.value } })
+            }
+            placeholder='Ask a question'
+            value={name}
+          />
+          {/* The poll composer adds an empty option after the last filled one, and drops an
+              emptied option that isn't the last. */}
+          {options.map((option, index) => (
+            <TextInput
+              id={`cookbook-add-poll-option-${option.id}`}
+              key={option.id}
+              label={`Option ${index + 1}`}
+              onChange={(event) =>
+                pollComposer.updateFields({
+                  data: { options: { index, text: event.target.value } },
+                })
+              }
+              placeholder='Add an option'
+              value={option.text}
+            />
+          ))}
+        </form>
+      </Prompt.Body>
+      <Prompt.Footer>
+        <Prompt.FooterControls>
+          <Prompt.FooterControlsButtonSecondary onClick={close} type='button'>
+            Cancel
+          </Prompt.FooterControlsButtonSecondary>
+          <Prompt.FooterControlsButtonPrimary
+            disabled={!canCreatePoll}
+            onClick={() => void addPoll()}
+            type='button'
+          >
+            Add to message
+          </Prompt.FooterControlsButtonPrimary>
+        </Prompt.FooterControls>
+      </Prompt.Footer>
+    </Prompt.Root>
+  );
+};
diff --git a/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/ComposerPollPreview.css b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/ComposerPollPreview.css
new file mode 100644
index 0000000000..a80345933b
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/ComposerPollPreview.css
@@ -0,0 +1,52 @@
+@layer stream-overrides {
+  .cookbook-poll-composer {
+    width: 100%;
+  }
+
+  .cookbook-poll-preview {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-sm);
+    margin: var(--str-chat__spacing-sm) var(--str-chat__spacing-md) 0;
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__background-core-surface-subtle);
+  }
+
+  .cookbook-poll-preview__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-xxs);
+    min-width: 0;
+  }
+
+  .cookbook-poll-preview__label {
+    color: var(--str-chat__accent-primary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-poll-preview__question {
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-emphasis);
+  }
+
+  .cookbook-poll-preview__options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--str-chat__spacing-xxs);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .cookbook-poll-preview__option {
+    padding: 0 var(--str-chat__spacing-xs);
+    border-radius: var(--str-chat__radius-max);
+    background: var(--str-chat__background-core-surface-card);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/ComposerPollPreview.tsx b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/ComposerPollPreview.tsx
new file mode 100644
index 0000000000..8a03dc8bdf
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/ComposerPollPreview.tsx
@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react';
+import type { MessageComposerState, Poll, PollState } from 'stream-chat';
+import {
+  MessageComposerUI,
+  RemoveAttachmentPreviewButton,
+  useChatContext,
+  useMessageComposerController,
+  useStateStore,
+} from 'stream-chat-react';
+import { removePendingPoll } from './removePendingPoll';
+import './ComposerPollPreview.css';
+
+const composerPollSelector = ({ editedMessage, pollId }: MessageComposerState) => ({
+  editedMessage,
+  pollId,
+});
+const pollPreviewSelector = ({ name, options }: PollState) => ({ name, options });
+
+/**
+ * The poll `pollId` points to. `createPoll()` puts the created poll into `client.polls`; a poll
+ * restored from a draft may not be there yet, so it's fetched once.
+ */
+const usePendingPoll = (pollId: string | null) => {
+  const { client } = useChatContext();
+  const cachedPoll = pollId ? client.polls.fromState(pollId) : undefined;
+  const [fetchedPoll, setFetchedPoll] = useState<Poll>();
+
+  useEffect(() => {
+    if (!pollId || cachedPoll) return;
+    let isCurrent = true;
+    client.polls
+      .getPoll(pollId)
+      .then((poll) => {
+        if (isCurrent) setFetchedPoll(poll);
+      })
+      .catch((error) => console.error('Loading the poll failed', error));
+    return () => {
+      isCurrent = false;
+    };
+  }, [cachedPoll, client, pollId]);
+
+  return cachedPoll ?? (fetchedPoll?.id === pollId ? fetchedPoll : undefined);
+};
+
+type PollPreviewCardProps = {
+  /** Shown only for a new message: an edited message keeps its poll. */
+  onRemove?: () => void;
+  /** Until it's known, the card shows only its label. */
+  poll?: Poll;
+};
+
+const PollPreviewCard = ({ onRemove, poll }: PollPreviewCardProps) => {
+  const preview = useStateStore(poll?.state, pollPreviewSelector);
+
+  return (
+    <div className='cookbook-poll-preview'>
+      <div className='cookbook-poll-preview__body'>
+        <span className='cookbook-poll-preview__label'>Poll</span>
+        {preview && (
+          <>
+            <span className='cookbook-poll-preview__question'>{preview.name}</span>
+            <ul className='cookbook-poll-preview__options'>
+              {preview.options.map((option) => (
+                <li className='cookbook-poll-preview__option' key={option.id}>
+                  {option.text}
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </div>
+      {onRemove && (
+        <RemoveAttachmentPreviewButton aria-label='Remove poll' onClick={onRemove} />
+      )}
+    </div>
+  );
+};
+
+/** The poll waiting in the composer, while `messageComposer.state.pollId` is set. */
+export const ComposerPollPreview = () => {
+  const messageComposer = useMessageComposerController();
+  const { editedMessage, pollId } = useStateStore(
+    messageComposer.state,
+    composerPollSelector,
+  );
+  const poll = usePendingPoll(pollId);
+  if (!pollId) return null;
+
+  return (
+    <PollPreviewCard
+      // Takes the poll out of the composer and deletes it on the server.
+      onRemove={editedMessage ? undefined : () => removePendingPoll(messageComposer)}
+      poll={poll}
+    />
+  );
+};
+
+/**
+ * The default composer with the poll preview above it. The composer's own preview area renders
+ * only for a quoted message, attachments, link previews, a location or an edit, never for a poll
+ * alone, so the preview sits outside it.
+ */
+export const MessageComposerUIWithPoll = () => (
+  <div className='cookbook-poll-composer'>
+    <ComposerPollPreview />
+    <MessageComposerUI />
+  </div>
+);
diff --git a/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/DemoPollShots.tsx b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/DemoPollShots.tsx
new file mode 100644
index 0000000000..1e2f4ca0ed
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/DemoPollShots.tsx
@@ -0,0 +1,136 @@
+import { useEffect } from 'react';
+import type {
+  Attachment,
+  LocalAttachment,
+  MessageResponse,
+  PollResponseData,
+} from 'stream-chat';
+import { formatMessage, nowNs } from 'stream-chat';
+import { useChatContext } from 'stream-chat-react';
+
+/**
+ * For the screenshots only, not part of the recipe. The demo app refuses polls, so in the channel
+ * `?channel=` this helper stands in for the Create poll dialog without a request:
+ * - `?poll=composer` registers a poll in `client.polls` on this device, sets the composer's
+ *   `pollId` to it, types a message and adds an image by URL.
+ * - `?poll=sent` adds the message with the poll, its text and the image to the channel, as if the
+ *   user had sent it. It goes into the channel's paginator on this device only; no request is sent.
+ * The demo app's uploads never finish, so the image is a URL the composer holds as already uploaded.
+ */
+
+const POLL_ID = 'cookbook-local-hike-poll';
+const MESSAGE_ID = 'cookbook-local-hike-poll-message';
+const MESSAGE_TEXT = 'Trying to pin down the hike. Which day works for you?';
+const IMAGE: Attachment = {
+  custom: {},
+  fallback: 'trail.jpg',
+  image_url: 'https://picsum.photos/id/1018/640/427',
+  type: 'image',
+};
+// The composer sends only attachments whose upload state is `finished`, and the type requires a
+// file, so it gets an empty one.
+const LOCAL_IMAGE: LocalAttachment = {
+  ...IMAGE,
+  localMetadata: {
+    file: new File([], 'trail.jpg'),
+    id: 'cookbook-local-hike-image',
+    uploadState: 'finished',
+  },
+};
+
+export const DemoPollShots = () => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const channelId = params.get('channel');
+    const mode = params.get('poll');
+    if (!channelId || (mode !== 'composer' && mode !== 'sent')) return;
+    const channel = client.channel('messaging', channelId);
+
+    // Waits for the channel's first page and for its composer, which resets its state while it sets up.
+    const timer = setInterval(() => {
+      const author = channel.state.getLatestValue().members[client.userId ?? '']?.user;
+      if (
+        !channel.messagePaginator.items?.length ||
+        !author ||
+        !document.querySelector('.str-chat__channel textarea')
+      )
+        return;
+      clearInterval(timer);
+
+      // Wire timestamps are nanosecond numbers.
+      const now = nowNs();
+      const poll: PollResponseData = {
+        allow_answers: false,
+        allow_user_suggested_options: false,
+        answers_count: 0,
+        created_at: now,
+        created_by: author,
+        created_by_id: author.id,
+        custom: {},
+        description: '',
+        enforce_unique_vote: true,
+        id: POLL_ID,
+        latest_answers: [],
+        latest_votes_by_option: {},
+        name: 'Hike day',
+        options: [
+          { custom: {}, id: 'cookbook-hike-saturday', text: 'Saturday' },
+          { custom: {}, id: 'cookbook-hike-sunday', text: 'Sunday' },
+          { custom: {}, id: 'cookbook-hike-either', text: 'Either works' },
+        ],
+        own_votes: [],
+        updated_at: now,
+        vote_count: 0,
+        vote_counts_by_option: {},
+        voting_visibility: 'public',
+      };
+
+      if (mode === 'sent') {
+        const message: MessageResponse = {
+          attachments: [IMAGE],
+          cid: channel.cid,
+          created_at: now,
+          custom: {},
+          deleted_reply_count: 0,
+          html: '',
+          id: MESSAGE_ID,
+          latest_reactions: [],
+          mentioned_channel: false,
+          mentioned_here: false,
+          mentioned_users: [],
+          own_reactions: [],
+          pinned: false,
+          poll,
+          poll_id: POLL_ID,
+          reaction_counts: {},
+          reaction_scores: {},
+          reply_count: 0,
+          restricted_visibility: [],
+          shadowed: false,
+          silent: false,
+          text: MESSAGE_TEXT,
+          type: 'regular',
+          updated_at: now,
+          user: author,
+        };
+        // The poll first: the message renders its poll from `client.polls`.
+        client.polls.hydratePollCache([message]);
+        channel.messagePaginator.ingestItem(formatMessage(message));
+        return;
+      }
+
+      // What `createPoll()` does after the server answers: caches the poll and sets `pollId`.
+      client.polls.hydratePollCache([{ poll } as unknown as MessageResponse]);
+      const composer = channel.messageComposer;
+      composer.state.partialNext({ pollId: POLL_ID });
+      composer.textComposer.setText(MESSAGE_TEXT);
+      composer.attachmentManager.upsertAttachments([LOCAL_IMAGE]);
+    }, 200);
+
+    return () => clearInterval(timer);
+  }, [client]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/PollChannel.tsx b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/PollChannel.tsx
new file mode 100644
index 0000000000..bcadc12f70
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/PollChannel.tsx
@@ -0,0 +1,12 @@
+import type { Channel as StreamChannel } from 'stream-chat';
+import { Channel, MessageComposer, MessageList } from 'stream-chat-react';
+import { WithPollWithText } from './WithPollWithText';
+
+export const PollChannel = ({ channel }: { channel: StreamChannel }) => (
+  <WithPollWithText>
+    <Channel channel={channel}>
+      <MessageList />
+      <MessageComposer />
+    </Channel>
+  </WithPollWithText>
+);
diff --git a/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/WithPollWithText.tsx b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/WithPollWithText.tsx
new file mode 100644
index 0000000000..e16a53ffef
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/WithPollWithText.tsx
@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react';
+import { useEffect } from 'react';
+import { useChatContext, WithComponents } from 'stream-chat-react';
+import { AddPollDialog } from './AddPollDialog';
+import { MessageComposerUIWithPoll } from './ComposerPollPreview';
+import { installPollWithText } from './installPollWithText';
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = {
+  MessageComposerUI: MessageComposerUIWithPoll,
+  PollCreationDialog: AddPollDialog,
+};
+
+const PollWithTextSetup = () => {
+  const { client } = useChatContext();
+  useEffect(() => installPollWithText(client), [client]);
+  return null;
+};
+
+export const WithPollWithText = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>
+    <PollWithTextSetup />
+    {children}
+  </WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/default.recipe.tsx b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/default.recipe.tsx
new file mode 100644
index 0000000000..fda2b27df7
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/default.recipe.tsx
@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { DemoPollShots } from './DemoPollShots';
+import { WithPollWithText } from './WithPollWithText';
+
+// The base app's channels view renders the channel, so the wrapper goes around it.
+// DemoPollShots only serves the screenshots.
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithPollWithText>
+    <DemoPollShots />
+    {children}
+  </WithPollWithText>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/installPollWithText.ts b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/installPollWithText.ts
new file mode 100644
index 0000000000..89506374b9
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/installPollWithText.ts
@@ -0,0 +1,35 @@
+import type { StreamChat } from 'stream-chat';
+
+const POLL_ONLY_MIDDLEWARE_ID = 'stream-io/message-composer-middleware/poll-only';
+const USER_DATA_INJECTION_MIDDLEWARE_ID =
+  'stream-io/message-composer-middleware/user-data-injection';
+
+/** Sends a poll with the text and attachments of its message. Returns a function that stops it. */
+export const installPollWithText = (client: StreamChat) => {
+  client.config.setSetupFunction('messageComposer', ({ composer }) => {
+    const executor = composer.compositionMiddlewareExecutor;
+    const pollOnly = executor.installedMiddleware.find(
+      ({ id }) => id === POLL_ONLY_MIDDLEWARE_ID,
+    );
+    const { retainCompositionOnSubmit } = composer.config;
+
+    executor.remove(POLL_ONLY_MIDDLEWARE_ID);
+    // The SDK keeps the composer's content after sending a poll, because its poll message leaves
+    // the rest out. Here everything goes out with the poll, so the composer empties as for any
+    // message.
+    composer.updateConfig({ retainCompositionOnSubmit: () => false });
+
+    return () => {
+      if (pollOnly) {
+        executor.insert({
+          middleware: [pollOnly],
+          position: { after: USER_DATA_INJECTION_MIDDLEWARE_ID },
+          unique: true,
+        });
+      }
+      composer.updateConfig({ retainCompositionOnSubmit });
+    };
+  });
+
+  return () => client.config.setSetupFunction('messageComposer', null);
+};
diff --git a/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/removePendingPoll.ts b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/removePendingPoll.ts
new file mode 100644
index 0000000000..4e1e66c3ab
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/removePendingPoll.ts
@@ -0,0 +1,24 @@
+import type { MessageComposer } from 'stream-chat';
+
+/**
+ * Deletes a poll on the server that was created for a new message in this composer and never
+ * sent, so nothing else points to it. Call it only on the user's own action. A poll of an edited
+ * message belongs to that message and stays.
+ */
+export const deleteUnsentPoll = (composer: MessageComposer, pollId: string) => {
+  if (composer.editedMessage) return;
+  composer.client.deletePoll({ poll_id: pollId }).catch((error) => {
+    console.error('Deleting the unsent poll failed', error);
+  });
+};
+
+/**
+ * Takes the poll waiting in a new message out of the composer and deletes it on the server with
+ * `deleteUnsentPoll()`. Call it when the user removes the poll.
+ */
+export const removePendingPoll = (composer: MessageComposer) => {
+  const { editedMessage, pollId } = composer;
+  if (!pollId || editedMessage) return;
+  composer.state.partialNext({ pollId: null });
+  deleteUnsentPoll(composer, pollId);
+};
diff --git a/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/shots.json b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/shots.json
new file mode 100644
index 0000000000..076bb42748
--- /dev/null
+++ b/examples/cookbook/src/recipes/composer/poll-with-text-and-attachments/shots.json
@@ -0,0 +1,28 @@
+[
+  {
+    "file": "poll-with-text-composer.png",
+    "query": {
+      "channel": "docs-v15-cb-trip",
+      "poll": "composer"
+    },
+    "waitFor": ".cookbook-poll-preview",
+    "clip": ".cookbook-poll-composer",
+    "padding": 0
+  },
+  {
+    "file": "poll-with-text-message.png",
+    "query": {
+      "channel": "docs-v15-cb-trip",
+      "poll": "sent"
+    },
+    "waitFor": ".str-chat__li .str-chat__poll",
+    "clip": ".str-chat__li",
+    "hasText": "Trying to pin down the hike",
+    "padding": 0,
+    "settleMs": 2500,
+    "viewport": {
+      "width": 1280,
+      "height": 1000
+    }
+  }
+]
diff --git a/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/DemoLocationShots.tsx b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/DemoLocationShots.tsx
new file mode 100644
index 0000000000..7f546f4039
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/DemoLocationShots.tsx
@@ -0,0 +1,234 @@
+import { useEffect } from 'react';
+import type {
+  MessageResponse,
+  SharedLocationResponseData,
+  StreamChat,
+} from 'stream-chat';
+import { formatMessage, msToNs } from 'stream-chat';
+import { useChatContext } from 'stream-chat-react';
+import { isDemoChannelId } from '../../../base/client';
+
+/**
+ * For the screenshots only, not part of the recipe. The demo app refuses shared locations and the
+ * cookbook sends nothing, so this fakes what the page shows, on this device only:
+ * - `?geolocation=fixed` makes `navigator.geolocation` report a fixed position in a public park,
+ *   and `?geolocation=denied` makes it refuse, as a browser does when the user blocks access.
+ * - `?dialog=open` opens the Share Location dialog from the attachment menu of the channel
+ *   `?channel=`, and `?dialog=live` also turns on "Share live location for".
+ * - `?attach=live` puts a live location in that channel's composer, as Attach in the dialog does.
+ * - `?locations=on` adds four location messages to that channel's list, as if they had been
+ *   shared: an ended live location from Bob, a static one from Bob, and live ones from Cara and
+ *   from Cleo, the user. Reloading the page drops them.
+ */
+
+const PARK = { latitude: 52.358, longitude: 4.8686 };
+
+const fakePosition = (): GeolocationPosition =>
+  ({
+    coords: {
+      accuracy: 10,
+      altitude: null,
+      altitudeAccuracy: null,
+      heading: null,
+      latitude: PARK.latitude,
+      longitude: PARK.longitude,
+      speed: null,
+    },
+    timestamp: Date.now(),
+  }) as GeolocationPosition;
+
+const deniedError = {
+  code: 1,
+  message: 'User denied Geolocation',
+  PERMISSION_DENIED: 1,
+  POSITION_UNAVAILABLE: 2,
+  TIMEOUT: 3,
+} as GeolocationPositionError;
+
+const installFakeGeolocation = (mode: string) => {
+  const report = (success: PositionCallback, error?: PositionErrorCallback | null) =>
+    setTimeout(
+      () => (mode === 'denied' ? error?.(deniedError) : success(fakePosition())),
+      300,
+    );
+
+  const fake: Geolocation = {
+    clearWatch: (id) => clearTimeout(id),
+    getCurrentPosition: (success, error) => {
+      report(success, error);
+    },
+    watchPosition: (success, error) => report(success, error) as unknown as number,
+  };
+  Object.defineProperty(navigator, 'geolocation', { configurable: true, value: fake });
+};
+
+const clickWhenReady = (selector: string, then?: () => void) => {
+  const timer = setInterval(() => {
+    const element = document.querySelector<HTMLElement & { disabled?: boolean }>(
+      selector,
+    );
+    if (!element || element.disabled) return;
+    clearInterval(timer);
+    element.click();
+    then?.();
+  }, 200);
+  return () => clearInterval(timer);
+};
+
+const MENU_BUTTON = '.str-chat__channel .str-chat__attachment-selector__menu-button';
+const LOCATION_ITEM = '.str-chat__attachment-selector-actions-menu__add-location-button';
+const LIVE_SWITCH = '[data-testid="share-location-dialog-live-location-switch"]';
+const MINUTE = 60_000;
+
+type DemoLocation = {
+  id: string;
+  latitude: number;
+  longitude: number;
+  userId: string;
+  /** Minutes from now; negative is in the past. */
+  createdIn: number;
+  updatedIn: number;
+  endsIn?: number;
+};
+
+const demoLocations = (cleoId: string): DemoLocation[] => [
+  {
+    createdIn: -40,
+    endsIn: -10,
+    id: 'cookbook-local-location-ended',
+    latitude: 52.3602,
+    longitude: 4.8744,
+    updatedIn: -10,
+    userId: 'docs-v15-ck-bob',
+  },
+  {
+    createdIn: -9,
+    id: 'cookbook-local-location-static',
+    latitude: 52.3571,
+    longitude: 4.8641,
+    updatedIn: -9,
+    userId: 'docs-v15-ck-bob',
+  },
+  {
+    createdIn: -6,
+    endsIn: 54,
+    id: 'cookbook-local-location-live-other',
+    latitude: 52.3589,
+    longitude: 4.8712,
+    updatedIn: -1,
+    userId: 'docs-v15-ck-cara',
+  },
+  {
+    createdIn: -4,
+    endsIn: 56,
+    id: 'cookbook-local-location-live-own',
+    latitude: PARK.latitude,
+    longitude: PARK.longitude,
+    updatedIn: -2,
+    userId: cleoId,
+  },
+];
+
+const addDemoLocations = (client: StreamChat, channelId: string) => {
+  const channel = client.channel('messaging', channelId);
+  const members = channel.state.getLatestValue().members;
+  const now = Date.now();
+  const at = (minutes: number) => msToNs(now + minutes * MINUTE);
+
+  for (const location of demoLocations(client.userId ?? '')) {
+    const user = members[location.userId]?.user;
+    if (!user) continue;
+    const sharedLocation: SharedLocationResponseData = {
+      channel_cid: channel.cid,
+      created_at: at(location.createdIn),
+      created_by_device_id: 'cookbook-demo-device',
+      latitude: location.latitude,
+      longitude: location.longitude,
+      message_id: location.id,
+      updated_at: at(location.updatedIn),
+      user_id: location.userId,
+      ...(location.endsIn !== undefined ? { end_at: at(location.endsIn) } : {}),
+    };
+    const message: MessageResponse = {
+      attachments: [],
+      cid: channel.cid,
+      created_at: at(location.createdIn),
+      custom: {},
+      deleted_reply_count: 0,
+      html: '',
+      id: location.id,
+      latest_reactions: [],
+      mentioned_channel: false,
+      mentioned_here: false,
+      mentioned_users: [],
+      own_reactions: [],
+      pinned: false,
+      reaction_counts: {},
+      reaction_scores: {},
+      reply_count: 0,
+      restricted_visibility: [],
+      shadowed: false,
+      shared_location: sharedLocation,
+      silent: false,
+      text: '',
+      type: 'regular',
+      updated_at: at(location.updatedIn),
+      user,
+    };
+    channel.messagePaginator.ingestItem(formatMessage(message));
+  }
+};
+
+export const DemoLocationShots = () => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const geolocation = params.get('geolocation');
+    if (geolocation) installFakeGeolocation(geolocation);
+
+    const channelId = params.get('channel');
+    if (!isDemoChannelId(channelId)) return;
+    const dialog = params.get('dialog');
+    const attach = params.get('attach');
+    const locations = params.get('locations');
+    const channel = client.channel('messaging', channelId);
+    const stops: Array<() => void> = [];
+
+    // Waits for the channel's first page and for its composer, which resets its state while it sets up.
+    const timer = setInterval(() => {
+      if (
+        !channel.messagePaginator.items?.length ||
+        !document.querySelector('.str-chat__channel textarea')
+      )
+        return;
+      clearInterval(timer);
+
+      if (locations === 'on') addDemoLocations(client, channelId);
+
+      if (attach === 'live') {
+        channel.messageComposer.locationComposer.setData({
+          ...PARK,
+          durationMs: 60 * MINUTE,
+        });
+      }
+
+      if (dialog) {
+        stops.push(
+          clickWhenReady(MENU_BUTTON, () =>
+            stops.push(
+              clickWhenReady(LOCATION_ITEM, () => {
+                if (dialog === 'live') stops.push(clickWhenReady(LIVE_SWITCH));
+              }),
+            ),
+          ),
+        );
+      }
+    }, 200);
+    stops.push(() => clearInterval(timer));
+
+    return () => stops.forEach((stop) => stop());
+  }, [client]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/GeolocationWithMap.tsx b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/GeolocationWithMap.tsx
new file mode 100644
index 0000000000..f545f02ff9
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/GeolocationWithMap.tsx
@@ -0,0 +1,54 @@
+import { createContext, useContext } from 'react';
+import type { SharedLocationResponseData } from 'stream-chat';
+import { convertTimestampToDate } from 'stream-chat';
+import type {
+  AttachmentProps,
+  GeolocationMapProps,
+  GeolocationProps,
+} from 'stream-chat-react';
+import { Attachment, Geolocation, useTranslationContext } from 'stream-chat-react';
+import { LocationMap } from './LocationMap';
+
+/**
+ * `Geolocation` gives its map only the coordinates. The rest of the location (whose it is, when it
+ * last moved) reaches the map through this context.
+ */
+const SharedLocationContext = createContext<SharedLocationResponseData | undefined>(
+  undefined,
+);
+
+/** "Updated 10:42 AM", for a live location: when its position last changed. */
+const useLastUpdate = (location?: SharedLocationResponseData) => {
+  const { userLanguage } = useTranslationContext();
+  const updatedAt = location?.end_at ? convertTimestampToDate(location.updated_at) : null;
+  if (!updatedAt) return undefined;
+  const time = new Intl.DateTimeFormat(userLanguage || undefined, {
+    timeStyle: 'short',
+  }).format(updatedAt);
+  return `Updated ${time}`;
+};
+
+const MessageMap = ({ latitude, longitude }: GeolocationMapProps) => {
+  const location = useContext(SharedLocationContext);
+  const lastUpdate = useLastUpdate(location);
+
+  return (
+    <LocationMap
+      badge={lastUpdate}
+      compact
+      label={location?.end_at ? 'Map of a live location' : 'Map of a shared location'}
+      latitude={latitude}
+      longitude={longitude}
+    />
+  );
+};
+
+const GeolocationWithMap = (props: GeolocationProps) => (
+  <SharedLocationContext.Provider value={props.location}>
+    <Geolocation {...props} GeolocationMap={MessageMap} />
+  </SharedLocationContext.Provider>
+);
+
+export const AttachmentWithMaps = (props: AttachmentProps) => (
+  <Attachment {...props} Geolocation={GeolocationWithMap} />
+);
diff --git a/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/LocationColors.css b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/LocationColors.css
new file mode 100644
index 0000000000..db886ba53c
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/LocationColors.css
@@ -0,0 +1,18 @@
+@layer stream-overrides {
+  /* The composer's location preview takes the background of the user's own bubbles, so its text
+     takes their text color too. */
+  .str-chat__location-preview {
+    color: var(--str-chat__chat-text-outgoing);
+  }
+
+  /* The pin sits in a light box of its own, so it keeps a dark color. */
+  .str-chat__location-preview .str-chat__location-preview-image {
+    color: var(--str-chat__text-primary);
+  }
+
+  /* The status under the map sits on a light surface of its own, inside a bubble whose text can be
+     light, so it sets its own text color. */
+  .str-chat__message-attachment-geolocation__status {
+    color: var(--str-chat__text-primary);
+  }
+}
diff --git a/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/LocationMap.css b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/LocationMap.css
new file mode 100644
index 0000000000..cbc8fe265c
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/LocationMap.css
@@ -0,0 +1,37 @@
+@layer stream-overrides {
+  .cookbook-location-map {
+    position: relative;
+    /* Leaflet stacks its panes and controls up to z-index 1000; this keeps them under the chat's
+       menus and dialogs. */
+    isolation: isolate;
+    overflow: hidden;
+    height: 100%;
+    min-height: 120px;
+  }
+
+  .cookbook-location-map__map {
+    width: 100%;
+    height: 100%;
+    background: var(--str-chat__background-core-surface-subtle);
+  }
+
+  .cookbook-location-map__marker {
+    border: 3px solid var(--str-chat__background-core-surface-card);
+    border-radius: var(--str-chat__radius-max);
+    background: var(--str-chat__accent-primary);
+    box-shadow: var(--str-chat__box-shadow-2);
+  }
+
+  .cookbook-location-map__badge {
+    position: absolute;
+    z-index: 1000;
+    inset-block-start: var(--str-chat__spacing-xs);
+    inset-inline-start: var(--str-chat__spacing-xs);
+    padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xs);
+    border-radius: var(--str-chat__radius-max);
+    background: var(--str-chat__background-core-surface-card);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-metadata-emphasis);
+    box-shadow: var(--str-chat__box-shadow-1);
+  }
+}
diff --git a/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/LocationMap.tsx b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/LocationMap.tsx
new file mode 100644
index 0000000000..ed456ccb77
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/LocationMap.tsx
@@ -0,0 +1,70 @@
+import 'leaflet/dist/leaflet.css';
+import { divIcon } from 'leaflet';
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
+import { MapContainer, Marker, TileLayer, useMap } from 'react-leaflet';
+import './LocationMap.css';
+
+const TILE_URL = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
+const TILE_ATTRIBUTION =
+  '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+
+// Leaflet's default pin builds its image URLs from where leaflet.css was loaded, which a bundler
+// changes, so the pin shows as a broken image. A div marker needs no images and takes the theme's colors.
+const markerIcon = divIcon({
+  className: 'cookbook-location-map__marker',
+  iconSize: [20, 20],
+});
+
+/** `MapContainer` reads `center` only when it mounts; this keeps a moving position in view. */
+const FollowPosition = ({
+  latitude,
+  longitude,
+}: {
+  latitude: number;
+  longitude: number;
+}) => {
+  const map = useMap();
+
+  useEffect(() => {
+    map.panTo([latitude, longitude]);
+  }, [map, latitude, longitude]);
+
+  return null;
+};
+
+export type LocationMapProps = {
+  /** Names the map for screen readers, for example "Map of Bob's location". */
+  label: string;
+  latitude: number;
+  longitude: number;
+  /** Shown over the map's top corner. */
+  badge?: ReactNode;
+  /** A small map inside a message: no zoom buttons, and the mouse wheel scrolls the list. */
+  compact?: boolean;
+};
+
+/** An OpenStreetMap map centred on one position, with a marker on it. */
+export const LocationMap = ({
+  badge,
+  compact = false,
+  label,
+  latitude,
+  longitude,
+}: LocationMapProps) => (
+  <div aria-label={label} className='cookbook-location-map' role='region'>
+    <MapContainer
+      center={[latitude, longitude]}
+      className='cookbook-location-map__map'
+      scrollWheelZoom={!compact}
+      zoom={15}
+      zoomControl={!compact}
+    >
+      <TileLayer attribution={TILE_ATTRIBUTION} url={TILE_URL} />
+      {/* Not focusable: the marker does nothing when activated. */}
+      <Marker icon={markerIcon} keyboard={false} position={[latitude, longitude]} />
+      <FollowPosition latitude={latitude} longitude={longitude} />
+    </MapContainer>
+    {badge && <div className='cookbook-location-map__badge'>{badge}</div>}
+  </div>
+);
diff --git a/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/ShareLocationDialogWithMap.css b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/ShareLocationDialogWithMap.css
new file mode 100644
index 0000000000..af176857ef
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/ShareLocationDialogWithMap.css
@@ -0,0 +1,26 @@
+@layer stream-overrides {
+  .cookbook-share-location-map {
+    overflow: hidden;
+    height: 240px;
+    border-radius: var(--str-chat__radius-lg);
+  }
+
+  .cookbook-share-location-map__status {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--str-chat__spacing-sm);
+    height: 240px;
+    padding: var(--str-chat__spacing-md);
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__background-core-surface-subtle);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-body-default);
+    text-align: center;
+  }
+
+  .cookbook-share-location-map__status p {
+    margin: 0;
+  }
+}
diff --git a/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/ShareLocationDialogWithMap.tsx b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/ShareLocationDialogWithMap.tsx
new file mode 100644
index 0000000000..fc39227d37
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/ShareLocationDialogWithMap.tsx
@@ -0,0 +1,70 @@
+import type {
+  ShareGeolocationMapProps,
+  ShareLocationDialogProps,
+} from 'stream-chat-react';
+import { Button, ShareLocationDialog } from 'stream-chat-react';
+import { LocationMap } from './LocationMap';
+import './ShareLocationDialogWithMap.css';
+
+const MINUTE = 60 * 1000;
+const HOUR = 60 * MINUTE;
+
+// Declared once: the dialog filters out durations shorter than a minute whenever it gets a new list.
+const shareDurations = [15 * MINUTE, HOUR, 3 * HOUR];
+
+/** The browser's reason, in words the user can act on. */
+const describeError = (error: GeolocationPositionError) =>
+  error.code === error.PERMISSION_DENIED
+    ? 'Location access is blocked. Allow it for this site in your browser, then try again.'
+    : "Your location isn't available right now.";
+
+const DialogMap = ({
+  geolocationPositionError,
+  latitude,
+  loadingLocation,
+  longitude,
+  restartLocationWatching,
+}: ShareGeolocationMapProps) => {
+  if (geolocationPositionError) {
+    return (
+      <div className='cookbook-share-location-map__status' role='alert'>
+        <p>{describeError(geolocationPositionError)}</p>
+        <Button
+          appearance='outline'
+          onClick={restartLocationWatching}
+          size='sm'
+          variant='secondary'
+        >
+          Try again
+        </Button>
+      </div>
+    );
+  }
+
+  // Before the first position arrives, the dialog may not report loading yet.
+  if (loadingLocation || latitude == null || longitude == null) {
+    return (
+      <div className='cookbook-share-location-map__status' role='status'>
+        Finding your location…
+      </div>
+    );
+  }
+
+  return (
+    <div className='cookbook-share-location-map'>
+      <LocationMap
+        label='Map of your location'
+        latitude={latitude}
+        longitude={longitude}
+      />
+    </div>
+  );
+};
+
+export const ShareLocationDialogWithMap = (props: ShareLocationDialogProps) => (
+  <ShareLocationDialog
+    {...props}
+    GeolocationMap={DialogMap}
+    shareDurations={shareDurations}
+  />
+);
diff --git a/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/WithLocationMaps.tsx b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/WithLocationMaps.tsx
new file mode 100644
index 0000000000..cfa3cba44f
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/WithLocationMaps.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import { WithComponents } from 'stream-chat-react';
+import { AttachmentWithMaps } from './GeolocationWithMap';
+import { ShareLocationDialogWithMap } from './ShareLocationDialogWithMap';
+import './LocationColors.css';
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = {
+  Attachment: AttachmentWithMaps,
+  ShareLocationDialog: ShareLocationDialogWithMap,
+};
+
+export const WithLocationMaps = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/default.recipe.tsx b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/default.recipe.tsx
new file mode 100644
index 0000000000..2d42254a6f
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/default.recipe.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { DemoLocationShots } from './DemoLocationShots';
+import { WithLocationMaps } from './WithLocationMaps';
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithLocationMaps>
+    <DemoLocationShots />
+    {children}
+  </WithLocationMaps>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/shots.json b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/shots.json
new file mode 100644
index 0000000000..fc9a184b6e
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/location-on-your-own-map/shots.json
@@ -0,0 +1,84 @@
+[
+  {
+    "file": "location-map.png",
+    "query": {
+      "channel": "docs-v15-cb-trip",
+      "locations": "on"
+    },
+    "waitFor": ".cookbook-location-map .leaflet-tile-loaded",
+    "settleMs": 3000
+  },
+  {
+    "file": "location-map-share-dialog.png",
+    "query": {
+      "channel": "docs-v15-cb-trip",
+      "geolocation": "fixed",
+      "dialog": "live"
+    },
+    "waitFor": ".cookbook-share-location-map .leaflet-tile-loaded",
+    "clip": ".str-chat__share-location-dialog",
+    "padding": 24,
+    "settleMs": 3000
+  },
+  {
+    "file": "location-map-share-dialog-error.png",
+    "query": {
+      "channel": "docs-v15-cb-trip",
+      "geolocation": "denied",
+      "dialog": "open"
+    },
+    "waitFor": ".cookbook-share-location-map__status button",
+    "clip": ".str-chat__share-location-dialog",
+    "padding": 24
+  },
+  {
+    "file": "location-map-composer-preview.png",
+    "query": {
+      "channel": "docs-v15-cb-trip",
+      "attach": "live"
+    },
+    "waitFor": ".str-chat__location-preview",
+    "clip": ".str-chat__message-composer-container",
+    "padding": 0
+  },
+  {
+    "file": "location-map-static.png",
+    "query": {
+      "channel": "docs-v15-cb-trip",
+      "locations": "on"
+    },
+    "waitFor": ".cookbook-location-map .leaflet-tile-loaded",
+    "clip": ".str-chat__li",
+    "hasText": "Current location",
+    "padding": 0,
+    "settleMs": 3000
+  },
+  {
+    "file": "location-map-live.png",
+    "query": {
+      "channel": "docs-v15-cb-trip",
+      "locations": "on"
+    },
+    "waitFor": ".cookbook-location-map .leaflet-tile-loaded",
+    "clip": ".str-chat__li",
+    "hasText": "Stop sharing",
+    "padding": 0,
+    "settleMs": 3000
+  },
+  {
+    "file": "location-map-ended.png",
+    "query": {
+      "channel": "docs-v15-cb-trip",
+      "locations": "on"
+    },
+    "waitFor": ".cookbook-location-map .leaflet-tile-loaded",
+    "clip": ".str-chat__li",
+    "hasText": "Location sharing ended",
+    "padding": 0,
+    "settleMs": 3000,
+    "viewport": {
+      "width": 1280,
+      "height": 1100
+    }
+  }
+]
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/DemoProductShots.tsx b/examples/cookbook/src/recipes/custom-attachments/product-card/DemoProductShots.tsx
new file mode 100644
index 0000000000..4311aae5c5
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/DemoProductShots.tsx
@@ -0,0 +1,112 @@
+import { useEffect } from 'react';
+import type { MessageResponse } from 'stream-chat';
+import { formatMessage, msToNs, nsToMs } from 'stream-chat';
+import { useChatContext } from 'stream-chat-react';
+import { catalogue } from './catalogue';
+import { toProductAttachment } from './product';
+
+/**
+ * For the screenshots only, not part of the recipe. In the channel `?channel=` on this device,
+ * without sending anything:
+ * - `?menu=open` opens the attachment menu, and `?menu=picker` the product picker from it.
+ * - `?product=<id>` adds that catalogue product to the composer.
+ * - `?quote=<message id>` quotes that message in the composer.
+ * - `?reply=<message id>` adds a reply from Cleo quoting that message to the list, as if it had
+ *   been sent. The seed can't send quoted replies; reloading the page drops it.
+ */
+
+const clickWhenVisible = (selector: string, then?: () => void) => {
+  const timer = setInterval(() => {
+    const element = document.querySelector<HTMLElement>(selector);
+    if (!element) return;
+    clearInterval(timer);
+    element.click();
+    then?.();
+  }, 200);
+  return () => clearInterval(timer);
+};
+
+const MENU_BUTTON = '.str-chat__channel .str-chat__attachment-selector__menu-button';
+const ATTACH_PRODUCT_ITEM = '.cookbook-attach-product-button';
+
+export const DemoProductShots = () => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const channelId = params.get('channel');
+    if (!channelId) return;
+    const menu = params.get('menu');
+    const product = catalogue.find(({ id }) => id === params.get('product'));
+    const quoteId = params.get('quote');
+    const replyId = params.get('reply');
+    const channel = client.channel('messaging', channelId);
+    const stops: Array<() => void> = [];
+
+    // Waits for the channel's first page and for its composer, which resets its state while it sets up.
+    const timer = setInterval(() => {
+      const items = channel.messagePaginator.items;
+      if (!items?.length || !document.querySelector('.str-chat__channel textarea'))
+        return;
+      clearInterval(timer);
+
+      if (menu) {
+        stops.push(
+          clickWhenVisible(MENU_BUTTON, () => {
+            if (menu === 'picker') stops.push(clickWhenVisible(ATTACH_PRODUCT_ITEM));
+          }),
+        );
+      }
+
+      if (product) {
+        channel.messageComposer.attachmentManager.upsertAttachments([
+          toProductAttachment(product),
+        ]);
+      }
+
+      const quoted = quoteId ? channel.messagePaginator.getItem(quoteId) : undefined;
+      if (quoted) channel.messageComposer.setQuotedMessage(quoted);
+
+      const replied = replyId ? channel.messagePaginator.getItem(replyId) : undefined;
+      const author = channel.state.getLatestValue().members[client.userId ?? '']?.user;
+      if (replied && author) {
+        const newest = Math.max(...items.map((item) => item.created_at));
+        // A minute after the newest message, so it lands at the end of the list.
+        const createdAt = msToNs(nsToMs(newest) + 60_000);
+        const reply: MessageResponse = {
+          attachments: [],
+          cid: channel.cid,
+          created_at: createdAt,
+          custom: {},
+          deleted_reply_count: 0,
+          html: '',
+          id: 'cookbook-local-product-reply',
+          latest_reactions: [],
+          mentioned_channel: false,
+          mentioned_here: false,
+          mentioned_users: [],
+          own_reactions: [],
+          pinned: false,
+          quoted_message: replied as unknown as MessageResponse,
+          quoted_message_id: replied.id,
+          reaction_counts: {},
+          reaction_scores: {},
+          reply_count: 0,
+          restricted_visibility: [],
+          shadowed: false,
+          silent: false,
+          text: 'Perfect, that one fits the shelf.',
+          type: 'regular',
+          updated_at: createdAt,
+          user: author,
+        };
+        channel.messagePaginator.ingestItem(formatMessage(reply));
+      }
+    }, 200);
+    stops.push(() => clearInterval(timer));
+
+    return () => stops.forEach((stop) => stop());
+  }, [client]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/ProductAttachmentPreview.css b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductAttachmentPreview.css
new file mode 100644
index 0000000000..713a201df6
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductAttachmentPreview.css
@@ -0,0 +1,40 @@
+@layer stream-overrides {
+  .cookbook-product-preview {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+    min-width: 220px;
+    padding: var(--str-chat__spacing-xs);
+    padding-inline-end: var(--str-chat__spacing-lg);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__background-core-surface-card);
+  }
+
+  .cookbook-product-preview__image {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--str-chat__radius-md);
+    object-fit: cover;
+  }
+
+  .cookbook-product-preview__details {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .cookbook-product-preview__title {
+    overflow: hidden;
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-emphasis);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .cookbook-product-preview__price {
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/ProductAttachmentPreview.tsx b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductAttachmentPreview.tsx
new file mode 100644
index 0000000000..80b9cc1ef1
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductAttachmentPreview.tsx
@@ -0,0 +1,42 @@
+import type { UnsupportedAttachmentPreviewProps } from 'stream-chat-react';
+import {
+  AttachmentPreviewList,
+  RemoveAttachmentPreviewButton,
+  UnsupportedAttachmentPreview,
+} from 'stream-chat-react';
+import { formatPrice, isProductAttachment } from './product';
+import './ProductAttachmentPreview.css';
+
+const ProductOrUnsupportedPreview = (props: UnsupportedAttachmentPreviewProps) => {
+  const { attachment, removeAttachments } = props;
+
+  if (!isProductAttachment(attachment)) {
+    return <UnsupportedAttachmentPreview {...props} />;
+  }
+
+  return (
+    <div className='cookbook-product-preview'>
+      {attachment.image_url && (
+        <img
+          alt=''
+          className='cookbook-product-preview__image'
+          src={attachment.image_url}
+        />
+      )}
+      <div className='cookbook-product-preview__details'>
+        <span className='cookbook-product-preview__title'>{attachment.title}</span>
+        <span className='cookbook-product-preview__price'>
+          {formatPrice(attachment.custom)}
+        </span>
+      </div>
+      <RemoveAttachmentPreviewButton
+        aria-label='Remove product'
+        onClick={() => removeAttachments([attachment.localMetadata.id])}
+      />
+    </div>
+  );
+};
+
+export const ProductAttachmentPreviewList = () => (
+  <AttachmentPreviewList UnsupportedAttachmentPreview={ProductOrUnsupportedPreview} />
+);
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/ProductCard.css b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductCard.css
new file mode 100644
index 0000000000..dfb392ad57
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductCard.css
@@ -0,0 +1,52 @@
+@layer stream-overrides {
+  .cookbook-product-card {
+    overflow: hidden;
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__background-core-surface-card);
+    color: var(--str-chat__text-primary);
+  }
+
+  .cookbook-product-card__image {
+    display: block;
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+  }
+
+  .cookbook-product-card__body {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+    padding: var(--str-chat__spacing-sm);
+  }
+
+  .cookbook-product-card__details {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .cookbook-product-card__title {
+    font: var(--str-chat__font-body-emphasis);
+  }
+
+  .cookbook-product-card__price {
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-product-card__link {
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md);
+    border-radius: var(--str-chat__radius-max);
+    background: var(--str-chat__accent-primary);
+    color: var(--str-chat__text-on-accent);
+    font: var(--str-chat__font-caption-emphasis);
+    text-decoration: none;
+  }
+
+  .cookbook-product-card__link:focus-visible {
+    outline: 2px solid var(--str-chat__accent-primary);
+    outline-offset: 2px;
+  }
+}
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/ProductCard.tsx b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductCard.tsx
new file mode 100644
index 0000000000..a44e7424da
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductCard.tsx
@@ -0,0 +1,41 @@
+import type { AttachmentProps, UnsupportedAttachmentProps } from 'stream-chat-react';
+import { Attachment, UnsupportedAttachment } from 'stream-chat-react';
+import { formatPrice, isProductAttachment } from './product';
+import './ProductCard.css';
+
+const ProductOrUnsupported = ({ attachment }: UnsupportedAttachmentProps) => {
+  if (!isProductAttachment(attachment)) return <UnsupportedAttachment />;
+
+  const { product_url } = attachment.custom;
+
+  return (
+    <div className='cookbook-product-card'>
+      {attachment.image_url && (
+        <img alt='' className='cookbook-product-card__image' src={attachment.image_url} />
+      )}
+      <div className='cookbook-product-card__body'>
+        <div className='cookbook-product-card__details'>
+          <span className='cookbook-product-card__title'>{attachment.title}</span>
+          <span className='cookbook-product-card__price'>
+            {formatPrice(attachment.custom)}
+          </span>
+        </div>
+        {product_url && (
+          <a
+            aria-label={`View ${attachment.title ?? 'product'}`}
+            className='cookbook-product-card__link'
+            href={product_url}
+            rel='noreferrer'
+            target='_blank'
+          >
+            View
+          </a>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const ProductAttachment = (props: AttachmentProps) => (
+  <Attachment {...props} UnsupportedAttachment={ProductOrUnsupported} />
+);
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/ProductMessagePreview.css b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductMessagePreview.css
new file mode 100644
index 0000000000..0b3872a39d
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductMessagePreview.css
@@ -0,0 +1,23 @@
+@layer stream-overrides {
+  .cookbook-product-message-preview {
+    display: flex;
+    gap: var(--str-chat__spacing-xxs);
+    min-width: 0;
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-product-message-preview__sender {
+    flex-shrink: 0;
+    color: var(--str-chat__text-tertiary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-product-message-preview__text {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/ProductMessagePreview.tsx b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductMessagePreview.tsx
new file mode 100644
index 0000000000..0a1615fd5b
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductMessagePreview.tsx
@@ -0,0 +1,23 @@
+import type { SummarizedMessagePreviewProps } from 'stream-chat-react';
+import { SummarizedMessagePreview, useLatestMessagePreview } from 'stream-chat-react';
+import { describeProduct, findProductAttachment } from './product';
+import './ProductMessagePreview.css';
+
+export const ProductMessagePreview = (props: SummarizedMessagePreviewProps) => {
+  // The sender prefix the default preview shows: "You", or the sender's name in a group.
+  const { senderName } = useLatestMessagePreview(props);
+  const product = props.latestMessage && findProductAttachment(props.latestMessage);
+
+  if (!product) return <SummarizedMessagePreview {...props} />;
+
+  return (
+    <div className='cookbook-product-message-preview'>
+      {senderName && (
+        <span className='cookbook-product-message-preview__sender'>{senderName}:</span>
+      )}
+      <span className='cookbook-product-message-preview__text'>
+        {describeProduct(product)}
+      </span>
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/ProductPicker.css b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductPicker.css
new file mode 100644
index 0000000000..b0c3687aa9
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductPicker.css
@@ -0,0 +1,45 @@
+@layer stream-overrides {
+  .cookbook-product-picker__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-xs);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .cookbook-product-picker__item {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+    width: 100%;
+    padding: var(--str-chat__spacing-xs);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__background-core-surface-card);
+    color: var(--str-chat__text-primary);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .cookbook-product-picker__item:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-product-picker__image {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--str-chat__radius-md);
+    object-fit: cover;
+  }
+
+  .cookbook-product-picker__title {
+    flex: 1;
+    font: var(--str-chat__font-body-emphasis);
+  }
+
+  .cookbook-product-picker__price {
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/ProductPicker.tsx b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductPicker.tsx
new file mode 100644
index 0000000000..bfd8e4fd8c
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductPicker.tsx
@@ -0,0 +1,104 @@
+import type {
+  AttachmentSelectorAction,
+  AttachmentSelectorActionProps,
+  AttachmentSelectorModalContentProps,
+} from 'stream-chat-react';
+import {
+  AttachmentSelector,
+  ContextMenuButton,
+  createIcon,
+  defaultAttachmentSelectorActionSet,
+  Prompt,
+  useContextMenuContext,
+  useMessageComposerController,
+} from 'stream-chat-react';
+import { catalogue } from './catalogue';
+import type { Product } from './product';
+import { formatPrice, toProductAttachment } from './product';
+import './ProductPicker.css';
+
+export const ATTACH_PRODUCT_ACTION = 'attachProduct';
+
+const IconBag = createIcon(
+  'IconBag',
+  <path
+    d='M4 7h12l-1 10H5L4 7Zm3 0V6a3 3 0 0 1 6 0v1'
+    fill='none'
+    stroke='currentColor'
+    strokeLinejoin='round'
+    strokeWidth='1.5'
+  />,
+);
+
+/** The menu item: opens the picker in the selector's modal. */
+export const AttachProductButton = ({
+  openModalForAction,
+}: AttachmentSelectorActionProps) => {
+  const { closeMenu } = useContextMenuContext();
+
+  return (
+    <ContextMenuButton
+      className='cookbook-attach-product-button'
+      Icon={IconBag}
+      onClick={() => {
+        openModalForAction(ATTACH_PRODUCT_ACTION);
+        closeMenu();
+      }}
+    >
+      Attach product
+    </ContextMenuButton>
+  );
+};
+
+/** The modal's content: picking a product adds it to the composer and closes the modal. */
+export const ProductPicker = ({ close }: AttachmentSelectorModalContentProps) => {
+  const messageComposer = useMessageComposerController();
+
+  return (
+    <Prompt.Root className='cookbook-product-picker'>
+      <Prompt.Header close={close} title='Attach a product' />
+      <Prompt.Body>
+        <ul className='cookbook-product-picker__list'>
+          {catalogue.map((product: Product) => (
+            <li key={product.id}>
+              <button
+                className='cookbook-product-picker__item'
+                onClick={() => {
+                  messageComposer.attachmentManager.upsertAttachments([
+                    toProductAttachment(product),
+                  ]);
+                  close();
+                }}
+                type='button'
+              >
+                <img
+                  alt=''
+                  className='cookbook-product-picker__image'
+                  src={product.imageUrl}
+                />
+                <span className='cookbook-product-picker__title'>{product.title}</span>
+                <span className='cookbook-product-picker__price'>
+                  {formatPrice(product)}
+                </span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </Prompt.Body>
+    </Prompt.Root>
+  );
+};
+
+// Declared once: the selector filters its actions again whenever it gets a new list.
+const attachmentSelectorActionSet: AttachmentSelectorAction[] = [
+  ...defaultAttachmentSelectorActionSet,
+  {
+    ActionButton: AttachProductButton,
+    ModalContent: ProductPicker,
+    type: ATTACH_PRODUCT_ACTION,
+  },
+];
+
+export const ProductAttachmentSelector = () => (
+  <AttachmentSelector attachmentSelectorActionSet={attachmentSelectorActionSet} />
+);
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/ProductQuotedMessage.tsx b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductQuotedMessage.tsx
new file mode 100644
index 0000000000..2470c38b37
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/ProductQuotedMessage.tsx
@@ -0,0 +1,70 @@
+import type { LocalMessage, MessageComposerState, MessageResponse } from 'stream-chat';
+import type { QuotedMessagePreviewProps, QuotedMessageProps } from 'stream-chat-react';
+import {
+  QuotedMessagePreview,
+  QuotedMessagePreviewUI,
+  useMessageComposerController,
+  useMessageContext,
+  useMessagePaginator,
+  useStateStore,
+} from 'stream-chat-react';
+import { describeProduct, findProductAttachment } from './product';
+
+/**
+ * The quoted preview shows the message's text, or a label for the attachment types it knows. A
+ * product message has no text, so it gets one to show.
+ */
+const withProductText = <T extends LocalMessage | MessageResponse>(message: T): T => {
+  const product = findProductAttachment(message);
+  return product && !message.text
+    ? { ...message, text: describeProduct(product) }
+    : message;
+};
+
+/** The quote above a reply in the message list. */
+export const ProductQuotedMessage = ({
+  renderText: propsRenderText,
+}: QuotedMessageProps) => {
+  const { message, renderText: contextRenderText } = useMessageContext();
+  const messagePaginator = useMessagePaginator();
+  const quotedMessage = message.quoted_message;
+
+  if (!quotedMessage) return null;
+
+  return (
+    <QuotedMessagePreviewUI
+      onClick={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        void messagePaginator.jumpToMessage(quotedMessage.id);
+      }}
+      quotedMessage={withProductText(quotedMessage)}
+      renderText={propsRenderText ?? contextRenderText}
+    />
+  );
+};
+
+const quotedMessageSelector = ({ quotedMessage }: MessageComposerState) => ({
+  quotedMessage,
+});
+
+/** The quote above the composer's input while the user writes a reply. */
+export const ProductQuotedMessagePreview = (props: QuotedMessagePreviewProps) => {
+  const messageComposer = useMessageComposerController();
+  const { quotedMessage } = useStateStore(messageComposer.state, quotedMessageSelector);
+
+  if (!quotedMessage || !findProductAttachment(quotedMessage)) {
+    return <QuotedMessagePreview {...props} />;
+  }
+
+  return (
+    // The SDK's slot class keeps the quote placed as the default preview places it.
+    <div className='str-chat__message-composer__quoted-message-preview-slot'>
+      <QuotedMessagePreviewUI
+        {...props}
+        onRemove={() => messageComposer.setQuotedMessage(null)}
+        quotedMessage={withProductText(quotedMessage)}
+      />
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/WithProductAttachments.tsx b/examples/cookbook/src/recipes/custom-attachments/product-card/WithProductAttachments.tsx
new file mode 100644
index 0000000000..2535f32ecc
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/WithProductAttachments.tsx
@@ -0,0 +1,24 @@
+import type { PropsWithChildren } from 'react';
+import { WithComponents } from 'stream-chat-react';
+import { ProductAttachmentPreviewList } from './ProductAttachmentPreview';
+import { ProductAttachment } from './ProductCard';
+import { ProductMessagePreview } from './ProductMessagePreview';
+import { ProductAttachmentSelector } from './ProductPicker';
+import {
+  ProductQuotedMessage,
+  ProductQuotedMessagePreview,
+} from './ProductQuotedMessage';
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = {
+  Attachment: ProductAttachment,
+  AttachmentPreviewList: ProductAttachmentPreviewList,
+  AttachmentSelector: ProductAttachmentSelector,
+  QuotedMessage: ProductQuotedMessage,
+  QuotedMessagePreview: ProductQuotedMessagePreview,
+  SummarizedMessagePreview: ProductMessagePreview,
+};
+
+export const WithProductAttachments = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/catalogue.ts b/examples/cookbook/src/recipes/custom-attachments/product-card/catalogue.ts
new file mode 100644
index 0000000000..484fa555bc
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/catalogue.ts
@@ -0,0 +1,29 @@
+import type { Product } from './product';
+
+/** The products the picker offers. An app would load them from its shop. */
+export const catalogue: Product[] = [
+  {
+    currency: 'EUR',
+    id: 'glass-teapot',
+    imageUrl: 'https://picsum.photos/id/225/480/360',
+    price: 34,
+    title: 'Glass teapot',
+    url: 'https://example.com/shop/glass-teapot',
+  },
+  {
+    currency: 'EUR',
+    id: 'honey-jar',
+    imageUrl: 'https://picsum.photos/id/312/480/360',
+    price: 9.5,
+    title: 'Honey jar',
+    url: 'https://example.com/shop/honey-jar',
+  },
+  {
+    currency: 'EUR',
+    id: 'sprinkled-doughnut',
+    imageUrl: 'https://picsum.photos/id/488/480/360',
+    price: 3.5,
+    title: 'Sprinkled doughnut',
+    url: 'https://example.com/shop/sprinkled-doughnut',
+  },
+];
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/default.recipe.tsx b/examples/cookbook/src/recipes/custom-attachments/product-card/default.recipe.tsx
new file mode 100644
index 0000000000..604253ebf6
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/default.recipe.tsx
@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react';
+import { useEffect } from 'react';
+import { useChatContext } from 'stream-chat-react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { DemoProductShots } from './DemoProductShots';
+import { installProductAttachments } from './installProductAttachments';
+import { WithProductAttachments } from './WithProductAttachments';
+
+const ProductAttachmentsSetup = () => {
+  const { client } = useChatContext();
+  useEffect(() => installProductAttachments(client), [client]);
+  return null;
+};
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithProductAttachments>
+    <ProductAttachmentsSetup />
+    <DemoProductShots />
+    {children}
+  </WithProductAttachments>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/demo-data.json b/examples/cookbook/src/recipes/custom-attachments/product-card/demo-data.json
new file mode 100644
index 0000000000..61287f7ae5
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/demo-data.json
@@ -0,0 +1,31 @@
+{
+  "channels": [
+    {
+      "id": "docs-v15-cb-shop",
+      "name": "Shop",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-bob", "docs-v15-ck-cara"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-shop-1",
+          "user": "docs-v15-ck-cara",
+          "text": "The office kitchen needs a new teapot. Any ideas?"
+        },
+        {
+          "id": "docs-v15-ck-shop-2",
+          "user": "docs-v15-ck-bob",
+          "text": "",
+          "attachments": [
+            {
+              "type": "product",
+              "title": "Glass teapot",
+              "image_url": "https://picsum.photos/id/225/480/360",
+              "currency": "EUR",
+              "price": 34,
+              "product_url": "https://example.com/shop/glass-teapot"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/installProductAttachments.ts b/examples/cookbook/src/recipes/custom-attachments/product-card/installProductAttachments.ts
new file mode 100644
index 0000000000..9892d4577d
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/installProductAttachments.ts
@@ -0,0 +1,32 @@
+import type { StreamChat } from 'stream-chat';
+import {
+  createDraftProductAttachmentsMiddleware,
+  createProductAttachmentsMiddleware,
+  DRAFT_PRODUCT_ATTACHMENTS_MIDDLEWARE_ID,
+  PRODUCT_ATTACHMENTS_MIDDLEWARE_ID,
+} from './productAttachmentsMiddleware';
+
+/** Adds the product middleware to every composer; returns a function that stops it. */
+export const installProductAttachments = (client: StreamChat) => {
+  client.config.setSetupFunction('messageComposer', ({ composer }) => {
+    composer.compositionMiddlewareExecutor.insert({
+      middleware: [createProductAttachmentsMiddleware(composer)],
+      position: { after: 'stream-io/message-composer-middleware/attachments' },
+      unique: true,
+    });
+    composer.draftCompositionMiddlewareExecutor.insert({
+      middleware: [createDraftProductAttachmentsMiddleware(composer)],
+      position: { after: 'stream-io/message-composer-middleware/draft-attachments' },
+      unique: true,
+    });
+
+    return () => {
+      composer.compositionMiddlewareExecutor.remove(PRODUCT_ATTACHMENTS_MIDDLEWARE_ID);
+      composer.draftCompositionMiddlewareExecutor.remove(
+        DRAFT_PRODUCT_ATTACHMENTS_MIDDLEWARE_ID,
+      );
+    };
+  });
+
+  return () => client.config.setSetupFunction('messageComposer', null);
+};
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/product.ts b/examples/cookbook/src/recipes/custom-attachments/product-card/product.ts
new file mode 100644
index 0000000000..ae74e92b43
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/product.ts
@@ -0,0 +1,68 @@
+import type { Attachment, LocalAttachment } from 'stream-chat';
+
+declare module 'stream-chat' {
+  // The fields a `product` attachment keeps in its `custom`. Optional, because every attachment
+  // in the app shares this interface.
+  interface CustomAttachmentData {
+    currency?: string;
+    price?: number;
+    product_url?: string;
+  }
+}
+
+export const PRODUCT_ATTACHMENT_TYPE = 'product';
+
+export type Product = {
+  currency: string;
+  id: string;
+  imageUrl: string;
+  price: number;
+  title: string;
+  url: string;
+};
+
+/** True for an attachment this app sends for a product. */
+export const isProductAttachment = (attachment: Attachment) =>
+  attachment.type === PRODUCT_ATTACHMENT_TYPE;
+
+/** The message's first product attachment, if it has one. */
+export const findProductAttachment = (message: { attachments?: Attachment[] }) =>
+  message.attachments?.find(isProductAttachment);
+
+/** The price in its currency, for example "€34.00". */
+export const formatPrice = ({
+  currency,
+  price,
+}: {
+  currency?: string;
+  price?: number;
+}) =>
+  price === undefined || !currency
+    ? ''
+    : new Intl.NumberFormat(undefined, { currency, style: 'currency' }).format(price);
+
+/** One line for places that show text only, for example "🛍 Glass teapot · €34.00". */
+export const describeProduct = (attachment: Attachment) =>
+  [`🛍 ${attachment.title ?? 'Product'}`, formatPrice(attachment.custom)]
+    .filter(Boolean)
+    .join(' · ');
+
+/**
+ * The attachment the composer adds for a product. Nothing is uploaded, but the composer sends only
+ * attachments whose upload state is `finished`, and the type requires a file, so it gets an empty one.
+ */
+export const toProductAttachment = (product: Product): LocalAttachment => ({
+  custom: {
+    currency: product.currency,
+    price: product.price,
+    product_url: product.url,
+  },
+  image_url: product.imageUrl,
+  localMetadata: {
+    file: new File([], product.id),
+    id: crypto.randomUUID(),
+    uploadState: 'finished',
+  },
+  title: product.title,
+  type: PRODUCT_ATTACHMENT_TYPE,
+});
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/productAttachmentsMiddleware.ts b/examples/cookbook/src/recipes/custom-attachments/product-card/productAttachmentsMiddleware.ts
new file mode 100644
index 0000000000..0a7703f9eb
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/productAttachmentsMiddleware.ts
@@ -0,0 +1,82 @@
+import type {
+  Attachment,
+  LocalAttachment,
+  MessageComposer,
+  MessageComposerMiddlewareState,
+  MessageCompositionMiddleware,
+  MessageDraftComposerMiddlewareValueState,
+  MessageDraftCompositionMiddleware,
+  MiddlewareHandlerParams,
+} from 'stream-chat';
+import { isProductAttachment } from './product';
+
+export const PRODUCT_ATTACHMENTS_MIDDLEWARE_ID = 'my-app/product-attachments';
+export const DRAFT_PRODUCT_ATTACHMENTS_MIDDLEWARE_ID = 'my-app/draft-product-attachments';
+
+/** The attachment as the message carries it: without the composer's `localMetadata`. */
+const toAttachment = (localAttachment: LocalAttachment) => {
+  const attachment: Partial<LocalAttachment> = { ...localAttachment };
+  delete attachment.localMetadata;
+  return attachment as Attachment;
+};
+
+/**
+ * The attachments with every product in the composer, whatever its upload state. The attachments
+ * middleware adds only finished uploads, and a product loaded from a message being edited or from a
+ * draft has no upload state.
+ */
+const withComposerProducts = (
+  composer: MessageComposer,
+  attachments: Attachment[] = [],
+): Attachment[] | undefined => {
+  const products = composer.attachmentManager.attachments
+    .filter(isProductAttachment)
+    .map(toAttachment);
+  if (!products.length) return undefined;
+  return [
+    ...attachments.filter((attachment) => !isProductAttachment(attachment)),
+    ...products,
+  ];
+};
+
+/** Puts the composer's products into the message it sends or saves. */
+export const createProductAttachmentsMiddleware = (
+  composer: MessageComposer,
+): MessageCompositionMiddleware => ({
+  id: PRODUCT_ATTACHMENTS_MIDDLEWARE_ID,
+  handlers: {
+    compose: ({
+      forward,
+      next,
+      state,
+    }: MiddlewareHandlerParams<MessageComposerMiddlewareState>) => {
+      const attachments = withComposerProducts(composer, state.message.attachments);
+      if (!attachments) return forward();
+
+      return next({
+        ...state,
+        localMessage: { ...state.localMessage, attachments },
+        message: { ...state.message, attachments },
+      });
+    },
+  },
+});
+
+/** Puts the composer's products into the draft it saves. */
+export const createDraftProductAttachmentsMiddleware = (
+  composer: MessageComposer,
+): MessageDraftCompositionMiddleware => ({
+  id: DRAFT_PRODUCT_ATTACHMENTS_MIDDLEWARE_ID,
+  handlers: {
+    compose: ({
+      forward,
+      next,
+      state,
+    }: MiddlewareHandlerParams<MessageDraftComposerMiddlewareValueState>) => {
+      const attachments = withComposerProducts(composer, state.draft.attachments);
+      if (!attachments) return forward();
+
+      return next({ ...state, draft: { ...state.draft, attachments } });
+    },
+  },
+});
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/sdk-default.recipe.tsx b/examples/cookbook/src/recipes/custom-attachments/product-card/sdk-default.recipe.tsx
new file mode 100644
index 0000000000..f316c3b69c
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/sdk-default.recipe.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { DemoProductShots } from './DemoProductShots';
+
+// The SDK's defaults, for the "before" screenshots: no overrides.
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <>
+    <DemoProductShots />
+    {children}
+  </>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/custom-attachments/product-card/shots.json b/examples/cookbook/src/recipes/custom-attachments/product-card/shots.json
new file mode 100644
index 0000000000..4c50bb04e4
--- /dev/null
+++ b/examples/cookbook/src/recipes/custom-attachments/product-card/shots.json
@@ -0,0 +1,71 @@
+[
+  {
+    "file": "product-card.png",
+    "query": { "channel": "docs-v15-cb-shop" },
+    "waitFor": ".cookbook-product-card__image",
+    "settleMs": 1500
+  },
+  {
+    "file": "product-card-sdk-default.png",
+    "variant": "sdk-default",
+    "query": { "channel": "docs-v15-cb-shop", "reply": "docs-v15-ck-shop-2" },
+    "waitFor": ".str-chat__quoted-message-preview",
+    "clip": ".str-chat__message-list .str-chat__ul",
+    "padding": 0
+  },
+  {
+    "file": "product-card-attachment-menu.png",
+    "query": { "channel": "docs-v15-cb-shop", "menu": "open" },
+    "waitFor": ".cookbook-attach-product-button",
+    "clip": ".str-chat__attachment-selector-actions-menu",
+    "padding": 56
+  },
+  {
+    "file": "product-card-picker.png",
+    "query": { "channel": "docs-v15-cb-shop", "menu": "picker" },
+    "waitFor": ".cookbook-product-picker__image",
+    "clip": ".cookbook-product-picker",
+    "padding": 24,
+    "settleMs": 1500
+  },
+  {
+    "file": "product-card-composer-preview.png",
+    "query": { "channel": "docs-v15-cb-shop", "product": "honey-jar" },
+    "waitFor": ".cookbook-product-preview__image",
+    "clip": ".str-chat__message-composer-container",
+    "padding": 0,
+    "settleMs": 1500
+  },
+  {
+    "file": "product-card-message.png",
+    "query": { "channel": "docs-v15-cb-shop" },
+    "waitFor": ".cookbook-product-card__image",
+    "clip": ".str-chat__li",
+    "hasText": "Glass teapot",
+    "padding": 0,
+    "settleMs": 1500
+  },
+  {
+    "file": "product-card-channel-preview.png",
+    "query": { "channel": "docs-v15-cb-shop" },
+    "waitFor": ".cookbook-product-message-preview",
+    "clip": ".str-chat__channel-list-item-container",
+    "hasText": "Glass teapot",
+    "padding": 0
+  },
+  {
+    "file": "product-card-quoted-reply.png",
+    "query": { "channel": "docs-v15-cb-shop", "reply": "docs-v15-ck-shop-2" },
+    "waitFor": ".str-chat__quoted-message-preview",
+    "clip": ".str-chat__li",
+    "hasText": "fits the shelf",
+    "padding": 0
+  },
+  {
+    "file": "product-card-quoted-composer.png",
+    "query": { "channel": "docs-v15-cb-shop", "quote": "docs-v15-ck-shop-2" },
+    "waitFor": ".str-chat__message-composer .str-chat__quoted-message-preview",
+    "clip": ".str-chat__message-composer-container",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/headers/channel-header/CustomChannelHeader.css b/examples/cookbook/src/recipes/headers/channel-header/CustomChannelHeader.css
new file mode 100644
index 0000000000..c79d035b7f
--- /dev/null
+++ b/examples/cookbook/src/recipes/headers/channel-header/CustomChannelHeader.css
@@ -0,0 +1,25 @@
+@layer stream-overrides {
+  .cookbook-channel-header {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+    border-bottom: 1px solid var(--str-chat__border-core-default);
+    background: var(--str-chat__background-core-elevation-1);
+  }
+
+  .cookbook-channel-header__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .cookbook-channel-header__title {
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-heading-xs);
+  }
+
+  .cookbook-channel-header__subtitle {
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/headers/channel-header/CustomChannelHeader.tsx b/examples/cookbook/src/recipes/headers/channel-header/CustomChannelHeader.tsx
new file mode 100644
index 0000000000..09a878fe4b
--- /dev/null
+++ b/examples/cookbook/src/recipes/headers/channel-header/CustomChannelHeader.tsx
@@ -0,0 +1,70 @@
+import type { ChannelConfig, ChannelStateData, EventPayload } from 'stream-chat';
+import {
+  ChannelAvatar,
+  TypingIndicatorHeader,
+  useChannel,
+  useChannelPreviewInfo,
+  useChatContext,
+  useStateStore,
+  WorkspaceNavigationBackButton,
+  WorkspaceNavigationCloseButton,
+} from 'stream-chat-react';
+import './CustomChannelHeader.css';
+
+const channelStateSelector = ({
+  memberCount,
+  typing,
+  watcherCount,
+}: ChannelStateData) => ({
+  memberCount,
+  typing,
+  watcherCount,
+});
+
+const typingEventsSelector = ({ typingEvents }: ChannelConfig) => ({
+  typingEventsEnabled: typingEvents.enabled,
+});
+
+export const CustomChannelHeader = () => {
+  const { client } = useChatContext();
+  const channel = useChannel();
+  const { memberCount, typing, watcherCount } = useStateStore(
+    channel.state,
+    channelStateSelector,
+  );
+  const { typingEventsEnabled } = useStateStore(
+    channel.configState,
+    typingEventsSelector,
+  );
+  const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
+    channel,
+  });
+
+  // Others typing in the channel itself; replies typed in threads carry a parent_id.
+  const someoneIsTyping = (Object.values(typing) as EventPayload<'typing.start'>[]).some(
+    ({ parent_id, user }) => !parent_id && user?.id !== client.userId,
+  );
+
+  return (
+    <div className='cookbook-channel-header'>
+      <WorkspaceNavigationBackButton />
+      <ChannelAvatar
+        displayMembers={groupChannelDisplayInfo.members}
+        imageUrl={displayImage}
+        size='lg'
+        userName={displayTitle}
+      />
+      <div className='cookbook-channel-header__content'>
+        <div className='cookbook-channel-header__title'>{displayTitle}</div>
+        <div className='cookbook-channel-header__subtitle'>
+          {typingEventsEnabled && someoneIsTyping ? (
+            <TypingIndicatorHeader />
+          ) : (
+            `${memberCount} members · ${watcherCount} online`
+          )}
+        </div>
+      </div>
+      <WorkspaceNavigationCloseButton />
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/headers/channel-header/default.recipe.tsx b/examples/cookbook/src/recipes/headers/channel-header/default.recipe.tsx
new file mode 100644
index 0000000000..b3759c6e09
--- /dev/null
+++ b/examples/cookbook/src/recipes/headers/channel-header/default.recipe.tsx
@@ -0,0 +1,6 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { CustomChannelHeader } from './CustomChannelHeader';
+
+const recipe: RecipeConfig = { ChannelHeader: CustomChannelHeader };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/headers/channel-header/shots.json b/examples/cookbook/src/recipes/headers/channel-header/shots.json
new file mode 100644
index 0000000000..a619a41ee9
--- /dev/null
+++ b/examples/cookbook/src/recipes/headers/channel-header/shots.json
@@ -0,0 +1,22 @@
+[
+  {
+    "file": "custom-channel-header.png",
+    "query": {
+      "channel": "docs-v15-cb-design"
+    },
+    "clip": ".cookbook-channel-header",
+    "padding": 0
+  },
+  {
+    "file": "custom-channel-header-typing.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "typing",
+      "as": "docs-v15-ck-bob"
+    },
+    "waitFor": ".cookbook-channel-header__subtitle:has-text('is typing')",
+    "clip": ".cookbook-channel-header",
+    "padding": 0,
+    "settleMs": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/headers/thread-header/CustomThreadHeader.css b/examples/cookbook/src/recipes/headers/thread-header/CustomThreadHeader.css
new file mode 100644
index 0000000000..0fed5e400d
--- /dev/null
+++ b/examples/cookbook/src/recipes/headers/thread-header/CustomThreadHeader.css
@@ -0,0 +1,33 @@
+@layer stream-overrides {
+  .cookbook-thread-header {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+    border-bottom: 1px solid var(--str-chat__border-core-default);
+    background: var(--str-chat__background-core-elevation-1);
+  }
+
+  .cookbook-thread-header__participants {
+    display: flex;
+    gap: var(--str-chat__spacing-xxs);
+  }
+
+  .cookbook-thread-header__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .cookbook-thread-header__title {
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-heading-xs);
+  }
+
+  .cookbook-thread-header__subtitle {
+    overflow: hidden;
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
diff --git a/examples/cookbook/src/recipes/headers/thread-header/CustomThreadHeader.tsx b/examples/cookbook/src/recipes/headers/thread-header/CustomThreadHeader.tsx
new file mode 100644
index 0000000000..96547ef767
--- /dev/null
+++ b/examples/cookbook/src/recipes/headers/thread-header/CustomThreadHeader.tsx
@@ -0,0 +1,75 @@
+import type {
+  ChannelConfig,
+  ChannelStateData,
+  EventPayload,
+  ThreadState,
+} from 'stream-chat';
+import {
+  Avatar,
+  TypingIndicatorHeader,
+  useChannel,
+  useChannelPreviewInfo,
+  useChatContext,
+  useStateStore,
+  useThreadContext,
+  WorkspaceNavigationBackButton,
+  WorkspaceNavigationCloseButton,
+} from 'stream-chat-react';
+import './CustomThreadHeader.css';
+
+const threadStateSelector = ({ participants, replyCount }: ThreadState) => ({
+  participants,
+  replyCount,
+});
+const typingSelector = ({ typing }: ChannelStateData) => ({ typing });
+const typingEventsSelector = ({ typingEvents }: ChannelConfig) => ({
+  typingEventsEnabled: typingEvents.enabled,
+});
+
+export const CustomThreadHeader = () => {
+  const { client } = useChatContext();
+  const channel = useChannel();
+  const thread = useThreadContext();
+  const { participants = [], replyCount = 0 } =
+    useStateStore(thread?.state, threadStateSelector) ?? {};
+  const { typing } = useStateStore(channel.state, typingSelector);
+  const { typingEventsEnabled } = useStateStore(
+    channel.configState,
+    typingEventsSelector,
+  );
+  const { displayTitle } = useChannelPreviewInfo({ channel });
+
+  // Others typing a reply in this thread. Typing events carry the thread's id as parent_id.
+  const someoneIsTyping = (Object.values(typing) as EventPayload<'typing.start'>[]).some(
+    ({ parent_id, user }) => parent_id === thread?.id && user?.id !== client.userId,
+  );
+
+  return (
+    <div className='cookbook-thread-header'>
+      <WorkspaceNavigationBackButton />
+      <div className='cookbook-thread-header__participants'>
+        {participants.map(({ user }) =>
+          user ? (
+            <Avatar
+              imageUrl={user.image}
+              key={user.id}
+              size='sm'
+              userName={user.name ?? user.id}
+            />
+          ) : null,
+        )}
+      </div>
+      <div className='cookbook-thread-header__content'>
+        <div className='cookbook-thread-header__title'>Thread</div>
+        <div className='cookbook-thread-header__subtitle'>
+          {typingEventsEnabled && someoneIsTyping ? (
+            <TypingIndicatorHeader threadList />
+          ) : (
+            `${displayTitle} · ${replyCount} ${replyCount === 1 ? 'reply' : 'replies'}`
+          )}
+        </div>
+      </div>
+      <WorkspaceNavigationCloseButton />
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/headers/thread-header/ThreadPanel.tsx b/examples/cookbook/src/recipes/headers/thread-header/ThreadPanel.tsx
new file mode 100644
index 0000000000..b610425497
--- /dev/null
+++ b/examples/cookbook/src/recipes/headers/thread-header/ThreadPanel.tsx
@@ -0,0 +1,19 @@
+import { MessageComposer, MessageList, useThreadContext } from 'stream-chat-react';
+import { ThreadSlot, useActiveThread } from 'stream-chat-react/slot-layout';
+import { CustomThreadHeader } from './CustomThreadHeader';
+
+// Marks the thread as on screen, so its new replies are marked read.
+const ActiveThread = () => {
+  const thread = useThreadContext();
+  useActiveThread({ activeThread: thread });
+  return null;
+};
+
+export const ThreadPanel = () => (
+  <ThreadSlot slot='thread'>
+    <ActiveThread />
+    <CustomThreadHeader />
+    <MessageList />
+    <MessageComposer />
+  </ThreadSlot>
+);
diff --git a/examples/cookbook/src/recipes/headers/thread-header/default.recipe.tsx b/examples/cookbook/src/recipes/headers/thread-header/default.recipe.tsx
new file mode 100644
index 0000000000..a7bc3c3ba0
--- /dev/null
+++ b/examples/cookbook/src/recipes/headers/thread-header/default.recipe.tsx
@@ -0,0 +1,26 @@
+import {
+  ChannelHeader,
+  ChannelNavigation,
+  MessageComposer,
+  MessageList,
+} from 'stream-chat-react';
+import { ChannelSlot } from 'stream-chat-react/slot-layout';
+import type { RecipeConfig } from '../../../base/recipe';
+import { ThreadPanel } from './ThreadPanel';
+
+// The base app's channels view, with ThreadPanel in the thread's place.
+const ChannelsView = () => (
+  <>
+    <ChannelNavigation />
+    <ChannelSlot slot='channel'>
+      <ChannelHeader />
+      <MessageList />
+      <MessageComposer />
+    </ChannelSlot>
+    <ThreadPanel />
+  </>
+);
+
+const recipe: RecipeConfig = { chatViewProps: { views: { channels: <ChannelsView /> } } };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/headers/thread-header/shots.json b/examples/cookbook/src/recipes/headers/thread-header/shots.json
new file mode 100644
index 0000000000..d870bbf347
--- /dev/null
+++ b/examples/cookbook/src/recipes/headers/thread-header/shots.json
@@ -0,0 +1,12 @@
+[
+  {
+    "file": "custom-thread-header.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "thread": "docs-v15-ck-design-4"
+    },
+    "waitFor": ".cookbook-thread-header:has-text('replies')",
+    "clip": ".cookbook-thread-header",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/layout/channel-and-thread-side-by-side/default.recipe.tsx b/examples/cookbook/src/recipes/layout/channel-and-thread-side-by-side/default.recipe.tsx
new file mode 100644
index 0000000000..b4771a685c
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/channel-and-thread-side-by-side/default.recipe.tsx
@@ -0,0 +1,12 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { ChannelsView, layouts, ThreadsView, viewActionSlotResolvers } from './views';
+
+const recipe: RecipeConfig = {
+  chatViewProps: {
+    layouts,
+    viewActionSlotResolvers,
+    views: { channels: <ChannelsView />, threads: <ThreadsView /> },
+  },
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/layout/channel-and-thread-side-by-side/layout.css b/examples/cookbook/src/recipes/layout/channel-and-thread-side-by-side/layout.css
new file mode 100644
index 0000000000..f400113085
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/channel-and-thread-side-by-side/layout.css
@@ -0,0 +1,12 @@
+@layer stream-overrides {
+  .str-chat {
+    --str-chat__channel-list-width: 320px;
+    --str-chat__thread-list-width: 320px;
+  }
+
+  /* cookbook-allow-layout: the SDK has no variable for the width of a thread beside a channel. */
+  /* Beside the channel, the thread is a 400px column. The channel takes the rest. */
+  .str-chat__chat-view__channels > .str-chat__thread-container {
+    flex: 0 0 400px;
+  }
+}
diff --git a/examples/cookbook/src/recipes/layout/channel-and-thread-side-by-side/shots.json b/examples/cookbook/src/recipes/layout/channel-and-thread-side-by-side/shots.json
new file mode 100644
index 0000000000..3962520734
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/channel-and-thread-side-by-side/shots.json
@@ -0,0 +1,10 @@
+[
+  {
+    "file": "layout-channel-and-thread-side-by-side.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "thread": "docs-v15-ck-design-4"
+    },
+    "waitFor": ".str-chat__thread-container .str-chat__message-list"
+  }
+]
diff --git a/examples/cookbook/src/recipes/layout/channel-and-thread-side-by-side/views.tsx b/examples/cookbook/src/recipes/layout/channel-and-thread-side-by-side/views.tsx
new file mode 100644
index 0000000000..5190ccf495
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/channel-and-thread-side-by-side/views.tsx
@@ -0,0 +1,68 @@
+import {
+  ChannelHeader,
+  ChannelNavigation,
+  MessageComposer,
+  MessageList,
+  ThreadHeader,
+  ThreadList,
+  useThreadContext,
+} from 'stream-chat-react';
+import {
+  ChannelSlot,
+  ChatView,
+  ChatViewEmptyPlaceholder,
+  ThreadSlot,
+  useActiveThread,
+} from 'stream-chat-react/slot-layout';
+import type { ChatViewProps, LayoutDescriptor } from 'stream-chat-react/slot-layout';
+import './layout.css';
+
+// The channels view has a slot for the open channel and, after it, one for a
+// thread opened from it. The threads view has one slot, for the thread picked
+// in the list.
+export const layouts: LayoutDescriptor[] = [
+  { id: 'channels', slots: ['channel', 'thread'] },
+  { id: 'threads', slots: ['thread'] },
+];
+
+// In the channels view, every thread opens in the "thread" slot.
+export const viewActionSlotResolvers: ChatViewProps['viewActionSlotResolvers'] = {
+  channels: { openThread: () => 'thread' },
+};
+
+// Marks the thread as on screen while the window is visible and focused.
+const ActiveThread = () => {
+  const thread = useThreadContext();
+  useActiveThread({ activeThread: thread });
+  return null;
+};
+
+const ThreadPanel = () => (
+  <ThreadSlot slot='thread'>
+    <ActiveThread />
+    <ThreadHeader />
+    <MessageList />
+    <MessageComposer />
+  </ThreadSlot>
+);
+
+export const ChannelsView = () => (
+  <>
+    <ChatView.Selector />
+    <ChannelNavigation />
+    <ChannelSlot fallback={<ChatViewEmptyPlaceholder />} slot='channel'>
+      <ChannelHeader />
+      <MessageList />
+      <MessageComposer />
+    </ChannelSlot>
+    <ThreadPanel />
+  </>
+);
+
+export const ThreadsView = () => (
+  <>
+    <ChatView.Selector />
+    <ThreadList />
+    <ThreadPanel />
+  </>
+);
diff --git a/examples/cookbook/src/recipes/layout/collapsible-sidebar/AutoCloseSidebar.tsx b/examples/cookbook/src/recipes/layout/collapsible-sidebar/AutoCloseSidebar.tsx
new file mode 100644
index 0000000000..abac1df572
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/collapsible-sidebar/AutoCloseSidebar.tsx
@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import type { PropsWithChildren } from 'react';
+import type { WorkspaceNavigation } from 'stream-chat-react';
+import { useWorkspaceNavigation, WorkspaceNavigationProvider } from 'stream-chat-react';
+import { useSidebar } from './SidebarContext';
+
+/**
+ * Closes the sidebar when the user picks a channel in it on a phone, where the list covers the
+ * channel. Picking the channel that is already open closes it too.
+ */
+export const AutoCloseSidebar = ({ children }: PropsWithChildren) => {
+  const navigation = useWorkspaceNavigation();
+  const { closeSidebar } = useSidebar();
+
+  const value = useMemo<WorkspaceNavigation>(
+    () => ({
+      ...navigation,
+      openChannel: (channel, options) => {
+        navigation.openChannel(channel, options);
+        if (window.matchMedia('(max-width: 767px)').matches) closeSidebar();
+      },
+    }),
+    [navigation, closeSidebar],
+  );
+
+  return (
+    <WorkspaceNavigationProvider value={value}>{children}</WorkspaceNavigationProvider>
+  );
+};
diff --git a/examples/cookbook/src/recipes/layout/collapsible-sidebar/SidebarContext.tsx b/examples/cookbook/src/recipes/layout/collapsible-sidebar/SidebarContext.tsx
new file mode 100644
index 0000000000..6472a570ee
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/collapsible-sidebar/SidebarContext.tsx
@@ -0,0 +1,32 @@
+import { createContext, useCallback, useContext, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+
+type SidebarContextValue = {
+  closeSidebar: () => void;
+  openSidebar: () => void;
+  sidebarOpen: boolean;
+};
+
+const SidebarContext = createContext<SidebarContextValue | undefined>(undefined);
+
+export const useSidebar = () => {
+  const value = useContext(SidebarContext);
+  if (!value) throw new Error('useSidebar must be used within a SidebarProvider');
+  return value;
+};
+
+export const SidebarProvider = ({
+  children,
+  initialOpen = true,
+}: PropsWithChildren<{ initialOpen?: boolean }>) => {
+  const [sidebarOpen, setSidebarOpen] = useState(initialOpen);
+
+  const closeSidebar = useCallback(() => setSidebarOpen(false), []);
+  const openSidebar = useCallback(() => setSidebarOpen(true), []);
+
+  return (
+    <SidebarContext.Provider value={{ closeSidebar, openSidebar, sidebarOpen }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+};
diff --git a/examples/cookbook/src/recipes/layout/collapsible-sidebar/SidebarToggle.tsx b/examples/cookbook/src/recipes/layout/collapsible-sidebar/SidebarToggle.tsx
new file mode 100644
index 0000000000..14c3785b5f
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/collapsible-sidebar/SidebarToggle.tsx
@@ -0,0 +1,20 @@
+import { Button, IconMenu } from 'stream-chat-react';
+import { useSidebar } from './SidebarContext';
+
+export const SidebarToggle = () => {
+  const { closeSidebar, openSidebar, sidebarOpen } = useSidebar();
+
+  return (
+    <Button
+      appearance='ghost'
+      aria-label={sidebarOpen ? 'Collapse sidebar' : 'Expand sidebar'}
+      circular
+      className='cookbook-sidebar-toggle'
+      onClick={sidebarOpen ? closeSidebar : openSidebar}
+      size='md'
+      variant='secondary'
+    >
+      <IconMenu />
+    </Button>
+  );
+};
diff --git a/examples/cookbook/src/recipes/layout/collapsible-sidebar/default.recipe.tsx b/examples/cookbook/src/recipes/layout/collapsible-sidebar/default.recipe.tsx
new file mode 100644
index 0000000000..e39e7e682f
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/collapsible-sidebar/default.recipe.tsx
@@ -0,0 +1,24 @@
+import type { PropsWithChildren } from 'react';
+import { WithComponents } from 'stream-chat-react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { SidebarProvider } from './SidebarContext';
+import { ChannelsView, layouts, overrides, SidebarLayout } from './views';
+
+// `?sidebar=collapsed` starts with the list collapsed, for the screenshot of that state.
+const initialOpen =
+  new URLSearchParams(window.location.search).get('sidebar') !== 'collapsed';
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <SidebarProvider initialOpen={initialOpen}>
+    <WithComponents overrides={overrides}>
+      <SidebarLayout>{children}</SidebarLayout>
+    </WithComponents>
+  </SidebarProvider>
+);
+
+const recipe: RecipeConfig = {
+  chatViewProps: { layouts, views: { channels: <ChannelsView /> } },
+  Wrapper,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/layout/collapsible-sidebar/shots.json b/examples/cookbook/src/recipes/layout/collapsible-sidebar/shots.json
new file mode 100644
index 0000000000..f723dfd9a1
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/collapsible-sidebar/shots.json
@@ -0,0 +1,17 @@
+[
+  {
+    "file": "collapsible-sidebar-open.png",
+    "query": {
+      "channel": "docs-v15-cb-design"
+    },
+    "waitFor": ".str-chat__channel-list .cookbook-sidebar-toggle"
+  },
+  {
+    "file": "collapsible-sidebar-collapsed.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "sidebar": "collapsed"
+    },
+    "waitFor": ".str-chat__channel-header .cookbook-sidebar-toggle"
+  }
+]
diff --git a/examples/cookbook/src/recipes/layout/collapsible-sidebar/sidebar.css b/examples/cookbook/src/recipes/layout/collapsible-sidebar/sidebar.css
new file mode 100644
index 0000000000..961604352d
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/collapsible-sidebar/sidebar.css
@@ -0,0 +1,62 @@
+@layer stream-overrides {
+  .cookbook-sidebar-layout {
+    height: 100%;
+  }
+
+  /* Collapsed, the list's width goes to 0 and the SDK's stylesheet animates the change. */
+  .cookbook-sidebar-layout--collapsed .str-chat {
+    --str-chat__channel-list-width: 0px;
+  }
+
+  .cookbook-sidebar-layout--collapsed .str-chat__channel-list {
+    min-width: 0;
+    overflow: hidden;
+    border-inline-end: 0;
+    opacity: 0;
+    pointer-events: none;
+    /* Hidden, so its rows leave the tab order; it turns hidden only once it has collapsed. */
+    visibility: hidden;
+    transition:
+      flex-basis var(--str-chat__channel-list-transition-duration)
+        var(--str-chat__channel-list-transition-easing),
+      min-width var(--str-chat__channel-list-transition-duration)
+        var(--str-chat__channel-list-transition-easing),
+      width var(--str-chat__channel-list-transition-duration)
+        var(--str-chat__channel-list-transition-easing),
+      opacity var(--str-chat__channel-list-transition-duration)
+        var(--str-chat__channel-list-transition-easing),
+      transform var(--str-chat__channel-list-transition-duration)
+        var(--str-chat__channel-list-transition-easing),
+      visibility 0s linear var(--str-chat__channel-list-transition-duration);
+  }
+
+  /* One toggle at a time: the header's shows only while the list is collapsed. */
+  .cookbook-sidebar-layout:not(.cookbook-sidebar-layout--collapsed)
+    .str-chat__channel-header
+    .cookbook-sidebar-toggle {
+    display: none;
+  }
+
+  @media (max-width: 767px) {
+    /* cookbook-allow-layout: below 768px, the SDK's stylesheet hides the list over the channel
+       and has no rule that shows it again; this one shows it while it's open. */
+    .cookbook-sidebar-layout:not(.cookbook-sidebar-layout--collapsed)
+      .str-chat__channel-list {
+      pointer-events: auto;
+      transform: translateX(0);
+      /* Shows at once; the SDK's rule delays hiding until the list has slid out. */
+      transition:
+        transform var(--str-chat__channel-list-transition-duration)
+          var(--str-chat__channel-list-transition-easing),
+        visibility 0s;
+      visibility: visible;
+    }
+  }
+
+  /* Without animations, the list collapses and shows at once. */
+  @media (prefers-reduced-motion: reduce) {
+    .cookbook-sidebar-layout .str-chat__chat-view .str-chat__channel-list {
+      transition: none;
+    }
+  }
+}
diff --git a/examples/cookbook/src/recipes/layout/collapsible-sidebar/views.tsx b/examples/cookbook/src/recipes/layout/collapsible-sidebar/views.tsx
new file mode 100644
index 0000000000..7a796b6919
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/collapsible-sidebar/views.tsx
@@ -0,0 +1,61 @@
+import type { PropsWithChildren } from 'react';
+import {
+  ChannelHeader,
+  ChannelNavigation,
+  MessageComposer,
+  MessageList,
+  ThreadHeader,
+  WorkspaceNavigationBackButton,
+} from 'stream-chat-react';
+import { ChannelSlot, ThreadSlot } from 'stream-chat-react/slot-layout';
+import type { LayoutDescriptor } from 'stream-chat-react/slot-layout';
+import { AutoCloseSidebar } from './AutoCloseSidebar';
+import { useSidebar } from './SidebarContext';
+import { SidebarToggle } from './SidebarToggle';
+import './sidebar.css';
+
+export const layouts: LayoutDescriptor[] = [
+  { id: 'channels', slots: ['channel', 'thread'] },
+];
+
+// Declared once, so WithComponents gets the same object on every render.
+export const overrides = { HeaderEndContent: SidebarToggle };
+
+// The toggle, then the back button the header shows by default.
+const ChannelHeaderStart = () => (
+  <>
+    <SidebarToggle />
+    <WorkspaceNavigationBackButton />
+  </>
+);
+
+export const ChannelsView = () => (
+  <>
+    <AutoCloseSidebar>
+      <ChannelNavigation />
+    </AutoCloseSidebar>
+    <ChannelSlot slot='channel'>
+      <ChannelHeader StartContent={ChannelHeaderStart} />
+      <MessageList />
+      <MessageComposer />
+    </ChannelSlot>
+    <ThreadSlot slot='thread'>
+      <ThreadHeader />
+      <MessageList />
+      <MessageComposer />
+    </ThreadSlot>
+  </>
+);
+
+// Around ChatView: its class says whether the channel list is collapsed.
+export const SidebarLayout = ({ children }: PropsWithChildren) => {
+  const { sidebarOpen } = useSidebar();
+
+  return (
+    <div
+      className={`cookbook-sidebar-layout ${sidebarOpen ? '' : 'cookbook-sidebar-layout--collapsed'}`}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/SimulateCtrlClick.tsx b/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/SimulateCtrlClick.tsx
new file mode 100644
index 0000000000..c451c2545e
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/SimulateCtrlClick.tsx
@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'react';
+import type { MouseEvent } from 'react';
+import { useChatContext, useWorkspaceNavigation } from 'stream-chat-react';
+
+/**
+ * Screenshot helper, not part of the recipe. With `?beside=<channel id>`, once the channel from
+ * `?channel=` is open, opens the other one as a ⌘-click on its row in the channel list would.
+ */
+export const SimulateCtrlClick = () => {
+  const { client } = useChatContext();
+  const { openChannel, openChannels } = useWorkspaceNavigation();
+  const done = useRef(false);
+  const besideId = new URLSearchParams(window.location.search).get('beside');
+
+  useEffect(() => {
+    if (!besideId || done.current || openChannels.length !== 1) return;
+    done.current = true;
+    const channel = client.channel('messaging', besideId);
+    void channel.watch().then(() =>
+      openChannel(channel, {
+        // A row in the channel list passes its click; only the modifier keys matter here.
+        event: { ctrlKey: false, metaKey: true } as MouseEvent,
+      }),
+    );
+  }, [besideId, client, openChannel, openChannels.length]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/default.recipe.tsx b/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/default.recipe.tsx
new file mode 100644
index 0000000000..069c1c0836
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/default.recipe.tsx
@@ -0,0 +1,21 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { SimulateCtrlClick } from './SimulateCtrlClick';
+import {
+  ChannelsView,
+  deriveWorkspaceNavigation,
+  layouts,
+  slotRenderers,
+  ThreadsView,
+} from './views';
+
+const recipe: RecipeConfig = {
+  chatViewChildren: <SimulateCtrlClick />,
+  chatViewProps: {
+    deriveWorkspaceNavigation,
+    layouts,
+    slotRenderers,
+    views: { channels: <ChannelsView />, threads: <ThreadsView /> },
+  },
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/layout.css b/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/layout.css
new file mode 100644
index 0000000000..16502e20c4
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/layout.css
@@ -0,0 +1,6 @@
+@layer stream-overrides {
+  .str-chat {
+    --str-chat__channel-list-width: 320px;
+    --str-chat__thread-list-width: 320px;
+  }
+}
diff --git a/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/shots.json b/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/shots.json
new file mode 100644
index 0000000000..702bd0d29e
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/shots.json
@@ -0,0 +1,11 @@
+[
+  {
+    "file": "layout-ctrl-click-opens-beside.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "beside": "docs-v15-cb-trip"
+    },
+    "waitFor": ".str-chat__chat-view__slot .str-chat__channel-header:has-text('Weekend trip')",
+    "settleMs": 1500
+  }
+]
diff --git a/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/useOpenBesideOnWideWindows.ts b/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/useOpenBesideOnWideWindows.ts
new file mode 100644
index 0000000000..a345378f62
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/useOpenBesideOnWideWindows.ts
@@ -0,0 +1,29 @@
+import { useCallback, useSyncExternalStore } from 'react';
+import type { DeriveWorkspaceNavigation } from 'stream-chat-react/slot-layout';
+
+const wideWindow = window.matchMedia('(min-width: 1200px)');
+
+const subscribeToWidth = (onChange: () => void) => {
+  wideWindow.addEventListener('change', onChange);
+  return () => wideWindow.removeEventListener('change', onChange);
+};
+
+const isWindowWide = () => wideWindow.matches;
+
+export const useOpenBesideOnWideWindows = (): DeriveWorkspaceNavigation => {
+  const isWide = useSyncExternalStore(subscribeToWidth, isWindowWide);
+
+  // A new function only when the window crosses 1200px.
+  return useCallback<DeriveWorkspaceNavigation>(
+    (base) => ({
+      openChannel: (channel, options) =>
+        base.openChannel(channel, {
+          ...options,
+          additive:
+            options?.additive ??
+            (isWide && !!(options?.event?.metaKey || options?.event?.ctrlKey)),
+        }),
+    }),
+    [isWide],
+  );
+};
diff --git a/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/views.tsx b/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/views.tsx
new file mode 100644
index 0000000000..bce5494675
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/ctrl-click-opens-beside/views.tsx
@@ -0,0 +1,76 @@
+import type { Thread as StreamThread } from 'stream-chat';
+import {
+  Channel,
+  ChannelHeader,
+  ChannelNavigation,
+  MessageComposer,
+  MessageList,
+  Thread,
+  ThreadHeader,
+  ThreadList,
+} from 'stream-chat-react';
+import { ChatView, Slot, useActiveThread } from 'stream-chat-react/slot-layout';
+import type {
+  ChatViewSlotRenderers,
+  DeriveWorkspaceNavigation,
+  LayoutDescriptor,
+} from 'stream-chat-react/slot-layout';
+import './layout.css';
+
+export const layouts: LayoutDescriptor[] = [
+  { id: 'channels', slots: ['channel', 'thread'] },
+  { id: 'threads', slots: ['thread'] },
+];
+
+// ⌘/ctrl-click on a channel opens it beside the open one. Declared outside the
+// component, so ChatView gets the same function on every render.
+export const deriveWorkspaceNavigation: DeriveWorkspaceNavigation = (base) => ({
+  openChannel: (channel, options) =>
+    base.openChannel(channel, {
+      ...options,
+      additive:
+        options?.additive ?? !!(options?.event?.metaKey || options?.event?.ctrlKey),
+    }),
+});
+
+const ThreadContent = ({ thread }: { thread: StreamThread }) => {
+  // Marks the thread as on screen while the window is visible and focused.
+  useActiveThread({ activeThread: thread });
+  return (
+    <Thread thread={thread}>
+      <ThreadHeader />
+      <MessageList />
+      <MessageComposer />
+    </Thread>
+  );
+};
+
+// How a slot shows a channel and a thread. Each renderer returns an element;
+// hooks go in the component it renders.
+export const slotRenderers: ChatViewSlotRenderers = {
+  channel: ({ source }) => (
+    <Channel channel={source}>
+      <ChannelHeader />
+      <MessageList />
+      <MessageComposer />
+    </Channel>
+  ),
+  thread: ({ source }) => <ThreadContent thread={source} />,
+};
+
+export const ChannelsView = () => (
+  <>
+    <ChatView.Selector />
+    <ChannelNavigation />
+    <Slot slot='channel' />
+    <Slot slot='thread' />
+  </>
+);
+
+export const ThreadsView = () => (
+  <>
+    <ChatView.Selector />
+    <ThreadList />
+    <Slot slot='thread' />
+  </>
+);
diff --git a/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/LayoutPersistence.tsx b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/LayoutPersistence.tsx
new file mode 100644
index 0000000000..281916c109
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/LayoutPersistence.tsx
@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { useChatContext } from 'stream-chat-react';
+import {
+  restoreLayoutState,
+  serializeLayoutState,
+  useChatViewContext,
+} from 'stream-chat-react/slot-layout';
+import type { ChatViewLayoutSnapshot } from 'stream-chat-react/slot-layout';
+import { createDeserializer, serializeEntityBinding } from './layoutSnapshot';
+
+export const LayoutPersistence = () => {
+  const { client } = useChatContext();
+  const { layoutController } = useChatViewContext();
+
+  useEffect(() => {
+    // One layout per user. Change the version when you change the app's layouts.
+    const storageKey = `chat-layout:v1:${client.userId}`;
+
+    const saved = localStorage.getItem(storageKey);
+    if (saved) {
+      const snapshot = JSON.parse(saved) as ChatViewLayoutSnapshot;
+      layoutController.state.next(
+        restoreLayoutState(snapshot, {
+          deserializeEntityBinding: createDeserializer(client),
+        }),
+      );
+    }
+
+    // Called once now, then after every change.
+    return layoutController.state.subscribe((state) => {
+      const snapshot = serializeLayoutState(state, { serializeEntityBinding });
+      localStorage.setItem(storageKey, JSON.stringify(snapshot));
+    });
+  }, [client, layoutController]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/LayoutPersistenceWithUrl.tsx b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/LayoutPersistenceWithUrl.tsx
new file mode 100644
index 0000000000..755d7fe92f
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/LayoutPersistenceWithUrl.tsx
@@ -0,0 +1,85 @@
+import { useEffect } from 'react';
+import { useChatContext } from 'stream-chat-react';
+import {
+  createChatViewSlotBinding,
+  getChatViewEntityBinding,
+  getLayoutViewState,
+  restoreLayoutState,
+  serializeLayoutState,
+  useChatViewContext,
+} from 'stream-chat-react/slot-layout';
+import type {
+  ChatViewLayoutSnapshot,
+  ChatViewLayoutState,
+} from 'stream-chat-react/slot-layout';
+import {
+  channelFromCid,
+  createDeserializer,
+  serializeEntityBinding,
+} from './layoutSnapshot';
+
+const URL_PARAM = 'channel';
+
+// The cid of the channel in the channels view's 'channel' slot.
+const cidInChannelSlot = (state: ChatViewLayoutState) => {
+  const entity = getChatViewEntityBinding(
+    getLayoutViewState(state, 'channels').slotBindings.channel,
+  );
+  return entity?.kind === 'channel' ? entity.source.cid : undefined;
+};
+
+// Puts the cid in the URL, or takes it out, without adding a history entry.
+const writeCidToUrl = (cid: string | undefined) => {
+  const url = new URL(window.location.href);
+  if ((url.searchParams.get(URL_PARAM) ?? undefined) === cid) return;
+  if (cid) url.searchParams.set(URL_PARAM, cid);
+  else url.searchParams.delete(URL_PARAM);
+  window.history.replaceState(window.history.state, '', url);
+};
+
+export const LayoutPersistence = () => {
+  const { client } = useChatContext();
+  const { layoutController } = useChatViewContext();
+
+  useEffect(() => {
+    // One layout per user. Change the version when you change the app's layouts.
+    const storageKey = `chat-layout:v1:${client.userId}`;
+
+    const saved = localStorage.getItem(storageKey);
+    if (saved) {
+      const snapshot = JSON.parse(saved) as ChatViewLayoutSnapshot;
+      layoutController.state.next(
+        restoreLayoutState(snapshot, {
+          deserializeEntityBinding: createDeserializer(client),
+        }),
+      );
+    }
+
+    // A link to a channel other than the restored one opens that channel.
+    const cidInUrl = new URLSearchParams(window.location.search).get(URL_PARAM);
+    const linkedChannel = cidInUrl ? channelFromCid(client, cidInUrl) : undefined;
+    if (
+      linkedChannel &&
+      linkedChannel.cid !== cidInChannelSlot(layoutController.state.getLatestValue())
+    ) {
+      layoutController.setActiveView('channels');
+      layoutController.bind(
+        'channel',
+        createChatViewSlotBinding({
+          key: linkedChannel.cid,
+          kind: 'channel',
+          source: linkedChannel,
+        }),
+      );
+    }
+
+    // Called once now, then after every change.
+    return layoutController.state.subscribe((state) => {
+      const snapshot = serializeLayoutState(state, { serializeEntityBinding });
+      localStorage.setItem(storageKey, JSON.stringify(snapshot));
+      writeCidToUrl(cidInChannelSlot(state));
+    });
+  }, [client, layoutController]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/default.recipe.tsx b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/default.recipe.tsx
new file mode 100644
index 0000000000..5d70ff37d7
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/default.recipe.tsx
@@ -0,0 +1,19 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { LayoutPersistence } from './LayoutPersistenceWithUrl';
+import { seedSavedLayout } from './seedSavedLayout';
+import { ChannelsView, layouts, ThreadsView } from './views';
+
+seedSavedLayout();
+
+// The final version: saved in localStorage, with the open channel's cid in the URL. The recipe
+// reads `?channel=<cid>` itself, so the base app's `?channel=<id>` opener is off.
+const recipe: RecipeConfig = {
+  chatViewChildren: <LayoutPersistence />,
+  chatViewProps: {
+    layouts,
+    views: { channels: <ChannelsView />, threads: <ThreadsView /> },
+  },
+  openFromUrl: false,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/layoutSnapshot.ts b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/layoutSnapshot.ts
new file mode 100644
index 0000000000..7dbe5ffb08
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/layoutSnapshot.ts
@@ -0,0 +1,39 @@
+import type { Channel as StreamChannel, StreamChat } from 'stream-chat';
+import {
+  createChatViewSlotBinding,
+  getChatViewEntityBinding,
+} from 'stream-chat-react/slot-layout';
+import type {
+  DeserializeLayoutEntityBinding,
+  SerializeLayoutEntityBinding,
+} from 'stream-chat-react/slot-layout';
+
+// The client's object for the channel with this cid, or nothing for an invalid cid.
+export const channelFromCid = (
+  client: StreamChat,
+  cid: string,
+): StreamChannel | undefined => {
+  const [type, id] = cid.split(':');
+  return type && id ? client.channel(type, id) : undefined;
+};
+
+// A channel is saved as its cid. Threads, and anything else, are left out.
+export const serializeEntityBinding: SerializeLayoutEntityBinding = (binding) => {
+  const entity = getChatViewEntityBinding(binding);
+  if (entity?.kind !== 'channel') return undefined;
+  return { key: binding.key, payload: { cid: entity.source.cid } };
+};
+
+// A saved cid becomes the client's channel object again. Nothing is loaded here.
+export const createDeserializer =
+  (client: StreamChat): DeserializeLayoutEntityBinding =>
+  (saved) => {
+    const { cid } = saved.payload as { cid?: string };
+    const channel = cid ? channelFromCid(client, cid) : undefined;
+    if (!channel) return undefined;
+    return createChatViewSlotBinding({
+      key: channel.cid,
+      kind: 'channel',
+      source: channel,
+    });
+  };
diff --git a/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/saved-layout.json b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/saved-layout.json
new file mode 100644
index 0000000000..93692e455c
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/saved-layout.json
@@ -0,0 +1,28 @@
+{
+  "activeView": "channels",
+  "layouts": {
+    "channels": {
+      "availableSlots": ["channel", "thread"],
+      "hiddenSlots": { "thread": true },
+      "slotBindings": {
+        "channel": {
+          "key": "channel:messaging:docs-v15-cb-trip",
+          "payload": { "cid": "messaging:docs-v15-cb-trip" }
+        }
+      },
+      "slotForwardHistory": {},
+      "slotHistory": {},
+      "slotMeta": { "channel": { "occupiedAt": 1793105192097 } },
+      "slotNames": ["channel", "thread"]
+    },
+    "threads": {
+      "availableSlots": ["thread"],
+      "hiddenSlots": {},
+      "slotBindings": {},
+      "slotForwardHistory": {},
+      "slotHistory": {},
+      "slotMeta": {},
+      "slotNames": ["thread"]
+    }
+  }
+}
diff --git a/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/seedSavedLayout.ts b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/seedSavedLayout.ts
new file mode 100644
index 0000000000..97c0a746b0
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/seedSavedLayout.ts
@@ -0,0 +1,12 @@
+import { currentUser } from '../../../base/client';
+import savedLayout from './saved-layout.json';
+
+/**
+ * Screenshot helper, not part of the recipe. `?seed-layout=1` writes a layout saved before a
+ * reload, so the first load of a shot shows the restore. Runs when the recipe module loads,
+ * before `LayoutPersistence` reads the storage.
+ */
+export const seedSavedLayout = () => {
+  if (new URLSearchParams(window.location.search).get('seed-layout') !== '1') return;
+  localStorage.setItem(`chat-layout:v1:${currentUser.id}`, JSON.stringify(savedLayout));
+};
diff --git a/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/shots.json b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/shots.json
new file mode 100644
index 0000000000..d066296bda
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/shots.json
@@ -0,0 +1,19 @@
+[
+  {
+    "file": "layout-restored-after-reload.png",
+    "query": {
+      "seed-layout": "1"
+    },
+    "waitFor": ".str-chat__channel-header:has-text('Weekend trip')",
+    "settleMs": 1500
+  },
+  {
+    "file": "layout-opened-from-link.png",
+    "query": {
+      "seed-layout": "1",
+      "channel": "messaging:docs-v15-cb-garden"
+    },
+    "waitFor": ".str-chat__channel-header:has-text('Garden plot')",
+    "settleMs": 1500
+  }
+]
diff --git a/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/storage.recipe.tsx b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/storage.recipe.tsx
new file mode 100644
index 0000000000..eb4db20f1b
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/storage.recipe.tsx
@@ -0,0 +1,18 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { LayoutPersistence } from './LayoutPersistence';
+import { seedSavedLayout } from './seedSavedLayout';
+import { ChannelsView, layouts, ThreadsView } from './views';
+
+seedSavedLayout();
+
+// The first version: the layout is saved in localStorage only.
+const recipe: RecipeConfig = {
+  chatViewChildren: <LayoutPersistence />,
+  chatViewProps: {
+    layouts,
+    views: { channels: <ChannelsView />, threads: <ThreadsView /> },
+  },
+  openFromUrl: false,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/views.tsx b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/views.tsx
new file mode 100644
index 0000000000..da51bfd0a5
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/saving-and-restoring-the-layout/views.tsx
@@ -0,0 +1,59 @@
+import { useEffect } from 'react';
+import {
+  ChannelHeader,
+  ChannelNavigation,
+  MessageComposer,
+  MessageList,
+  ThreadHeader,
+  ThreadList,
+  useChannel,
+} from 'stream-chat-react';
+import { ChannelSlot, ChatView, ThreadSlot } from 'stream-chat-react/slot-layout';
+import type { LayoutDescriptor } from 'stream-chat-react/slot-layout';
+
+export const layouts: LayoutDescriptor[] = [
+  { id: 'channels', slots: ['channel', 'thread'] },
+  { id: 'threads', slots: ['thread'] },
+];
+
+// Watches the channel its slot shows. A channel from the list is watched
+// already, and then this sends nothing.
+const WatchChannel = () => {
+  const channel = useChannel();
+
+  useEffect(() => {
+    channel.watch().catch((error) => console.error('Could not watch the channel', error));
+  }, [channel]);
+
+  return null;
+};
+
+const ThreadPanel = () => (
+  <ThreadSlot slot='thread'>
+    <ThreadHeader />
+    <MessageList />
+    <MessageComposer />
+  </ThreadSlot>
+);
+
+export const ChannelsView = () => (
+  <>
+    <ChatView.Selector />
+    <ChannelNavigation />
+    <ChannelSlot slot='channel'>
+      <WatchChannel />
+      <ChannelHeader />
+      <MessageList />
+      <MessageComposer />
+    </ChannelSlot>
+    <ThreadPanel />
+  </>
+);
+
+export const ThreadsView = () => (
+  <>
+    <ChatView.Selector />
+    <ThreadList />
+    <ThreadPanel />
+  </>
+);
diff --git a/examples/cookbook/src/recipes/layout/single-pane-mobile-with-back-button/BrowserBack.tsx b/examples/cookbook/src/recipes/layout/single-pane-mobile-with-back-button/BrowserBack.tsx
new file mode 100644
index 0000000000..5d733809f3
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/single-pane-mobile-with-back-button/BrowserBack.tsx
@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import {
+  getLayoutViewState,
+  useChatViewContext,
+  useLayoutViewState,
+} from 'stream-chat-react/slot-layout';
+import type { ChatViewLayoutViewState } from 'stream-chat-react/slot-layout';
+
+// How many steps are open in the "main" slot: what it holds, and what's on top.
+const stepsOpen = ({ slotBindings, slotLayers }: ChatViewLayoutViewState) =>
+  (slotBindings.main ? 1 : 0) + (slotLayers?.main?.length ?? 0);
+
+// The steps the current history entry was added for.
+const stepsInHistory = () =>
+  (window.history.state as { steps?: number } | null)?.steps ?? 0;
+
+export const BrowserBack = () => {
+  const { layoutController } = useChatViewContext();
+  const steps = stepsOpen(useLayoutViewState());
+
+  // A step opened: add an entry. Steps closed from the header: drop their entries.
+  useEffect(() => {
+    const inHistory = stepsInHistory();
+    if (steps > inHistory) window.history.pushState({ steps }, '');
+    else if (steps < inHistory) window.history.go(steps - inHistory);
+  }, [steps]);
+
+  // The browser went back: close the top step.
+  useEffect(() => {
+    const onPopState = () => {
+      const view = getLayoutViewState(layoutController.state.getLatestValue());
+      if (stepsOpen(view) <= stepsInHistory()) return;
+      if (view.slotLayers?.main?.length) layoutController.popLayer('main');
+      else layoutController.release('main');
+    };
+
+    window.addEventListener('popstate', onPopState);
+    return () => window.removeEventListener('popstate', onPopState);
+  }, [layoutController]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/layout/single-pane-mobile-with-back-button/default.recipe.tsx b/examples/cookbook/src/recipes/layout/single-pane-mobile-with-back-button/default.recipe.tsx
new file mode 100644
index 0000000000..ffafed470e
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/single-pane-mobile-with-back-button/default.recipe.tsx
@@ -0,0 +1,19 @@
+import { ChannelNavigation, ThreadList } from 'stream-chat-react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { BrowserBack } from './BrowserBack';
+import { deriveWorkspaceNavigation, layouts, SinglePane, slotRenderers } from './views';
+
+const recipe: RecipeConfig = {
+  chatViewChildren: <BrowserBack />,
+  chatViewProps: {
+    deriveWorkspaceNavigation,
+    layouts,
+    slotRenderers,
+    views: {
+      channels: <SinglePane list={<ChannelNavigation />} />,
+      threads: <SinglePane list={<ThreadList />} />,
+    },
+  },
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/layout/single-pane-mobile-with-back-button/layout.css b/examples/cookbook/src/recipes/layout/single-pane-mobile-with-back-button/layout.css
new file mode 100644
index 0000000000..7102ea36cd
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/single-pane-mobile-with-back-button/layout.css
@@ -0,0 +1,23 @@
+@layer stream-overrides {
+  /* cookbook-allow-layout: the list is the only thing beside the view selector, and the SDK has no
+     variable that lets it take the rest of the width. */
+  .str-chat__chat-view .str-chat__channel-list,
+  .str-chat__chat-view .str-chat__thread-list-container {
+    flex: 1 1 auto;
+  }
+
+  /* Below 768px, the SDK's stylesheet hides the lists. Here the list is the only
+     thing on screen until something opens, so it stays visible. */
+  @media (max-width: 767px) {
+    /* cookbook-allow-layout: the SDK lays the hidden list over the channel; this puts it back in
+       the flow, where it's the only panel. */
+    .str-chat__chat-view .str-chat__channel-list,
+    .str-chat__chat-view .str-chat__thread-list-container {
+      inset: auto;
+      pointer-events: auto;
+      position: relative;
+      transform: none;
+      visibility: visible;
+    }
+  }
+}
diff --git a/examples/cookbook/src/recipes/layout/single-pane-mobile-with-back-button/shots.json b/examples/cookbook/src/recipes/layout/single-pane-mobile-with-back-button/shots.json
new file mode 100644
index 0000000000..8d384731c4
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/single-pane-mobile-with-back-button/shots.json
@@ -0,0 +1,23 @@
+[
+  {
+    "file": "layout-single-pane-mobile-list.png",
+    "viewport": { "width": 390, "height": 844 },
+    "waitFor": ".str-chat__channel-list .str-chat__channel-preview, .str-chat__channel-list [role='option']"
+  },
+  {
+    "file": "layout-single-pane-mobile.png",
+    "viewport": { "width": 390, "height": 844 },
+    "query": {
+      "channel": "docs-v15-cb-design"
+    }
+  },
+  {
+    "file": "layout-single-pane-mobile-thread.png",
+    "viewport": { "width": 390, "height": 844 },
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "thread": "docs-v15-ck-design-4"
+    },
+    "waitFor": ".str-chat__thread .str-chat__message-list"
+  }
+]
diff --git a/examples/cookbook/src/recipes/layout/single-pane-mobile-with-back-button/views.tsx b/examples/cookbook/src/recipes/layout/single-pane-mobile-with-back-button/views.tsx
new file mode 100644
index 0000000000..c2a75b7e52
--- /dev/null
+++ b/examples/cookbook/src/recipes/layout/single-pane-mobile-with-back-button/views.tsx
@@ -0,0 +1,115 @@
+import type { ReactNode } from 'react';
+import type { Thread as StreamThread } from 'stream-chat';
+import {
+  Button,
+  Channel,
+  ChannelHeader,
+  MessageComposer,
+  MessageList,
+  Thread,
+  ThreadHeader,
+  useChannelInstanceContext,
+  useComponentContextIcons,
+  useThreadContext,
+  useWorkspaceNavigation,
+  useWorkspacePanel,
+  WorkspaceNavigationBackButton,
+} from 'stream-chat-react';
+import {
+  ChatView,
+  Slot,
+  useActiveThread,
+  useLayoutViewState,
+} from 'stream-chat-react/slot-layout';
+import type {
+  ChatViewSlotRenderers,
+  DeriveWorkspaceNavigation,
+  LayoutDescriptor,
+} from 'stream-chat-react/slot-layout';
+import './layout.css';
+
+// Each view has a single slot. A channel or a thread opens there, at full width.
+export const layouts: LayoutDescriptor[] = [
+  { id: 'channels', slots: ['main'] },
+  { id: 'threads', slots: ['main'] },
+];
+
+// In the channels view, a thread opens on top of its channel, so back returns
+// to the channel. In the threads view, it replaces the thread before it.
+export const deriveWorkspaceNavigation: DeriveWorkspaceNavigation = (base) => ({
+  openThread: (target, options) =>
+    base.openThread(target, {
+      ...options,
+      layer: options?.layer ?? !base.isThreadsView,
+    }),
+});
+
+// Goes back one step. Over a channel, the SDK's back button removes the thread
+// on top. Anywhere else, back closes the panel, and the list shows again.
+const BackButton = () => {
+  const { IconArrowLeft } = useComponentContextIcons();
+  const { canGoBack, closeChannel, closeThread } = useWorkspaceNavigation();
+  const panel = useWorkspacePanel();
+  const thread = useThreadContext();
+  const { channel } = useChannelInstanceContext();
+
+  if (canGoBack(thread ? thread.id : channel?.cid, panel)) {
+    return <WorkspaceNavigationBackButton />;
+  }
+
+  return (
+    <Button
+      appearance='ghost'
+      aria-label='Back to the list'
+      circular
+      onClick={(event) => {
+        if (thread) closeThread(thread.id, { event, panel });
+        else closeChannel(channel?.cid, { event, panel });
+      }}
+      size='md'
+      variant='secondary'
+    >
+      <IconArrowLeft />
+    </Button>
+  );
+};
+
+// Takes the place of the thread header's close button, which would do what back does.
+const NoButton = () => null;
+
+const ThreadContent = ({ thread }: { thread: StreamThread }) => {
+  // Marks the thread as on screen while the window is visible and focused.
+  useActiveThread({ activeThread: thread });
+  return (
+    <Thread thread={thread}>
+      <ThreadHeader EndContent={NoButton} StartContent={BackButton} />
+      <MessageList />
+      <MessageComposer />
+    </Thread>
+  );
+};
+
+export const slotRenderers: ChatViewSlotRenderers = {
+  channel: ({ source }) => (
+    <Channel channel={source}>
+      <ChannelHeader StartContent={BackButton} />
+      <MessageList />
+      <MessageComposer />
+    </Channel>
+  ),
+  thread: ({ source }) => <ThreadContent thread={source} />,
+};
+
+// Shows the view's list until something opens in its slot, then only the slot.
+export const SinglePane = ({ list }: { list: ReactNode }) => {
+  const { slotBindings } = useLayoutViewState();
+
+  if (slotBindings.main) return <Slot slot='main' />;
+
+  return (
+    <>
+      <ChatView.Selector />
+      {list}
+    </>
+  );
+};
diff --git a/examples/cookbook/src/recipes/message-actions/action-bar/CustomMessageUi.css b/examples/cookbook/src/recipes/message-actions/action-bar/CustomMessageUi.css
new file mode 100644
index 0000000000..b8a17d5ccd
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/action-bar/CustomMessageUi.css
@@ -0,0 +1,147 @@
+@layer stream-overrides {
+  .cookbook-message-ui {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-xs);
+    padding-inline: var(--str-chat__spacing-xl);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-message-ui--mine {
+    flex-direction: row-reverse;
+  }
+
+  .cookbook-message-ui__avatar {
+    flex-shrink: 0;
+  }
+
+  .cookbook-message-ui__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-xxs);
+    max-width: 70%;
+  }
+
+  .cookbook-message-ui--mine .cookbook-message-ui__content {
+    align-items: flex-end;
+  }
+
+  .cookbook-message-ui__text {
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 1px solid var(--str-chat__chat-border-incoming);
+    border-radius: var(--str-chat__message-bubble-radius-group-bottom);
+    background: var(--str-chat__chat-bg-incoming);
+    color: var(--str-chat__chat-text-incoming);
+  }
+
+  .cookbook-message-ui--mine .cookbook-message-ui__text {
+    border-color: var(--str-chat__chat-border-outgoing);
+    background: var(--str-chat__chat-bg-outgoing);
+    color: var(--str-chat__chat-text-outgoing);
+  }
+
+  /* Markdown wraps the text in paragraphs; the bubble's padding already spaces it. */
+  .cookbook-message-ui__text p {
+    margin: 0;
+  }
+
+  .cookbook-message-ui__metadata {
+    display: none;
+    align-items: baseline;
+    gap: var(--str-chat__spacing-xxs);
+    padding-inline: var(--str-chat__spacing-xs);
+    color: var(--str-chat__chat-text-timestamp);
+    font: var(--str-chat__font-metadata-default);
+  }
+
+  .cookbook-message-ui__metadata > * + *::before {
+    content: '·';
+    margin-inline-end: var(--str-chat__spacing-xxs);
+  }
+
+  .str-chat__li--bottom .cookbook-message-ui__metadata,
+  .str-chat__li--single .cookbook-message-ui__metadata {
+    display: flex;
+  }
+
+  .str-chat__li--top .cookbook-message-ui__avatar,
+  .str-chat__li--middle .cookbook-message-ui__avatar {
+    visibility: hidden;
+  }
+
+  .cookbook-message-ui:hover,
+  .cookbook-message-ui:focus-within {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-message-ui__actions {
+    position: absolute;
+    top: calc(-1 * var(--str-chat__spacing-md));
+    display: flex;
+    gap: var(--str-chat__spacing-xs);
+    /* Hidden but still in the tab order, so focusing a button shows the actions. */
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .cookbook-message-ui:hover .cookbook-message-ui__actions,
+  .cookbook-message-ui:focus-within .cookbook-message-ui__actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .cookbook-message-ui--mine .cookbook-message-ui__actions {
+    left: var(--str-chat__spacing-xl);
+  }
+
+  .cookbook-message-ui--other .cookbook-message-ui__actions {
+    right: var(--str-chat__spacing-xl);
+  }
+
+  .cookbook-message-ui__actions-group {
+    display: flex;
+    gap: var(--str-chat__spacing-xxs);
+    padding: var(--str-chat__spacing-xxs);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-max);
+    background: var(--str-chat__background-core-elevation-1);
+    box-shadow: var(--str-chat__box-shadow-2);
+  }
+
+  .cookbook-message-ui__actions-group:empty {
+    display: none;
+  }
+
+  .cookbook-message-ui__actions-group button {
+    padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xs);
+    border: 0;
+    border-radius: var(--str-chat__radius-max);
+    background: none;
+    font: var(--str-chat__font-body-default);
+    cursor: pointer;
+  }
+
+  .cookbook-message-ui__actions-group button:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-message-ui__reply-count {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--str-chat__chat-text-link);
+    font: var(--str-chat__font-metadata-emphasis);
+    cursor: pointer;
+  }
+
+  .cookbook-message-ui__deleted {
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 1px dashed var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__message-bubble-radius-group-bottom);
+    color: var(--str-chat__text-tertiary);
+    font: var(--str-chat__font-body-default);
+    font-style: italic;
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-actions/action-bar/CustomMessageUi.tsx b/examples/cookbook/src/recipes/message-actions/action-bar/CustomMessageUi.tsx
new file mode 100644
index 0000000000..f232f6d576
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/action-bar/CustomMessageUi.tsx
@@ -0,0 +1,196 @@
+import type { LocalMessage, UserResponse } from 'stream-chat';
+import { convertTimestampToDate } from 'stream-chat';
+import {
+  Avatar,
+  isMessageDeleted,
+  MessageText,
+  useChatContext,
+  useMessageContext,
+  useThreadContext,
+  useUserRole,
+} from 'stream-chat-react';
+import './CustomMessageUi.css';
+
+const statusIconMap = {
+  delivered: { icon: '✅', label: 'Delivered' },
+  read: { icon: '👁️', label: 'Read' },
+  sending: { icon: '🛫', label: 'Sending' },
+  sent: { icon: '✉️', label: 'Sent' },
+  unknown: { icon: '❓', label: 'Status unknown' },
+};
+
+type MessageStatusParams = {
+  deliveredTo: UserResponse[];
+  message: LocalMessage;
+  ownUserId: string;
+  readBy: UserResponse[];
+  threadList: boolean;
+};
+
+const getMessageStatus = ({
+  deliveredTo,
+  message,
+  ownUserId,
+  readBy,
+  threadList,
+}: MessageStatusParams): keyof typeof statusIconMap => {
+  const [firstReader] = readBy;
+  const [firstDeliveredUser] = deliveredTo;
+
+  const justReadByMe = readBy.length === 1 && firstReader?.id === ownUserId;
+  const read = readBy.length > 0 && !justReadByMe && !threadList;
+
+  const deliveredOnlyToMe =
+    deliveredTo.length === 1 && firstDeliveredUser?.id === ownUserId;
+  const delivered = deliveredTo.length > 0 && !deliveredOnlyToMe && !read && !threadList;
+
+  const sent = message.status === 'received' && !delivered && !read && !threadList;
+  const sending = message.status === 'sending';
+
+  if (read) return 'read';
+  if (delivered) return 'delivered';
+  if (sent) return 'sent';
+  if (sending) return 'sending';
+  return 'unknown';
+};
+
+const CustomMessageUiMetadata = () => {
+  const {
+    deliveredTo = [],
+    handleOpenThread,
+    isMyMessage,
+    message,
+    readBy = [],
+  } = useMessageContext();
+  const { client } = useChatContext();
+  const threadList = !!useThreadContext();
+
+  const createdAt = convertTimestampToDate(message.created_at);
+  const editedAt = convertTimestampToDate(message.message_text_updated_at);
+  const status =
+    statusIconMap[
+      getMessageStatus({
+        deliveredTo,
+        message,
+        ownUserId: client.user?.id ?? '',
+        readBy,
+        threadList,
+      })
+    ];
+
+  return (
+    <div className='cookbook-message-ui__metadata'>
+      <span>
+        {createdAt?.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
+      </span>
+      {isMyMessage() && (
+        <span aria-label={status.label} role='img' title={status.label}>
+          {status.icon}
+        </span>
+      )}
+      {editedAt && <span title={editedAt.toLocaleString()}>Edited</span>}
+      {!threadList && message.reply_count > 0 && (
+        <span>
+          <button
+            className='cookbook-message-ui__reply-count'
+            onClick={handleOpenThread}
+            type='button'
+          >
+            {message.reply_count} {message.reply_count > 1 ? 'replies' : 'reply'}
+          </button>
+        </span>
+      )}
+    </div>
+  );
+};
+
+const CustomMessageUiActions = () => {
+  const { handleDelete, handleFlag, handleOpenThread, handlePin, message } =
+    useMessageContext();
+  const threadList = !!useThreadContext();
+  const { canDelete, canFlag, canPin, canReply } = useUserRole(message);
+
+  return (
+    <div className='cookbook-message-ui__actions'>
+      <div className='cookbook-message-ui__actions-group'>
+        {canPin && !threadList && (
+          <button
+            aria-label={message.pinned ? 'Unpin' : 'Pin'}
+            onClick={handlePin}
+            title={message.pinned ? 'Unpin' : 'Pin'}
+            type='button'
+          >
+            <span aria-hidden='true'>{message.pinned ? '📍' : '📌'}</span>
+          </button>
+        )}
+        {canDelete && (
+          <button
+            aria-label='Delete'
+            onClick={() => void handleDelete()}
+            title='Delete'
+            type='button'
+          >
+            <span aria-hidden='true'>🗑️</span>
+          </button>
+        )}
+        {canReply && !threadList && (
+          <button
+            aria-label='Open thread'
+            onClick={handleOpenThread}
+            title='Open thread'
+            type='button'
+          >
+            <span aria-hidden='true'>↩️</span>
+          </button>
+        )}
+        {canFlag && (
+          <button
+            aria-label='Flag message'
+            onClick={handleFlag}
+            title='Flag message'
+            type='button'
+          >
+            <span aria-hidden='true'>🚩</span>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const CustomMessageUi = () => {
+  const { isMyMessage, message } = useMessageContext();
+
+  const messageUiClassNames = ['cookbook-message-ui'];
+  const isDeleted = isMessageDeleted(message);
+
+  if (isMyMessage()) {
+    messageUiClassNames.push('cookbook-message-ui--mine');
+  } else {
+    messageUiClassNames.push('cookbook-message-ui--other');
+  }
+
+  return (
+    <div className={messageUiClassNames.join(' ')}>
+      <Avatar
+        className='cookbook-message-ui__avatar'
+        imageUrl={message.user?.image}
+        size='md'
+        userName={message.user?.name || message.user?.id}
+      />
+      <div className='cookbook-message-ui__content'>
+        {isDeleted ? (
+          <div className='cookbook-message-ui__deleted'>This message was deleted.</div>
+        ) : (
+          <>
+            <div className='cookbook-message-ui__text'>
+              <MessageText />
+            </div>
+            <CustomMessageUiMetadata />
+          </>
+        )}
+      </div>
+      {!isDeleted && <CustomMessageUiActions />}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/message-actions/action-bar/SimulateMessageStates.tsx b/examples/cookbook/src/recipes/message-actions/action-bar/SimulateMessageStates.tsx
new file mode 100644
index 0000000000..114c846857
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/action-bar/SimulateMessageStates.tsx
@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import type { LocalMessage, StreamChat } from 'stream-chat';
+import { useChatContext } from 'stream-chat-react';
+
+/**
+ * For the screenshots only, not part of the recipe. The demo data has no Markdown, mentions, edits
+ * or deletions, and the seed can't add them, so this changes this page's copy of a few Design
+ * review messages: Cleo's reply mentions Bob, uses bold text and is edited, and with `deleted`
+ * Cara's message about the mockups is shown as deleted. Nothing is sent to the server.
+ */
+export const SimulateMessageStates = ({ deleted = false }: { deleted?: boolean }) => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    const patches: Record<string, (message: LocalMessage) => Partial<LocalMessage>> = {
+      'docs-v15-ck-design-3': (message) => ({
+        mentioned_users: usersById(client, ['docs-v15-ck-bob']),
+        message_text_updated_at: message.created_at,
+        text: '@Bob yes, the **rounded** set fits better with the avatars.',
+      }),
+      ...(deleted && {
+        'docs-v15-ck-design-6': (message: LocalMessage) => ({
+          deleted_at: message.created_at,
+          text: '',
+          type: 'deleted' as const,
+        }),
+      }),
+    };
+
+    // The store hands out a new object on every server update; patched ones are remembered, so a
+    // patch is applied once per update and never to its own result.
+    const patched = new WeakSet<LocalMessage>();
+    const unsubscribes = Object.entries(patches).map(([id, patch]) =>
+      client.messageStore.subscribe(id, (message) => {
+        if (!message || patched.has(message)) return;
+        // Written after the store finishes notifying, never from inside its notification.
+        queueMicrotask(() => {
+          const current = client.messageStore.get(id);
+          if (!current || patched.has(current)) return;
+          const next = { ...current, ...patch(current) };
+          patched.add(next);
+          client.messageStore.upsert(next);
+        });
+      }),
+    );
+
+    return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
+  }, [client, deleted]);
+
+  return null;
+};
+
+const usersById = (client: StreamChat, ids: string[]) =>
+  ids.flatMap((id) => (client.state.users[id] ? [client.state.users[id]] : []));
diff --git a/examples/cookbook/src/recipes/message-actions/action-bar/WithCustomMessageUi.tsx b/examples/cookbook/src/recipes/message-actions/action-bar/WithCustomMessageUi.tsx
new file mode 100644
index 0000000000..52f58af7c4
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/action-bar/WithCustomMessageUi.tsx
@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from 'react';
+import { WithComponents } from 'stream-chat-react';
+import { CustomMessageUi } from './CustomMessageUi';
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { MessageUI: CustomMessageUi };
+
+export const WithCustomMessageUi = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/message-actions/action-bar/default.recipe.tsx b/examples/cookbook/src/recipes/message-actions/action-bar/default.recipe.tsx
new file mode 100644
index 0000000000..f2bbe57d4d
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/action-bar/default.recipe.tsx
@@ -0,0 +1,11 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { SimulateMessageStates } from './SimulateMessageStates';
+import { WithCustomMessageUi } from './WithCustomMessageUi';
+
+// The custom message with the action bar and the reply count.
+const recipe: RecipeConfig = {
+  chatViewChildren: <SimulateMessageStates deleted />,
+  Wrapper: WithCustomMessageUi,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-actions/action-bar/shots.json b/examples/cookbook/src/recipes/message-actions/action-bar/shots.json
new file mode 100644
index 0000000000..9a4611497e
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/action-bar/shots.json
@@ -0,0 +1,14 @@
+[
+  {
+    "file": "custom-message-action-bar.png",
+    "variant": "default",
+    "query": {
+      "channel": "docs-v15-cb-design"
+    },
+    "waitFor": ".str-chat__li[data-message-id=\"docs-v15-ck-design-7\"]",
+    "clip": ".str-chat__message-list .str-chat__ul",
+    "padding": 0,
+    "settleMs": 1500,
+    "hover": ".str-chat__li[data-message-id=\"docs-v15-ck-design-5\"] .cookbook-message-ui__text"
+  }
+]
diff --git a/examples/cookbook/src/recipes/message-actions/attachment-actions/ClickVoteLocally.tsx b/examples/cookbook/src/recipes/message-actions/attachment-actions/ClickVoteLocally.tsx
new file mode 100644
index 0000000000..9bf4348eed
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/attachment-actions/ClickVoteLocally.tsx
@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+/**
+ * For the screenshots only, not part of the recipe: `?vote=love` clicks the first "Love" button
+ * once it's on screen, so the shot shows the reaction the click adds. The cookbook is read-only,
+ * so the reaction stays on this device; reloading the page drops it.
+ */
+export const ClickVoteLocally = () => {
+  useEffect(() => {
+    if (new URLSearchParams(window.location.search).get('vote') !== 'love') return;
+
+    const timer = setInterval(() => {
+      const button = [
+        ...document.querySelectorAll<HTMLButtonElement>('.cookbook-vote-actions__button'),
+      ].find((element) => element.textContent === 'Love');
+      if (!button) return;
+      clearInterval(timer);
+      button.click();
+    }, 200);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/message-actions/attachment-actions/VoteAttachment.tsx b/examples/cookbook/src/recipes/message-actions/attachment-actions/VoteAttachment.tsx
new file mode 100644
index 0000000000..1a799c619e
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/attachment-actions/VoteAttachment.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import type { AttachmentProps } from 'stream-chat-react';
+import { Attachment, WithComponents } from 'stream-chat-react';
+import { VoteAttachmentActions } from './VoteAttachmentActions';
+
+export const VoteAttachment = (props: AttachmentProps) => (
+  <Attachment {...props} AttachmentActions={VoteAttachmentActions} />
+);
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { Attachment: VoteAttachment };
+
+export const WithVoteAttachments = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/message-actions/attachment-actions/VoteAttachmentActions.css b/examples/cookbook/src/recipes/message-actions/attachment-actions/VoteAttachmentActions.css
new file mode 100644
index 0000000000..c94abd9ed1
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/attachment-actions/VoteAttachmentActions.css
@@ -0,0 +1,11 @@
+@layer stream-overrides {
+  .cookbook-vote-actions {
+    display: flex;
+    gap: var(--str-chat__spacing-xs);
+    padding: var(--str-chat__spacing-xs);
+  }
+
+  .cookbook-vote-actions__button {
+    flex: 1;
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-actions/attachment-actions/VoteAttachmentActions.tsx b/examples/cookbook/src/recipes/message-actions/attachment-actions/VoteAttachmentActions.tsx
new file mode 100644
index 0000000000..9d1fcce5c5
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/attachment-actions/VoteAttachmentActions.tsx
@@ -0,0 +1,34 @@
+import type { AttachmentActionsProps } from 'stream-chat-react';
+import { AttachmentActions, Button, useMessageContext } from 'stream-chat-react';
+import './VoteAttachmentActions.css';
+
+export const VoteAttachmentActions = (props: AttachmentActionsProps) => {
+  const { actions, type } = props;
+  const { handleReaction, message } = useMessageContext();
+
+  if (type !== 'image') return <AttachmentActions {...props} />;
+
+  const ownReactionTypes = new Set(
+    message.own_reactions?.map((reaction) => reaction.type),
+  );
+
+  return (
+    <div className='cookbook-vote-actions'>
+      {actions.map((action) => (
+        <Button
+          appearance={action.value === 'love' ? 'solid' : 'outline'}
+          aria-pressed={!!action.value && ownReactionTypes.has(action.value)}
+          className='cookbook-vote-actions__button'
+          key={action.value}
+          onClick={(event) => {
+            if (action.value) void handleReaction(action.value, event);
+          }}
+          size='sm'
+          variant={action.value === 'love' ? 'primary' : 'secondary'}
+        >
+          {action.text}
+        </Button>
+      ))}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/message-actions/attachment-actions/default.recipe.tsx b/examples/cookbook/src/recipes/message-actions/attachment-actions/default.recipe.tsx
new file mode 100644
index 0000000000..419ac2ab90
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/attachment-actions/default.recipe.tsx
@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react';
+import { useEffect } from 'react';
+import { useChatContext } from 'stream-chat-react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { ClickVoteLocally } from './ClickVoteLocally';
+import { installVoteActions } from './installVoteActions';
+import { WithVoteAttachments } from './VoteAttachment';
+
+const VoteActionsSetup = () => {
+  const { client } = useChatContext();
+  useEffect(() => installVoteActions(client), [client]);
+  return null;
+};
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithVoteAttachments>
+    <VoteActionsSetup />
+    <ClickVoteLocally />
+    {children}
+  </WithVoteAttachments>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-actions/attachment-actions/demo-data.json b/examples/cookbook/src/recipes/message-actions/attachment-actions/demo-data.json
new file mode 100644
index 0000000000..0ab4059c10
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/attachment-actions/demo-data.json
@@ -0,0 +1,34 @@
+{
+  "channels": [
+    {
+      "id": "docs-v15-cb-photos",
+      "name": "Trip photos",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-bob", "docs-v15-ck-cara"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-photos-1",
+          "user": "docs-v15-ck-bob",
+          "text": "Which view should go on the trip poster?"
+        },
+        {
+          "id": "docs-v15-ck-photos-2",
+          "user": "docs-v15-ck-cara",
+          "text": "This one, from the ridge.",
+          "attachments": [
+            {
+              "type": "image",
+              "fallback": "mountain-view.jpg",
+              "image_url": "https://picsum.photos/id/1018/640/427",
+              "original_height": 427,
+              "original_width": 640,
+              "actions": [
+                { "name": "vote", "text": "Love", "type": "button", "value": "love" },
+                { "name": "vote", "text": "Loathe", "type": "button", "value": "sad" }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/message-actions/attachment-actions/installVoteActions.ts b/examples/cookbook/src/recipes/message-actions/attachment-actions/installVoteActions.ts
new file mode 100644
index 0000000000..d5626b5d2c
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/attachment-actions/installVoteActions.ts
@@ -0,0 +1,17 @@
+import type { StreamChat } from 'stream-chat';
+import { voteActionsMiddleware } from './voteActionsMiddleware';
+
+/** Adds the vote actions to every composer's images; returns a function that stops it. */
+export const installVoteActions = (client: StreamChat) => {
+  client.config.setSetupFunction('messageComposer', ({ composer }) => {
+    composer.compositionMiddlewareExecutor.insert({
+      middleware: [voteActionsMiddleware],
+      position: { after: 'stream-io/message-composer-middleware/attachments' },
+      unique: true,
+    });
+
+    return () => composer.compositionMiddlewareExecutor.remove(voteActionsMiddleware.id);
+  });
+
+  return () => client.config.setSetupFunction('messageComposer', null);
+};
diff --git a/examples/cookbook/src/recipes/message-actions/attachment-actions/shots.json b/examples/cookbook/src/recipes/message-actions/attachment-actions/shots.json
new file mode 100644
index 0000000000..48d47de924
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/attachment-actions/shots.json
@@ -0,0 +1,18 @@
+[
+  {
+    "file": "attachment-actions-before.png",
+    "query": { "channel": "docs-v15-cb-photos" },
+    "waitFor": ".cookbook-vote-actions",
+    "clip": ".str-chat__li",
+    "hasText": "from the ridge",
+    "padding": 0
+  },
+  {
+    "file": "attachment-actions-after.png",
+    "query": { "channel": "docs-v15-cb-photos", "vote": "love" },
+    "waitFor": ".str-chat__message-reactions",
+    "clip": ".str-chat__li",
+    "hasText": "from the ridge",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/message-actions/attachment-actions/voteActions.ts b/examples/cookbook/src/recipes/message-actions/attachment-actions/voteActions.ts
new file mode 100644
index 0000000000..bf66dac853
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/attachment-actions/voteActions.ts
@@ -0,0 +1,6 @@
+import type { Action } from 'stream-chat';
+
+export const voteActions: Action[] = [
+  { name: 'vote', text: 'Love', type: 'button', value: 'love' },
+  { name: 'vote', text: 'Loathe', type: 'button', value: 'sad' },
+];
diff --git a/examples/cookbook/src/recipes/message-actions/attachment-actions/voteActionsMiddleware.ts b/examples/cookbook/src/recipes/message-actions/attachment-actions/voteActionsMiddleware.ts
new file mode 100644
index 0000000000..057ff1ec1c
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/attachment-actions/voteActionsMiddleware.ts
@@ -0,0 +1,38 @@
+import { isImageAttachment } from 'stream-chat';
+import type {
+  Attachment,
+  MessageComposerMiddlewareState,
+  MessageCompositionMiddleware,
+  MiddlewareHandlerParams,
+} from 'stream-chat';
+import { voteActions } from './voteActions';
+
+const addVoteActions = (attachments: Attachment[] = []) =>
+  attachments.map((attachment) =>
+    isImageAttachment(attachment) ? { ...attachment, actions: voteActions } : attachment,
+  );
+
+export const voteActionsMiddleware: MessageCompositionMiddleware = {
+  id: 'my-app/vote-actions',
+  handlers: {
+    compose: ({
+      forward,
+      next,
+      state,
+    }: MiddlewareHandlerParams<MessageComposerMiddlewareState>) => {
+      if (!state.message.attachments?.some(isImageAttachment)) return forward();
+
+      return next({
+        ...state,
+        localMessage: {
+          ...state.localMessage,
+          attachments: addVoteActions(state.localMessage.attachments),
+        },
+        message: {
+          ...state.message,
+          attachments: addVoteActions(state.message.attachments),
+        },
+      });
+    },
+  },
+};
diff --git a/examples/cookbook/src/recipes/message-actions/custom-message-actions/CustomMessageActions.tsx b/examples/cookbook/src/recipes/message-actions/custom-message-actions/CustomMessageActions.tsx
new file mode 100644
index 0000000000..4373bcd2d3
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/custom-message-actions/CustomMessageActions.tsx
@@ -0,0 +1,66 @@
+import type { PropsWithChildren } from 'react';
+import type { MessageActionSetItem } from 'stream-chat-react';
+import {
+  ContextMenuButton,
+  defaultMessageActionSet,
+  MessageActions,
+  QuickMessageActionsButton,
+  useComponentContextIcons,
+  useContextMenuContext,
+  useMessageContext,
+  WithComponents,
+} from 'stream-chat-react';
+
+const YellAction = () => {
+  const { IconMegaphone } = useComponentContextIcons();
+  const { closeMenu } = useContextMenuContext();
+  const { message } = useMessageContext();
+
+  if (!message.text) return null;
+
+  return (
+    <ContextMenuButton
+      Icon={IconMegaphone}
+      onClick={() => {
+        window.alert(message.text?.toUpperCase());
+        closeMenu();
+      }}
+    >
+      Yell
+    </ContextMenuButton>
+  );
+};
+
+const CopyIdAction = () => {
+  const { IconCopy } = useComponentContextIcons();
+  const { message } = useMessageContext();
+
+  return (
+    <QuickMessageActionsButton
+      aria-label='Copy message ID'
+      onClick={() => void navigator.clipboard.writeText(message.id)}
+    >
+      <IconCopy />
+    </QuickMessageActionsButton>
+  );
+};
+
+const hiddenTypes = new Set(['blockUser', 'markUnread']);
+
+// Declared once: the base filter recomputes whenever it gets a new list.
+const messageActionSet: MessageActionSetItem[] = [
+  // The "more" button has no type, so it's kept explicitly.
+  ...defaultMessageActionSet.filter(
+    (item) => item.placement === 'quick-dropdown-toggle' || !hiddenTypes.has(item.type),
+  ),
+  { Component: CopyIdAction, placement: 'quick', type: 'copyId' },
+  { Component: YellAction, placement: 'dropdown', type: 'yell' },
+];
+
+const CustomMessageActions = () => <MessageActions messageActionSet={messageActionSet} />;
+
+const overrides = { MessageActions: CustomMessageActions };
+
+export const WithCustomMessageActions = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/message-actions/custom-message-actions/OpenMenuFromUrl.tsx b/examples/cookbook/src/recipes/message-actions/custom-message-actions/OpenMenuFromUrl.tsx
new file mode 100644
index 0000000000..5f1aa7dcd8
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/custom-message-actions/OpenMenuFromUrl.tsx
@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+/**
+ * For the screenshot only, not part of the recipe: `?menu=<message id>` opens that message's
+ * actions menu once the message is on screen, by clicking its "more" button as a user would.
+ */
+export const OpenMenuFromUrl = () => {
+  useEffect(() => {
+    const messageId = new URLSearchParams(window.location.search).get('menu');
+    if (!messageId) return;
+
+    const timer = setInterval(() => {
+      const toggle = document.querySelector<HTMLButtonElement>(
+        `[data-message-id='${messageId}'] [data-testid='message-actions-toggle-button']`,
+      );
+      if (!toggle) return;
+      clearInterval(timer);
+      toggle.click();
+    }, 200);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/message-actions/custom-message-actions/default.recipe.tsx b/examples/cookbook/src/recipes/message-actions/custom-message-actions/default.recipe.tsx
new file mode 100644
index 0000000000..ecede71362
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/custom-message-actions/default.recipe.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { WithCustomMessageActions } from './CustomMessageActions';
+import { OpenMenuFromUrl } from './OpenMenuFromUrl';
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithCustomMessageActions>
+    <OpenMenuFromUrl />
+    {children}
+  </WithCustomMessageActions>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-actions/custom-message-actions/shots.json b/examples/cookbook/src/recipes/message-actions/custom-message-actions/shots.json
new file mode 100644
index 0000000000..098f9e28e4
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/custom-message-actions/shots.json
@@ -0,0 +1,12 @@
+[
+  {
+    "file": "custom-message-actions-menu.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "menu": "docs-v15-ck-design-6"
+    },
+    "waitFor": ".str-chat__message-actions-box--open",
+    "hover": "[data-message-id='docs-v15-ck-design-6'] .str-chat__message-bubble",
+    "clip": ".str-chat__main-panel-inner"
+  }
+]
diff --git a/examples/cookbook/src/recipes/message-actions/editing-a-poll/EditPollAction.tsx b/examples/cookbook/src/recipes/message-actions/editing-a-poll/EditPollAction.tsx
new file mode 100644
index 0000000000..9d510c5134
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/editing-a-poll/EditPollAction.tsx
@@ -0,0 +1,94 @@
+import { createContext, useContext, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import type { Poll, PollState } from 'stream-chat';
+import type { MessageActionSetItem } from 'stream-chat-react';
+import {
+  ContextMenuButton,
+  defaultMessageActionSet,
+  MessageActions,
+  useChannel,
+  useChatContext,
+  useComponentContextIcons,
+  useContextMenuContext,
+  useMessageContext,
+  useStateStore,
+  useThreadContext,
+  WithComponents,
+} from 'stream-chat-react';
+import { EditPollDialog } from './EditPollDialog';
+import type { EditPollTarget } from './EditPollDialog';
+
+// The menu closes, and its items unmount, before the dialog opens, so the dialog lives above the
+// message list and the action only says which poll to open it for.
+const OpenEditPollContext = createContext<(target: EditPollTarget) => void>(
+  () => undefined,
+);
+
+const pollSelector = ({ created_by_id, is_closed }: PollState) => ({
+  created_by_id,
+  is_closed,
+});
+
+/** Only on a poll the user created, while it's open. */
+const useEditablePoll = (): Poll | undefined => {
+  const { client } = useChatContext();
+  const { message } = useMessageContext();
+  const poll = message.poll_id ? client.polls.fromState(message.poll_id) : undefined;
+  const state = useStateStore(poll?.state, pollSelector);
+  const isEditable = !!state && !state.is_closed && state.created_by_id === client.userId;
+  return isEditable ? poll : undefined;
+};
+
+const EditPollActionItem = () => {
+  const { IconEdit } = useComponentContextIcons();
+  const { closeMenu } = useContextMenuContext();
+  const { message } = useMessageContext();
+  const channel = useChannel();
+  const thread = useThreadContext();
+  const openEditPoll = useContext(OpenEditPollContext);
+  const poll = useEditablePoll();
+
+  if (!poll) return null;
+
+  return (
+    <ContextMenuButton
+      Icon={IconEdit}
+      onClick={() => {
+        closeMenu();
+        openEditPoll({
+          // Not `handleDelete` from `MessageContext`: it reports a failure as a notification and
+          // resolves, so the dialog couldn't tell. `messageOperations.delete()` rejects instead.
+          deleteMessage: () =>
+            (thread ?? channel).messageOperations.delete({ localMessage: message }),
+          poll,
+        });
+      }}
+    >
+      Edit poll
+    </ContextMenuButton>
+  );
+};
+
+// Declared once: the base filter recomputes whenever it gets a new list.
+const messageActionSet: MessageActionSetItem[] = [
+  ...defaultMessageActionSet,
+  { Component: EditPollActionItem, placement: 'dropdown', type: 'editPoll' },
+];
+
+const MessageActionsWithEditPoll = () => (
+  <MessageActions messageActionSet={messageActionSet} />
+);
+
+const overrides = { MessageActions: MessageActionsWithEditPoll };
+
+/** Adds Edit poll to the message actions, and renders the one dialog it opens. */
+export const WithEditPoll = ({ children }: PropsWithChildren) => {
+  const [target, setTarget] = useState<EditPollTarget>();
+
+  return (
+    <OpenEditPollContext.Provider value={setTarget}>
+      <WithComponents overrides={overrides}>{children}</WithComponents>
+      <EditPollDialog onClose={() => setTarget(undefined)} target={target} />
+    </OpenEditPollContext.Provider>
+  );
+};
diff --git a/examples/cookbook/src/recipes/message-actions/editing-a-poll/EditPollDialog.css b/examples/cookbook/src/recipes/message-actions/editing-a-poll/EditPollDialog.css
new file mode 100644
index 0000000000..0cca319a8c
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/editing-a-poll/EditPollDialog.css
@@ -0,0 +1,45 @@
+@layer stream-overrides {
+  .cookbook-edit-poll__add-option {
+    align-self: flex-start;
+  }
+
+  .cookbook-edit-poll__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--str-chat__spacing-sm);
+    width: 100%;
+  }
+
+  .cookbook-edit-poll__poll-actions {
+    display: flex;
+    gap: var(--str-chat__spacing-xs);
+  }
+
+  .cookbook-edit-poll__confirm {
+    margin: 0;
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-emphasis);
+  }
+
+  .cookbook-edit-poll__remove-confirm {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+    padding-top: var(--str-chat__spacing-xs);
+  }
+
+  .cookbook-edit-poll__remove-confirm-text {
+    flex: 1;
+    margin: 0;
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-edit-poll__error {
+    margin: 0;
+    color: var(--str-chat__accent-error);
+    font: var(--str-chat__font-caption-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-actions/editing-a-poll/EditPollDialog.tsx b/examples/cookbook/src/recipes/message-actions/editing-a-poll/EditPollDialog.tsx
new file mode 100644
index 0000000000..0c65d61736
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/editing-a-poll/EditPollDialog.tsx
@@ -0,0 +1,407 @@
+import { useId, useState } from 'react';
+import type { Poll, PollState } from 'stream-chat';
+import {
+  Button,
+  GlobalModal,
+  NumericInput,
+  Prompt,
+  SwitchField,
+  SwitchFieldLabel,
+  TextInput,
+  TextInputFieldSet,
+  useComponentContextIcons,
+  useStateStore,
+} from 'stream-chat-react';
+import {
+  hasErrors,
+  pollFormFromState,
+  restoreOptions,
+  savePollForm,
+  validatePollForm,
+} from './pollForm';
+import type { ConfirmedVoteLoss, PollForm, PollFormOption, PollOption } from './pollForm';
+import './EditPollDialog.css';
+
+export type EditPollTarget = {
+  /** Deletes the message that carries the poll; rejects when the request fails. */
+  deleteMessage: () => Promise<void>;
+  poll: Poll;
+};
+
+const votesSelector = ({ vote_count, vote_counts_by_option }: PollState) => ({
+  vote_count,
+  vote_counts_by_option,
+});
+
+const votesLabel = (votes: number) => `${votes} ${votes === 1 ? 'vote' : 'votes'}`;
+
+/** Why Save sent nothing: these options got votes after the user removed them. */
+const newVotesNotice = (options: PollOption[]) => {
+  const names = options.map(({ text }) => `"${text}"`).join(', ');
+  const [pronoun, isBack] =
+    options.length === 1 ? ['it', "it's back"] : ['them', "they're back"];
+  return `${names} got votes after you removed ${pronoun}, so ${isBack}. Nothing was saved yet: press Save again to keep your other changes.`;
+};
+
+let newOptionCount = 0;
+const newOption = (): PollFormOption => ({ key: `new-${++newOptionCount}`, text: '' });
+
+type EditPollFormProps = { onClose: () => void; target: EditPollTarget };
+
+const EditPollForm = ({
+  onClose,
+  target: { deleteMessage, poll },
+}: EditPollFormProps) => {
+  const { IconMinusCircle, IconPlus } = useComponentContextIcons();
+  // The poll as it was when the dialog opened: the form starts from it, and Save sends only what
+  // differs from it.
+  const [saved] = useState(() => poll.data);
+  const [form, setForm] = useState(() => pollFormFromState(saved));
+  const [showErrors, setShowErrors] = useState(false);
+  const [isBusy, setIsBusy] = useState(false);
+  const [alertText, setAlertText] = useState<string>();
+  const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);
+  // The row whose removal waits for the user to confirm that its votes go with it.
+  const [confirmingRemovalKey, setConfirmingRemovalKey] = useState<string>();
+  const [confirmedVoteLoss, setConfirmedVoteLoss] = useState<ConfirmedVoteLoss>({});
+  // Set once `Poll.delete()` succeeded, so trying again deletes only the message.
+  const [isPollDeleted, setIsPollDeleted] = useState(false);
+  // Live, so the counts and the removal confirmation follow votes cast while the dialog is open.
+  const { vote_count, vote_counts_by_option } = useStateStore(poll.state, votesSelector);
+  // A row whose votes dropped to zero needs no confirmation any more, so its prompt is dropped
+  // for good rather than coming back with the next vote.
+  const confirmingOption = form.options.find(
+    (option: PollFormOption) => option.key === confirmingRemovalKey,
+  );
+  if (
+    confirmingRemovalKey &&
+    !(confirmingOption?.id && vote_counts_by_option[confirmingOption.id])
+  ) {
+    setConfirmingRemovalKey(undefined);
+  }
+
+  const id = useId();
+  const errors = validatePollForm(form);
+  const maxVotesError = showErrors && !!errors.max_votes_allowed;
+  const update = (changes: Partial<PollForm>) =>
+    setForm((prev: PollForm) => ({ ...prev, ...changes }));
+  const updateOption = (key: string, text: string) =>
+    update({
+      options: form.options.map((option: PollFormOption) =>
+        option.key === key ? { ...option, text } : option,
+      ),
+    });
+  const removeOption = (key: string) =>
+    update({
+      options: form.options.filter((option: PollFormOption) => option.key !== key),
+    });
+  /** Removes a row with votes once the user confirmed, and notes the votes they agreed to delete. */
+  const confirmRemoval = (option: PollFormOption, votes: number) => {
+    const { id } = option;
+    if (id) setConfirmedVoteLoss((prev: ConfirmedVoteLoss) => ({ ...prev, [id]: votes }));
+    setConfirmingRemovalKey(undefined);
+    removeOption(option.key);
+  };
+
+  /**
+   * Runs the requests, then closes the dialog. A notice the requests return, or a failure, keeps
+   * it open and says so.
+   */
+  const run = async (requests: () => Promise<string | void>, failure: string) => {
+    setIsBusy(true);
+    setAlertText(undefined);
+    try {
+      const notice = await requests();
+      if (!notice) {
+        onClose();
+        return;
+      }
+      setAlertText(notice);
+    } catch {
+      setAlertText(failure);
+    }
+    setIsBusy(false);
+  };
+
+  const save = () => {
+    if (hasErrors(errors)) {
+      setShowErrors(true);
+      return;
+    }
+    void run(async () => {
+      const { optionsWithNewVotes } = await savePollForm(
+        poll,
+        saved,
+        form,
+        confirmedVoteLoss,
+      );
+      if (!optionsWithNewVotes.length) return;
+      setForm((prev: PollForm) => restoreOptions(prev, saved, optionsWithNewVotes));
+      return newVotesNotice(optionsWithNewVotes);
+    }, 'Not every change was saved. Close the dialog and open it again to see the poll as it is now.');
+  };
+
+  /**
+   * The poll first: if that fails, nothing has changed. Then its message, which would otherwise go
+   * on showing the deleted poll.
+   */
+  const deletePollAndMessage = () =>
+    run(async () => {
+      if (!isPollDeleted) {
+        try {
+          await poll.delete();
+        } catch {
+          return 'The poll could not be deleted. Nothing has changed.';
+        }
+        setIsPollDeleted(true);
+      }
+      try {
+        await deleteMessage();
+      } catch {
+        return 'The poll was deleted, but its message could not be. Press Delete to try again.';
+      }
+    }, 'The poll could not be deleted.');
+
+  return (
+    <Prompt.Root className='str-chat__poll-creation-dialog cookbook-edit-poll'>
+      <Prompt.Header close={onClose} title='Edit poll' />
+      <Prompt.Body>
+        <form autoComplete='off' onSubmit={(event) => event.preventDefault()}>
+          <TextInput
+            className='str-chat__form__input-field__value'
+            error={showErrors && !!errors.name}
+            errorMessage={errors.name}
+            label='Question'
+            onChange={(event) => update({ name: event.target.value })}
+            value={form.name}
+          />
+          <TextInputFieldSet draggable={false} label='Options'>
+            {form.options.map((option: PollFormOption, index: number) => {
+              const votes = option.id ? (vote_counts_by_option[option.id] ?? 0) : 0;
+              const error = showErrors ? errors.options[option.key] : undefined;
+              const isConfirmingRemoval =
+                votes > 0 && confirmingRemovalKey === option.key;
+              return (
+                <div className='str-chat__form__input-field' key={option.key}>
+                  <TextInput
+                    className='str-chat__form__input-field__value'
+                    error={!!error}
+                    errorMessage={error}
+                    fieldMessagePlacement='inside'
+                    message={votes ? votesLabel(votes) : undefined}
+                    onChange={(event) => updateOption(option.key, event.target.value)}
+                    placeholder='Add an option'
+                    trailing={
+                      <Button
+                        appearance='ghost'
+                        aria-label={`Remove option: ${option.text || index + 1}`}
+                        circular
+                        className='str-chat__form__remove-option-button'
+                        // An option with votes asks first: deleting it deletes its votes.
+                        onClick={() =>
+                          votes
+                            ? setConfirmingRemovalKey(option.key)
+                            : removeOption(option.key)
+                        }
+                        size='xs'
+                        variant='secondary'
+                      >
+                        <IconMinusCircle />
+                      </Button>
+                    }
+                    value={option.text}
+                  />
+                  {isConfirmingRemoval && (
+                    <div className='cookbook-edit-poll__remove-confirm' role='alert'>
+                      <p className='cookbook-edit-poll__remove-confirm-text'>
+                        Removing it deletes its {votesLabel(votes)}.
+                      </p>
+                      <Button
+                        appearance='ghost'
+                        onClick={() => setConfirmingRemovalKey(undefined)}
+                        size='sm'
+                        variant='secondary'
+                      >
+                        Keep
+                      </Button>
+                      <Button
+                        appearance='solid'
+                        onClick={() => confirmRemoval(option, votes)}
+                        size='sm'
+                        variant='danger'
+                      >
+                        Remove
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </TextInputFieldSet>
+          <Button
+            appearance='outline'
+            className='cookbook-edit-poll__add-option'
+            onClick={() => update({ options: [...form.options, newOption()] })}
+            size='sm'
+            variant='secondary'
+          >
+            <IconPlus />
+            Add an option
+          </Button>
+          <div className='str-chat__poll-creation-dialog__features-selectors'>
+            <SwitchField
+              checked={!form.enforce_unique_vote}
+              description='Select more than one option'
+              onChange={(event) =>
+                update({ enforce_unique_vote: !event.target.checked, limitVotes: false })
+              }
+              title='Multiple votes'
+            />
+            {!form.enforce_unique_vote && (
+              // The layout of the SDK's own vote limit field: the label and, once the switch is
+              // on, the number beside it.
+              <SwitchField
+                aria-labelledby={`${id}-limit-label`}
+                checked={form.limitVotes}
+                fieldClassName='str-chat__multiple-answers-field__votes-limit-field'
+                id={`${id}-limit`}
+                onChange={(event) =>
+                  update({
+                    limitVotes: event.target.checked,
+                    max_votes_allowed: form.max_votes_allowed || '2',
+                  })
+                }
+              >
+                <div className='str-chat__multiple-answers-field__votes-limit-field__numeric-field'>
+                  <SwitchFieldLabel
+                    asError={maxVotesError}
+                    description={
+                      maxVotesError
+                        ? errors.max_votes_allowed
+                        : 'Choose between 2 and 10 votes'
+                    }
+                    htmlFor={`${id}-limit`}
+                    id={`${id}-limit-label`}
+                    title='Limit votes per person'
+                  />
+                  {form.limitVotes && (
+                    <NumericInput
+                      aria-label='Maximum votes per person'
+                      max={10}
+                      min={2}
+                      onChange={(event) =>
+                        update({ max_votes_allowed: event.target.value })
+                      }
+                      value={form.max_votes_allowed}
+                    />
+                  )}
+                </div>
+              </SwitchField>
+            )}
+            <SwitchField
+              checked={form.voting_visibility === 'anonymous'}
+              description={
+                vote_count ? "Can't change once people have voted" : 'Hide who voted'
+              }
+              // Making an anonymous poll public would reveal who cast its votes.
+              disabled={vote_count > 0}
+              onChange={(event) =>
+                update({
+                  voting_visibility: event.target.checked ? 'anonymous' : 'public',
+                })
+              }
+              title='Anonymous poll'
+            />
+            <SwitchField
+              checked={form.allow_user_suggested_options}
+              description='Let others add options'
+              onChange={(event) =>
+                update({ allow_user_suggested_options: event.target.checked })
+              }
+              title='Suggest an option'
+            />
+            <SwitchField
+              checked={form.allow_answers}
+              description='Allow others to add comments'
+              onChange={(event) => update({ allow_answers: event.target.checked })}
+              title='Add a comment'
+            />
+          </div>
+        </form>
+      </Prompt.Body>
+      <Prompt.Footer>
+        {alertText && (
+          <p className='cookbook-edit-poll__error' role='alert'>
+            {alertText}
+          </p>
+        )}
+        {isConfirmingDelete ? (
+          <div className='cookbook-edit-poll__footer'>
+            <p className='cookbook-edit-poll__confirm'>
+              Delete the poll, its votes and its message?
+            </p>
+            <Prompt.FooterControls>
+              <Prompt.FooterControlsButtonSecondary
+                // Once the poll is gone, there is nothing left to keep.
+                disabled={isBusy || isPollDeleted}
+                onClick={() => setIsConfirmingDelete(false)}
+              >
+                Keep
+              </Prompt.FooterControlsButtonSecondary>
+              <Button
+                appearance='solid'
+                disabled={isBusy}
+                onClick={() => void deletePollAndMessage()}
+                size='md'
+                variant='danger'
+              >
+                Delete
+              </Button>
+            </Prompt.FooterControls>
+          </div>
+        ) : (
+          <div className='cookbook-edit-poll__footer'>
+            <div className='cookbook-edit-poll__poll-actions'>
+              <Prompt.FooterControlsButtonSecondary
+                disabled={isBusy}
+                onClick={() =>
+                  void run(async () => {
+                    await poll.close();
+                  }, 'The poll could not be closed.')
+                }
+              >
+                Close poll
+              </Prompt.FooterControlsButtonSecondary>
+              <Button
+                appearance='ghost'
+                disabled={isBusy}
+                onClick={() => setIsConfirmingDelete(true)}
+                size='md'
+                variant='danger'
+              >
+                Delete poll
+              </Button>
+            </div>
+            <Prompt.FooterControls>
+              <Prompt.FooterControlsButtonSecondary disabled={isBusy} onClick={onClose}>
+                Cancel
+              </Prompt.FooterControlsButtonSecondary>
+              <Prompt.FooterControlsButtonPrimary disabled={isBusy} onClick={save}>
+                Save
+              </Prompt.FooterControlsButtonPrimary>
+            </Prompt.FooterControls>
+          </div>
+        )}
+      </Prompt.Footer>
+    </Prompt.Root>
+  );
+};
+
+type EditPollDialogProps = { onClose: () => void; target?: EditPollTarget };
+
+/** A dialog filled from `target.poll`; a new form starts each time it opens. */
+export const EditPollDialog = ({ onClose, target }: EditPollDialogProps) => (
+  <GlobalModal onClose={onClose} open={!!target}>
+    {target && <EditPollForm key={target.poll.id} onClose={onClose} target={target} />}
+  </GlobalModal>
+);
diff --git a/examples/cookbook/src/recipes/message-actions/editing-a-poll/OpenEditPollFromUrl.tsx b/examples/cookbook/src/recipes/message-actions/editing-a-poll/OpenEditPollFromUrl.tsx
new file mode 100644
index 0000000000..29e2871a57
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/editing-a-poll/OpenEditPollFromUrl.tsx
@@ -0,0 +1,55 @@
+import { findByText, useClickInTurn } from '../../../base/useClickInTurn';
+import type { ClickStep } from '../../../base/useClickInTurn';
+import { LOCAL_POLL_MESSAGE_ID } from './ShowPollLocally';
+
+const openMenu: ClickStep = {
+  find: () =>
+    document.querySelector<HTMLElement>(
+      `[data-message-id='${LOCAL_POLL_MESSAGE_ID}'] [data-testid='message-actions-toggle-button']`,
+    ),
+};
+
+const pickEditPoll: ClickStep = {
+  find: () => findByText('.str-chat__message-actions-box--open button', 'Edit poll'),
+};
+
+// Scrolls the dialog to its settings. The click on the dialog's body that follows does nothing.
+const scrollToSettings: ClickStep = {
+  find: () => {
+    const body = document.querySelector<HTMLElement>(
+      '.cookbook-edit-poll .str-chat__prompt__body',
+    );
+    body?.scrollTo({ top: body.scrollHeight });
+    return body;
+  },
+};
+
+// Sunday has a vote, so its remove button asks for confirmation.
+const removeVotedOption: ClickStep = {
+  find: () =>
+    document.querySelector<HTMLElement>(
+      ".cookbook-edit-poll button[aria-label='Remove option: Sunday']",
+    ),
+};
+
+const stepsByValue: Record<string, ClickStep[]> = {
+  dialog: [openMenu, pickEditPoll],
+  menu: [openMenu],
+  remove: [openMenu, pickEditPoll, removeVotedOption],
+  settings: [openMenu, pickEditPoll, scrollToSettings],
+};
+
+// Built once from the URL, so useClickInTurn gets the same array on every render.
+const steps =
+  stepsByValue[new URLSearchParams(window.location.search).get('editPoll') ?? ''] ?? [];
+
+/**
+ * For the screenshots only, not part of the recipe: `?editPoll=menu` opens the local poll
+ * message's actions menu, `?editPoll=dialog` then picks Edit poll, as a user would,
+ * `?editPoll=remove` also presses Sunday's remove button, and `?editPoll=settings` scrolls the
+ * dialog to its settings instead.
+ */
+export const OpenEditPollFromUrl = () => {
+  useClickInTurn(steps);
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/message-actions/editing-a-poll/ShowPollLocally.tsx b/examples/cookbook/src/recipes/message-actions/editing-a-poll/ShowPollLocally.tsx
new file mode 100644
index 0000000000..c76ee799b4
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/editing-a-poll/ShowPollLocally.tsx
@@ -0,0 +1,122 @@
+import { useEffect } from 'react';
+import type {
+  MessageResponse,
+  PollResponseData,
+  PollVoteResponseData,
+} from 'stream-chat';
+import { formatMessage, nowNs } from 'stream-chat';
+import { useChannel, useChatContext } from 'stream-chat-react';
+
+export const LOCAL_POLL_MESSAGE_ID = 'docs-v15-ck-trip-edit-poll';
+const POLL_ID = 'docs-v15-ck-trip-edit-poll-poll';
+
+/**
+ * For the screenshots only, not part of the recipe: `?poll=local` adds a poll from the user to the
+ * channel, as if the user had sent it. The demo app refuses polls, so the poll exists on this
+ * device only: it goes into `client.polls` and its message into the channel's paginator, and no
+ * request is sent. Bob and Cara voted for Saturday, Dan for Sunday.
+ */
+export const ShowPollLocally = () => {
+  const { client } = useChatContext();
+  const channel = useChannel();
+
+  useEffect(() => {
+    if (new URLSearchParams(window.location.search).get('poll') !== 'local') return;
+    const userId = client.user?.id;
+    if (!userId) return;
+
+    const addPoll = () => {
+      const { members } = channel.state.getLatestValue();
+      const user = members[userId]?.user;
+      if (!user) return;
+      // Wire timestamps are nanosecond numbers; `nowNs()` puts the poll after the latest message.
+      const now = nowNs();
+      const vote = (
+        id: string,
+        optionId: string,
+        voterId: string,
+      ): PollVoteResponseData => ({
+        created_at: now,
+        id,
+        option_id: optionId,
+        poll_id: POLL_ID,
+        updated_at: now,
+        user: members[voterId]?.user,
+        user_id: voterId,
+      });
+      const saturday = [
+        vote('docs-v15-ck-vote-1', 'saturday', 'docs-v15-ck-bob'),
+        vote('docs-v15-ck-vote-2', 'saturday', 'docs-v15-ck-cara'),
+      ];
+      const sunday = [vote('docs-v15-ck-vote-3', 'sunday', 'docs-v15-ck-dan')];
+      const poll: PollResponseData = {
+        allow_answers: true,
+        allow_user_suggested_options: false,
+        answers_count: 0,
+        created_at: now,
+        created_by: user,
+        created_by_id: userId,
+        custom: {},
+        description: '',
+        enforce_unique_vote: false,
+        id: POLL_ID,
+        latest_answers: [],
+        latest_votes_by_option: { saturday, sunday },
+        max_votes_allowed: 2,
+        name: 'Which day works for the hike?',
+        options: [
+          { custom: {}, id: 'saturday', text: 'Saturday' },
+          { custom: {}, id: 'sunday', text: 'Sunday' },
+          { custom: {}, id: 'either', text: 'Either day' },
+        ],
+        own_votes: [],
+        updated_at: now,
+        vote_count: 3,
+        vote_counts_by_option: { saturday: 2, sunday: 1 },
+        voting_visibility: 'public',
+      };
+      const message: MessageResponse = {
+        attachments: [],
+        cid: channel.cid,
+        created_at: now,
+        custom: {},
+        deleted_reply_count: 0,
+        html: '',
+        id: LOCAL_POLL_MESSAGE_ID,
+        latest_reactions: [],
+        mentioned_channel: false,
+        mentioned_here: false,
+        mentioned_users: [],
+        own_reactions: [],
+        pinned: false,
+        poll,
+        poll_id: POLL_ID,
+        reaction_counts: {},
+        reaction_scores: {},
+        reply_count: 0,
+        restricted_visibility: [],
+        shadowed: false,
+        silent: false,
+        text: '',
+        type: 'regular',
+        updated_at: now,
+        user,
+      };
+      // The poll first: the message renders its poll from `client.polls`.
+      client.polls.hydratePollCache([message]);
+      channel.messagePaginator.ingestItem(formatMessage(message));
+    };
+
+    // Waits for the first page, so the poll lands after the channel's latest message. The store
+    // calls the handler at once with its current value.
+    let added = false;
+    const unsubscribe = channel.messagePaginator.state.subscribe(({ items }) => {
+      if (added || !items?.length) return;
+      added = true;
+      addPoll();
+    });
+    return unsubscribe;
+  }, [channel, client]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/message-actions/editing-a-poll/default.recipe.tsx b/examples/cookbook/src/recipes/message-actions/editing-a-poll/default.recipe.tsx
new file mode 100644
index 0000000000..941e37a5bd
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/editing-a-poll/default.recipe.tsx
@@ -0,0 +1,21 @@
+import { MessageList } from 'stream-chat-react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { WithEditPoll } from './EditPollAction';
+import { OpenEditPollFromUrl } from './OpenEditPollFromUrl';
+import { ShowPollLocally } from './ShowPollLocally';
+
+// The screenshot helpers need the channel, so they render inside `Channel`, next to the list.
+const MessageListWithLocalPoll = () => (
+  <>
+    <ShowPollLocally />
+    <OpenEditPollFromUrl />
+    <MessageList />
+  </>
+);
+
+const recipe: RecipeConfig = {
+  MessageList: MessageListWithLocalPoll,
+  Wrapper: WithEditPoll,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-actions/editing-a-poll/pollForm.ts b/examples/cookbook/src/recipes/message-actions/editing-a-poll/pollForm.ts
new file mode 100644
index 0000000000..defa92bd34
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/editing-a-poll/pollForm.ts
@@ -0,0 +1,183 @@
+import type { PartialPollUpdate, Poll, PollState } from 'stream-chat';
+
+/** One option row. `id` is the option's id on the server; a row the user added has none yet. */
+export type PollFormOption = { id?: string; key: string; text: string };
+
+/** What the dialog edits, named as in the poll. */
+export type PollForm = {
+  allow_answers: boolean;
+  allow_user_suggested_options: boolean;
+  enforce_unique_vote: boolean;
+  /** Whether a multiple-vote poll limits the votes per user to `max_votes_allowed`. */
+  limitVotes: boolean;
+  /** The vote limit per user, as typed. */
+  max_votes_allowed: string;
+  name: string;
+  options: PollFormOption[];
+  voting_visibility: 'anonymous' | 'public';
+};
+
+export type PollFormErrors = {
+  max_votes_allowed?: string;
+  name?: string;
+  /** Keyed by `PollFormOption.key`. */
+  options: Record<string, string>;
+};
+
+export const pollFormFromState = (state: PollState): PollForm => ({
+  allow_answers: state.allow_answers,
+  allow_user_suggested_options: state.allow_user_suggested_options,
+  enforce_unique_vote: state.enforce_unique_vote,
+  limitVotes: !!state.max_votes_allowed,
+  max_votes_allowed: state.max_votes_allowed ? String(state.max_votes_allowed) : '',
+  name: state.name,
+  options: state.options.map(({ id, text }) => ({ id, key: id, text })),
+  voting_visibility: state.voting_visibility,
+});
+
+export const validatePollForm = (form: PollForm): PollFormErrors => {
+  const errors: PollFormErrors = { options: {} };
+  if (!form.name.trim()) errors.name = 'Question is required';
+
+  const seen = new Set<string>();
+  for (const option of form.options) {
+    const text = option.text.trim();
+    // An empty new row is left out on save; an existing option needs its text.
+    if (!text) {
+      if (option.id) errors.options[option.key] = 'Option is empty';
+      continue;
+    }
+    if (seen.has(text.toLowerCase()))
+      errors.options[option.key] = 'Option already exists';
+    seen.add(text.toLowerCase());
+  }
+
+  const maxVotes = Number(form.max_votes_allowed);
+  if (
+    !form.enforce_unique_vote &&
+    form.limitVotes &&
+    !(Number.isInteger(maxVotes) && maxVotes >= 2 && maxVotes <= 10)
+  ) {
+    errors.max_votes_allowed = 'Type a number from 2 to 10';
+  }
+  return errors;
+};
+
+export const hasErrors = (errors: PollFormErrors) =>
+  !!errors.name || !!errors.max_votes_allowed || Object.keys(errors.options).length > 0;
+
+/** An option as the poll holds it. */
+export type PollOption = PollState['options'][number];
+
+/**
+ * For each option the user removed while it had votes, the vote count the confirmation showed:
+ * the votes the user agreed to delete with it. Keyed by option id.
+ */
+export type ConfirmedVoteLoss = Record<string, number>;
+
+/**
+ * The options the form removes that have more votes now than the user agreed to delete: any vote
+ * for an option removed while it had none, or more than the confirmation showed. It reads
+ * `poll.state` when it's called, so it sees a vote that arrived after the user removed the row.
+ */
+export const removedOptionsWithNewVotes = (
+  poll: Poll,
+  saved: PollState,
+  form: PollForm,
+  confirmedVoteLoss: ConfirmedVoteLoss,
+): PollOption[] => {
+  const { vote_counts_by_option } = poll.state.getLatestValue();
+  return saved.options.filter(({ id }) => {
+    const isRemoved = !form.options.some((row) => row.id === id);
+    const votesNow = vote_counts_by_option[id] ?? 0;
+    return isRemoved && votesNow > (confirmedVoteLoss[id] ?? 0);
+  });
+};
+
+/** The form with the removed `options` back in the place they had when the dialog opened. */
+export const restoreOptions = (
+  form: PollForm,
+  saved: PollState,
+  options: PollOption[],
+): PollForm => {
+  const rows = [...form.options];
+  for (const option of options) {
+    const index = Math.min(saved.options.indexOf(option), rows.length);
+    rows.splice(index, 0, { id: option.id, key: option.id, text: option.text });
+  }
+  return { ...form, options: rows };
+};
+
+/** The vote limit to store: none for a single-vote poll or without a limit. */
+const maxVotesOf = (form: PollForm) =>
+  form.enforce_unique_vote || !form.limitVotes
+    ? undefined
+    : Number(form.max_votes_allowed);
+
+/**
+ * Sends only what the user changed since the dialog opened (`saved`, the poll's state then), so a
+ * change someone else made meanwhile isn't overwritten. The settings go in one
+ * `Poll.partialUpdate()`; each option goes through its own request. None of these requests
+ * updates `poll.state`: each one makes the server send `poll.updated`, and the client applies it.
+ *
+ * Deleting an option deletes its votes, so it sends nothing while the form removes an option that
+ * has more votes now than the user agreed to delete, and returns those options instead. Renaming
+ * an option keeps its votes.
+ */
+export const savePollForm = async (
+  poll: Poll,
+  saved: PollState,
+  form: PollForm,
+  confirmedVoteLoss: ConfirmedVoteLoss,
+): Promise<{ optionsWithNewVotes: PollOption[] }> => {
+  const optionsWithNewVotes = removedOptionsWithNewVotes(
+    poll,
+    saved,
+    form,
+    confirmedVoteLoss,
+  );
+  if (optionsWithNewVotes.length) return { optionsWithNewVotes };
+
+  const before = pollFormFromState(saved);
+  const after = { ...form, name: form.name.trim() };
+
+  const set: NonNullable<PartialPollUpdate['set']> = {};
+  const unset: NonNullable<PartialPollUpdate['unset']> = [];
+  if (after.name !== before.name) set.name = after.name;
+  if (after.allow_answers !== before.allow_answers)
+    set.allow_answers = after.allow_answers;
+  if (after.allow_user_suggested_options !== before.allow_user_suggested_options) {
+    set.allow_user_suggested_options = after.allow_user_suggested_options;
+  }
+  if (after.enforce_unique_vote !== before.enforce_unique_vote) {
+    set.enforce_unique_vote = after.enforce_unique_vote;
+  }
+  if (after.voting_visibility !== before.voting_visibility) {
+    set.voting_visibility = after.voting_visibility;
+  }
+  const maxVotes = maxVotesOf(after);
+  if (maxVotes !== maxVotesOf(before)) {
+    if (maxVotes === undefined) unset.push('max_votes_allowed');
+    else set.max_votes_allowed = maxVotes;
+  }
+  if (Object.keys(set).length || unset.length) await poll.partialUpdate({ set, unset });
+
+  for (const option of saved.options) {
+    if (!form.options.some(({ id }) => id === option.id))
+      await poll.deleteOption(option.id);
+  }
+  for (const { id, text } of form.options) {
+    const trimmed = text.trim();
+    const savedOption = saved.options.find((option) => option.id === id);
+    // `Poll.updateOption()` replaces the whole option, so its custom data goes along.
+    if (savedOption && trimmed !== savedOption.text) {
+      await poll.updateOption({
+        custom: savedOption.custom,
+        id: savedOption.id,
+        text: trimmed,
+      });
+    }
+    if (!id && trimmed) await poll.createOption({ text: trimmed });
+  }
+  return { optionsWithNewVotes: [] };
+};
diff --git a/examples/cookbook/src/recipes/message-actions/editing-a-poll/shots.json b/examples/cookbook/src/recipes/message-actions/editing-a-poll/shots.json
new file mode 100644
index 0000000000..fbf4b916bc
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/editing-a-poll/shots.json
@@ -0,0 +1,48 @@
+[
+  {
+    "file": "editing-a-poll-menu.png",
+    "query": {
+      "channel": "docs-v15-cb-trip",
+      "editPoll": "menu",
+      "poll": "local"
+    },
+    "viewport": {
+      "width": 1280,
+      "height": 900
+    },
+    "waitFor": ".str-chat__message-actions-box--open",
+    "hover": "[data-message-id='docs-v15-ck-trip-edit-poll'] .str-chat__message-bubble",
+    "clip": ".str-chat__message-list",
+    "padding": 0
+  },
+  {
+    "file": "editing-a-poll-dialog.png",
+    "query": {
+      "channel": "docs-v15-cb-trip",
+      "editPoll": "dialog",
+      "poll": "local"
+    },
+    "waitFor": ".cookbook-edit-poll",
+    "clip": ".cookbook-edit-poll"
+  },
+  {
+    "file": "editing-a-poll-remove-voted.png",
+    "query": {
+      "channel": "docs-v15-cb-trip",
+      "editPoll": "remove",
+      "poll": "local"
+    },
+    "waitFor": ".cookbook-edit-poll__remove-confirm",
+    "clip": ".cookbook-edit-poll"
+  },
+  {
+    "file": "editing-a-poll-settings.png",
+    "query": {
+      "channel": "docs-v15-cb-trip",
+      "editPoll": "settings",
+      "poll": "local"
+    },
+    "waitFor": ".cookbook-edit-poll",
+    "clip": ".cookbook-edit-poll"
+  }
+]
diff --git a/examples/cookbook/src/recipes/message-actions/reactions/CustomMessageUi.css b/examples/cookbook/src/recipes/message-actions/reactions/CustomMessageUi.css
new file mode 100644
index 0000000000..a1f3c62ae2
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/reactions/CustomMessageUi.css
@@ -0,0 +1,151 @@
+@layer stream-overrides {
+  .cookbook-message-ui {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-xs);
+    padding-inline: var(--str-chat__spacing-xl);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-message-ui--mine {
+    flex-direction: row-reverse;
+  }
+
+  .cookbook-message-ui__avatar {
+    flex-shrink: 0;
+  }
+
+  .cookbook-message-ui__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-xxs);
+    max-width: 70%;
+  }
+
+  .cookbook-message-ui--mine .cookbook-message-ui__content {
+    align-items: flex-end;
+  }
+
+  .cookbook-message-ui__text {
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 1px solid var(--str-chat__chat-border-incoming);
+    border-radius: var(--str-chat__message-bubble-radius-group-bottom);
+    background: var(--str-chat__chat-bg-incoming);
+    color: var(--str-chat__chat-text-incoming);
+  }
+
+  .cookbook-message-ui--mine .cookbook-message-ui__text {
+    border-color: var(--str-chat__chat-border-outgoing);
+    background: var(--str-chat__chat-bg-outgoing);
+    color: var(--str-chat__chat-text-outgoing);
+  }
+
+  /* Markdown wraps the text in paragraphs; the bubble's padding already spaces it. */
+  .cookbook-message-ui__text p {
+    margin: 0;
+  }
+
+  .cookbook-message-ui__metadata {
+    display: none;
+    align-items: baseline;
+    gap: var(--str-chat__spacing-xxs);
+    padding-inline: var(--str-chat__spacing-xs);
+    color: var(--str-chat__chat-text-timestamp);
+    font: var(--str-chat__font-metadata-default);
+  }
+
+  .cookbook-message-ui__metadata > * + *::before {
+    content: '·';
+    margin-inline-end: var(--str-chat__spacing-xxs);
+  }
+
+  .str-chat__li--bottom .cookbook-message-ui__metadata,
+  .str-chat__li--single .cookbook-message-ui__metadata {
+    display: flex;
+  }
+
+  .str-chat__li--top .cookbook-message-ui__avatar,
+  .str-chat__li--middle .cookbook-message-ui__avatar {
+    visibility: hidden;
+  }
+
+  .cookbook-message-ui:hover,
+  .cookbook-message-ui:focus-within {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-message-ui__actions {
+    position: absolute;
+    top: calc(-1 * var(--str-chat__spacing-md));
+    display: flex;
+    gap: var(--str-chat__spacing-xs);
+    /* Hidden but still in the tab order, so focusing a button shows the actions. */
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .cookbook-message-ui:hover .cookbook-message-ui__actions,
+  .cookbook-message-ui:focus-within .cookbook-message-ui__actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .cookbook-message-ui--mine .cookbook-message-ui__actions {
+    left: var(--str-chat__spacing-xl);
+  }
+
+  .cookbook-message-ui--other .cookbook-message-ui__actions {
+    right: var(--str-chat__spacing-xl);
+  }
+
+  .cookbook-message-ui__actions-group {
+    display: flex;
+    gap: var(--str-chat__spacing-xxs);
+    padding: var(--str-chat__spacing-xxs);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-max);
+    background: var(--str-chat__background-core-elevation-1);
+    box-shadow: var(--str-chat__box-shadow-2);
+  }
+
+  .cookbook-message-ui__actions-group:empty {
+    display: none;
+  }
+
+  .cookbook-message-ui__actions-group button {
+    padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xs);
+    border: 0;
+    border-radius: var(--str-chat__radius-max);
+    background: none;
+    font: var(--str-chat__font-body-default);
+    cursor: pointer;
+  }
+
+  .cookbook-message-ui__actions-group button:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-message-ui__actions-group button[aria-pressed='true'] {
+    background: var(--str-chat__background-utility-selected);
+  }
+
+  .cookbook-message-ui__reply-count {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--str-chat__chat-text-link);
+    font: var(--str-chat__font-metadata-emphasis);
+    cursor: pointer;
+  }
+
+  .cookbook-message-ui__deleted {
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 1px dashed var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__message-bubble-radius-group-bottom);
+    color: var(--str-chat__text-tertiary);
+    font: var(--str-chat__font-body-default);
+    font-style: italic;
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-actions/reactions/CustomMessageUi.tsx b/examples/cookbook/src/recipes/message-actions/reactions/CustomMessageUi.tsx
new file mode 100644
index 0000000000..df495ea80d
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/reactions/CustomMessageUi.tsx
@@ -0,0 +1,228 @@
+import type { LocalMessage, UserResponse } from 'stream-chat';
+import { convertTimestampToDate } from 'stream-chat';
+import {
+  Avatar,
+  isMessageDeleted,
+  MessageReactions,
+  MessageText,
+  useChatContext,
+  useComponentContext,
+  useMessageContext,
+  useThreadContext,
+  useUserRole,
+} from 'stream-chat-react';
+import './CustomMessageUi.css';
+
+const statusIconMap = {
+  delivered: { icon: '✅', label: 'Delivered' },
+  read: { icon: '👁️', label: 'Read' },
+  sending: { icon: '🛫', label: 'Sending' },
+  sent: { icon: '✉️', label: 'Sent' },
+  unknown: { icon: '❓', label: 'Status unknown' },
+};
+
+type MessageStatusParams = {
+  deliveredTo: UserResponse[];
+  message: LocalMessage;
+  ownUserId: string;
+  readBy: UserResponse[];
+  threadList: boolean;
+};
+
+const getMessageStatus = ({
+  deliveredTo,
+  message,
+  ownUserId,
+  readBy,
+  threadList,
+}: MessageStatusParams): keyof typeof statusIconMap => {
+  const [firstReader] = readBy;
+  const [firstDeliveredUser] = deliveredTo;
+
+  const justReadByMe = readBy.length === 1 && firstReader?.id === ownUserId;
+  const read = readBy.length > 0 && !justReadByMe && !threadList;
+
+  const deliveredOnlyToMe =
+    deliveredTo.length === 1 && firstDeliveredUser?.id === ownUserId;
+  const delivered = deliveredTo.length > 0 && !deliveredOnlyToMe && !read && !threadList;
+
+  const sent = message.status === 'received' && !delivered && !read && !threadList;
+  const sending = message.status === 'sending';
+
+  if (read) return 'read';
+  if (delivered) return 'delivered';
+  if (sent) return 'sent';
+  if (sending) return 'sending';
+  return 'unknown';
+};
+
+const CustomMessageUiMetadata = () => {
+  const {
+    deliveredTo = [],
+    handleOpenThread,
+    isMyMessage,
+    message,
+    readBy = [],
+  } = useMessageContext();
+  const { client } = useChatContext();
+  const threadList = !!useThreadContext();
+
+  const createdAt = convertTimestampToDate(message.created_at);
+  const editedAt = convertTimestampToDate(message.message_text_updated_at);
+  const status =
+    statusIconMap[
+      getMessageStatus({
+        deliveredTo,
+        message,
+        ownUserId: client.user?.id ?? '',
+        readBy,
+        threadList,
+      })
+    ];
+
+  return (
+    <div className='cookbook-message-ui__metadata'>
+      <span>
+        {createdAt?.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
+      </span>
+      {isMyMessage() && (
+        <span aria-label={status.label} role='img' title={status.label}>
+          {status.icon}
+        </span>
+      )}
+      {editedAt && <span title={editedAt.toLocaleString()}>Edited</span>}
+      {!threadList && message.reply_count > 0 && (
+        <span>
+          <button
+            className='cookbook-message-ui__reply-count'
+            onClick={handleOpenThread}
+            type='button'
+          >
+            {message.reply_count} {message.reply_count > 1 ? 'replies' : 'reply'}
+          </button>
+        </span>
+      )}
+    </div>
+  );
+};
+
+const CustomMessageUiActions = () => {
+  const {
+    handleDelete,
+    handleFlag,
+    handleOpenThread,
+    handlePin,
+    handleReaction,
+    message,
+  } = useMessageContext();
+  const threadList = !!useThreadContext();
+  const { canDelete, canFlag, canPin, canReact, canReply } = useUserRole(message);
+  const { reactionOptions } = useComponentContext();
+  const quickReactions =
+    reactionOptions && 'quick' in reactionOptions ? reactionOptions.quick : {};
+  // The reactions the user has given show as pressed; pressing one again removes it.
+  const ownReactionTypes = new Set(message.own_reactions?.map(({ type }) => type));
+
+  return (
+    <div className='cookbook-message-ui__actions'>
+      <div className='cookbook-message-ui__actions-group'>
+        {canPin && !threadList && (
+          <button
+            aria-label={message.pinned ? 'Unpin' : 'Pin'}
+            onClick={handlePin}
+            title={message.pinned ? 'Unpin' : 'Pin'}
+            type='button'
+          >
+            <span aria-hidden='true'>{message.pinned ? '📍' : '📌'}</span>
+          </button>
+        )}
+        {canDelete && (
+          <button
+            aria-label='Delete'
+            onClick={() => void handleDelete()}
+            title='Delete'
+            type='button'
+          >
+            <span aria-hidden='true'>🗑️</span>
+          </button>
+        )}
+        {canReply && !threadList && (
+          <button
+            aria-label='Open thread'
+            onClick={handleOpenThread}
+            title='Open thread'
+            type='button'
+          >
+            <span aria-hidden='true'>↩️</span>
+          </button>
+        )}
+        {canFlag && (
+          <button
+            aria-label='Flag message'
+            onClick={handleFlag}
+            title='Flag message'
+            type='button'
+          >
+            <span aria-hidden='true'>🚩</span>
+          </button>
+        )}
+      </div>
+      {canReact && (
+        <div className='cookbook-message-ui__actions-group'>
+          {Object.entries(quickReactions).map(([type, { Component, name }]) => (
+            <button
+              aria-label={`React with ${name}`}
+              aria-pressed={ownReactionTypes.has(type)}
+              key={type}
+              onClick={(event) => void handleReaction(type, event)}
+              title={`React with ${name}`}
+              type='button'
+            >
+              <span aria-hidden='true'>
+                <Component />
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const CustomMessageUi = () => {
+  const { isMyMessage, message } = useMessageContext();
+
+  const messageUiClassNames = ['cookbook-message-ui'];
+  const isDeleted = isMessageDeleted(message);
+
+  if (isMyMessage()) {
+    messageUiClassNames.push('cookbook-message-ui--mine');
+  } else {
+    messageUiClassNames.push('cookbook-message-ui--other');
+  }
+
+  return (
+    <div className={messageUiClassNames.join(' ')}>
+      <Avatar
+        className='cookbook-message-ui__avatar'
+        imageUrl={message.user?.image}
+        size='md'
+        userName={message.user?.name || message.user?.id}
+      />
+      <div className='cookbook-message-ui__content'>
+        {isDeleted ? (
+          <div className='cookbook-message-ui__deleted'>This message was deleted.</div>
+        ) : (
+          <>
+            <div className='cookbook-message-ui__text'>
+              <MessageText />
+            </div>
+            <CustomMessageUiMetadata />
+            <MessageReactions />
+          </>
+        )}
+      </div>
+      {!isDeleted && <CustomMessageUiActions />}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/message-actions/reactions/SimulateMessageStates.tsx b/examples/cookbook/src/recipes/message-actions/reactions/SimulateMessageStates.tsx
new file mode 100644
index 0000000000..99ef1e09e2
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/reactions/SimulateMessageStates.tsx
@@ -0,0 +1,96 @@
+import { useEffect } from 'react';
+import type { LocalMessage, ReactionResponse, StreamChat } from 'stream-chat';
+import { useChatContext } from 'stream-chat-react';
+
+/**
+ * For the screenshots only, not part of the recipe. The demo data has no Markdown, mentions,
+ * edits, deletions or reactions, and the seed can't add them, so this changes this page's copy of
+ * a few Design review messages: Cleo's reply mentions Bob, uses bold text and is edited, two
+ * messages get thumbs-up reactions, and with `deleted` Cara's message about the mockups is shown
+ * as deleted. Nothing is sent to the server.
+ */
+export const SimulateMessageStates = ({ deleted = false }: { deleted?: boolean }) => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    const patches: Record<string, (message: LocalMessage) => Partial<LocalMessage>> = {
+      'docs-v15-ck-design-3': (message) => ({
+        mentioned_users: usersById(client, ['docs-v15-ck-bob']),
+        message_text_updated_at: message.created_at,
+        reaction_groups: { '+1': reactionGroup(message, 2) },
+        latest_reactions: reactions(client, message, [
+          'docs-v15-ck-bob',
+          'docs-v15-ck-cara',
+        ]),
+        text: '@Bob yes, the **rounded** set fits better with the avatars.',
+      }),
+      'docs-v15-ck-design-5': (message) => {
+        const latest = reactions(client, message, [
+          'docs-v15-ck-bob',
+          'docs-v15-ck-dan',
+          'docs-v15-ck-cleo',
+        ]);
+        return {
+          latest_reactions: latest,
+          own_reactions: latest.filter(({ user_id }) => user_id === client.userId),
+          reaction_groups: { '+1': reactionGroup(message, 3) },
+        };
+      },
+      ...(deleted && {
+        'docs-v15-ck-design-6': (message: LocalMessage) => ({
+          deleted_at: message.created_at,
+          text: '',
+          type: 'deleted' as const,
+        }),
+      }),
+    };
+
+    // The store hands out a new object on every server update; patched ones are remembered, so a
+    // patch is applied once per update and never to its own result.
+    const patched = new WeakSet<LocalMessage>();
+    const unsubscribes = Object.entries(patches).map(([id, patch]) =>
+      client.messageStore.subscribe(id, (message) => {
+        if (!message || patched.has(message)) return;
+        // Written after the store finishes notifying, never from inside its notification.
+        queueMicrotask(() => {
+          const current = client.messageStore.get(id);
+          if (!current || patched.has(current)) return;
+          const next = { ...current, ...patch(current) };
+          patched.add(next);
+          client.messageStore.upsert(next);
+        });
+      }),
+    );
+
+    return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
+  }, [client, deleted]);
+
+  return null;
+};
+
+const usersById = (client: StreamChat, ids: string[]) =>
+  ids.flatMap((id) => (client.state.users[id] ? [client.state.users[id]] : []));
+
+const reactions = (
+  client: StreamChat,
+  message: LocalMessage,
+  userIds: string[],
+): ReactionResponse[] =>
+  usersById(client, userIds).map((user) => ({
+    created_at: message.created_at,
+    custom: {},
+    message_id: message.id,
+    score: 1,
+    type: '+1',
+    updated_at: message.created_at,
+    user,
+    user_id: user.id,
+  }));
+
+const reactionGroup = (message: LocalMessage, count: number) => ({
+  count,
+  first_reaction_at: message.created_at,
+  last_reaction_at: message.created_at,
+  latest_reactions_by: [],
+  sum_scores: count,
+});
diff --git a/examples/cookbook/src/recipes/message-actions/reactions/WithCustomMessageUi.tsx b/examples/cookbook/src/recipes/message-actions/reactions/WithCustomMessageUi.tsx
new file mode 100644
index 0000000000..955e53ce35
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/reactions/WithCustomMessageUi.tsx
@@ -0,0 +1,26 @@
+import type { PropsWithChildren } from 'react';
+import type { ReactionOptions } from 'stream-chat-react';
+import { emojiToUnicode, WithComponents } from 'stream-chat-react';
+import { CustomMessageUi } from './CustomMessageUi';
+
+const reactionOptions: ReactionOptions = {
+  quick: {
+    '+1': {
+      Component: () => <>👍</>,
+      name: 'Thumbs up',
+      unicode: emojiToUnicode('👍'),
+    },
+    '-1': {
+      Component: () => <>👎</>,
+      name: 'Thumbs down',
+      unicode: emojiToUnicode('👎'),
+    },
+  },
+};
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { MessageUI: CustomMessageUi, reactionOptions };
+
+export const WithCustomMessageUi = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/message-actions/reactions/default.recipe.tsx b/examples/cookbook/src/recipes/message-actions/reactions/default.recipe.tsx
new file mode 100644
index 0000000000..1c6ee620ed
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/reactions/default.recipe.tsx
@@ -0,0 +1,11 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { SimulateMessageStates } from './SimulateMessageStates';
+import { WithCustomMessageUi } from './WithCustomMessageUi';
+
+// The complete example: the custom message with the action bar, quick reactions and reactions.
+const recipe: RecipeConfig = {
+  chatViewChildren: <SimulateMessageStates deleted />,
+  Wrapper: WithCustomMessageUi,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-actions/reactions/shots.json b/examples/cookbook/src/recipes/message-actions/reactions/shots.json
new file mode 100644
index 0000000000..d3be63796c
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-actions/reactions/shots.json
@@ -0,0 +1,14 @@
+[
+  {
+    "file": "custom-message-reactions.png",
+    "variant": "default",
+    "query": {
+      "channel": "docs-v15-cb-design"
+    },
+    "waitFor": ".str-chat__li[data-message-id=\"docs-v15-ck-design-3\"] .str-chat__message-reactions",
+    "clip": ".str-chat__message-list .str-chat__ul",
+    "padding": 0,
+    "settleMs": 1500,
+    "hover": ".str-chat__li[data-message-id=\"docs-v15-ck-design-5\"] .cookbook-message-ui__text"
+  }
+]
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/CustomMessageUi.css b/examples/cookbook/src/recipes/message-list/custom-message/CustomMessageUi.css
new file mode 100644
index 0000000000..04d53a5055
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/CustomMessageUi.css
@@ -0,0 +1,81 @@
+@layer stream-overrides {
+  .cookbook-message-ui {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-xs);
+    padding-inline: var(--str-chat__spacing-xl);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-message-ui--mine {
+    flex-direction: row-reverse;
+  }
+
+  .cookbook-message-ui__avatar {
+    flex-shrink: 0;
+  }
+
+  .cookbook-message-ui__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-xxs);
+    max-width: 70%;
+  }
+
+  .cookbook-message-ui--mine .cookbook-message-ui__content {
+    align-items: flex-end;
+  }
+
+  .cookbook-message-ui__text {
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 1px solid var(--str-chat__chat-border-incoming);
+    border-radius: var(--str-chat__message-bubble-radius-group-bottom);
+    background: var(--str-chat__chat-bg-incoming);
+    color: var(--str-chat__chat-text-incoming);
+  }
+
+  .cookbook-message-ui--mine .cookbook-message-ui__text {
+    border-color: var(--str-chat__chat-border-outgoing);
+    background: var(--str-chat__chat-bg-outgoing);
+    color: var(--str-chat__chat-text-outgoing);
+  }
+
+  /* Markdown wraps the text in paragraphs; the bubble's padding already spaces it. */
+  .cookbook-message-ui__text p {
+    margin: 0;
+  }
+
+  .cookbook-message-ui__metadata {
+    display: none;
+    align-items: baseline;
+    gap: var(--str-chat__spacing-xxs);
+    padding-inline: var(--str-chat__spacing-xs);
+    color: var(--str-chat__chat-text-timestamp);
+    font: var(--str-chat__font-metadata-default);
+  }
+
+  .cookbook-message-ui__metadata > * + *::before {
+    content: '·';
+    margin-inline-end: var(--str-chat__spacing-xxs);
+  }
+
+  .str-chat__li--bottom .cookbook-message-ui__metadata,
+  .str-chat__li--single .cookbook-message-ui__metadata {
+    display: flex;
+  }
+
+  .str-chat__li--top .cookbook-message-ui__avatar,
+  .str-chat__li--middle .cookbook-message-ui__avatar {
+    visibility: hidden;
+  }
+
+  .cookbook-message-ui__deleted {
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 1px dashed var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__message-bubble-radius-group-bottom);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-body-default);
+    font-style: italic;
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/CustomMessageUi.tsx b/examples/cookbook/src/recipes/message-list/custom-message/CustomMessageUi.tsx
new file mode 100644
index 0000000000..471124101d
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/CustomMessageUi.tsx
@@ -0,0 +1,123 @@
+import type { LocalMessage, UserResponse } from 'stream-chat';
+import { convertTimestampToDate } from 'stream-chat';
+import {
+  Avatar,
+  isMessageDeleted,
+  MessageText,
+  useChatContext,
+  useMessageContext,
+  useThreadContext,
+} from 'stream-chat-react';
+import './CustomMessageUi.css';
+
+const statusIconMap = {
+  delivered: { icon: '✅', label: 'Delivered' },
+  read: { icon: '👁️', label: 'Read' },
+  sending: { icon: '🛫', label: 'Sending' },
+  sent: { icon: '✉️', label: 'Sent' },
+  unknown: { icon: '❓', label: 'Status unknown' },
+};
+
+type MessageStatusParams = {
+  deliveredTo: UserResponse[];
+  message: LocalMessage;
+  ownUserId: string;
+  readBy: UserResponse[];
+  threadList: boolean;
+};
+
+const getMessageStatus = ({
+  deliveredTo,
+  message,
+  ownUserId,
+  readBy,
+  threadList,
+}: MessageStatusParams): keyof typeof statusIconMap => {
+  const [firstReader] = readBy;
+  const [firstDeliveredUser] = deliveredTo;
+
+  const justReadByMe = readBy.length === 1 && firstReader?.id === ownUserId;
+  const read = readBy.length > 0 && !justReadByMe && !threadList;
+
+  const deliveredOnlyToMe =
+    deliveredTo.length === 1 && firstDeliveredUser?.id === ownUserId;
+  const delivered = deliveredTo.length > 0 && !deliveredOnlyToMe && !read && !threadList;
+
+  const sent = message.status === 'received' && !delivered && !read && !threadList;
+  const sending = message.status === 'sending';
+
+  if (read) return 'read';
+  if (delivered) return 'delivered';
+  if (sent) return 'sent';
+  if (sending) return 'sending';
+  return 'unknown';
+};
+
+const CustomMessageUiMetadata = () => {
+  const { deliveredTo = [], isMyMessage, message, readBy = [] } = useMessageContext();
+  const { client } = useChatContext();
+  const threadList = !!useThreadContext();
+
+  const createdAt = convertTimestampToDate(message.created_at);
+  const editedAt = convertTimestampToDate(message.message_text_updated_at);
+  const status =
+    statusIconMap[
+      getMessageStatus({
+        deliveredTo,
+        message,
+        ownUserId: client.user?.id ?? '',
+        readBy,
+        threadList,
+      })
+    ];
+
+  return (
+    <div className='cookbook-message-ui__metadata'>
+      <span>
+        {createdAt?.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
+      </span>
+      {isMyMessage() && (
+        <span aria-label={status.label} role='img' title={status.label}>
+          {status.icon}
+        </span>
+      )}
+      {editedAt && <span title={editedAt.toLocaleString()}>Edited</span>}
+    </div>
+  );
+};
+
+export const CustomMessageUi = () => {
+  const { isMyMessage, message } = useMessageContext();
+
+  const messageUiClassNames = ['cookbook-message-ui'];
+  const isDeleted = isMessageDeleted(message);
+
+  if (isMyMessage()) {
+    messageUiClassNames.push('cookbook-message-ui--mine');
+  } else {
+    messageUiClassNames.push('cookbook-message-ui--other');
+  }
+
+  return (
+    <div className={messageUiClassNames.join(' ')}>
+      <Avatar
+        className='cookbook-message-ui__avatar'
+        imageUrl={message.user?.image}
+        size='md'
+        userName={message.user?.name || message.user?.id}
+      />
+      <div className='cookbook-message-ui__content'>
+        {isDeleted ? (
+          <div className='cookbook-message-ui__deleted'>This message was deleted.</div>
+        ) : (
+          <>
+            <div className='cookbook-message-ui__text'>
+              <MessageText />
+            </div>
+            <CustomMessageUiMetadata />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/SimulateMessageStates.tsx b/examples/cookbook/src/recipes/message-list/custom-message/SimulateMessageStates.tsx
new file mode 100644
index 0000000000..114c846857
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/SimulateMessageStates.tsx
@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import type { LocalMessage, StreamChat } from 'stream-chat';
+import { useChatContext } from 'stream-chat-react';
+
+/**
+ * For the screenshots only, not part of the recipe. The demo data has no Markdown, mentions, edits
+ * or deletions, and the seed can't add them, so this changes this page's copy of a few Design
+ * review messages: Cleo's reply mentions Bob, uses bold text and is edited, and with `deleted`
+ * Cara's message about the mockups is shown as deleted. Nothing is sent to the server.
+ */
+export const SimulateMessageStates = ({ deleted = false }: { deleted?: boolean }) => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    const patches: Record<string, (message: LocalMessage) => Partial<LocalMessage>> = {
+      'docs-v15-ck-design-3': (message) => ({
+        mentioned_users: usersById(client, ['docs-v15-ck-bob']),
+        message_text_updated_at: message.created_at,
+        text: '@Bob yes, the **rounded** set fits better with the avatars.',
+      }),
+      ...(deleted && {
+        'docs-v15-ck-design-6': (message: LocalMessage) => ({
+          deleted_at: message.created_at,
+          text: '',
+          type: 'deleted' as const,
+        }),
+      }),
+    };
+
+    // The store hands out a new object on every server update; patched ones are remembered, so a
+    // patch is applied once per update and never to its own result.
+    const patched = new WeakSet<LocalMessage>();
+    const unsubscribes = Object.entries(patches).map(([id, patch]) =>
+      client.messageStore.subscribe(id, (message) => {
+        if (!message || patched.has(message)) return;
+        // Written after the store finishes notifying, never from inside its notification.
+        queueMicrotask(() => {
+          const current = client.messageStore.get(id);
+          if (!current || patched.has(current)) return;
+          const next = { ...current, ...patch(current) };
+          patched.add(next);
+          client.messageStore.upsert(next);
+        });
+      }),
+    );
+
+    return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
+  }, [client, deleted]);
+
+  return null;
+};
+
+const usersById = (client: StreamChat, ids: string[]) =>
+  ids.flatMap((id) => (client.state.users[id] ? [client.state.users[id]] : []));
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/WithCustomMessageUi.tsx b/examples/cookbook/src/recipes/message-list/custom-message/WithCustomMessageUi.tsx
new file mode 100644
index 0000000000..52f58af7c4
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/WithCustomMessageUi.tsx
@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from 'react';
+import { WithComponents } from 'stream-chat-react';
+import { CustomMessageUi } from './CustomMessageUi';
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { MessageUI: CustomMessageUi };
+
+export const WithCustomMessageUi = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/avatars.recipe.tsx b/examples/cookbook/src/recipes/message-list/custom-message/avatars.recipe.tsx
new file mode 100644
index 0000000000..cf70f9a2b6
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/avatars.recipe.tsx
@@ -0,0 +1,4 @@
+import { stepRecipe } from './stepRecipe';
+import { CustomMessageUi } from './steps/avatars/CustomMessageUi';
+
+export default stepRecipe(CustomMessageUi);
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/default.recipe.tsx b/examples/cookbook/src/recipes/message-list/custom-message/default.recipe.tsx
new file mode 100644
index 0000000000..daf17b1039
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/default.recipe.tsx
@@ -0,0 +1,11 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { SimulateMessageStates } from './SimulateMessageStates';
+import { WithCustomMessageUi } from './WithCustomMessageUi';
+
+// The complete component: formatted text, metadata, grouping and the deleted placeholder.
+const recipe: RecipeConfig = {
+  chatViewChildren: <SimulateMessageStates deleted />,
+  Wrapper: WithCustomMessageUi,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/grouped-metadata.recipe.tsx b/examples/cookbook/src/recipes/message-list/custom-message/grouped-metadata.recipe.tsx
new file mode 100644
index 0000000000..5ddf090c24
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/grouped-metadata.recipe.tsx
@@ -0,0 +1,7 @@
+import { stepRecipe } from './stepRecipe';
+// The step changes only the CSS, so it reuses the metadata step's component. That component loads
+// the metadata step's CSS; this step's CSS, a copy with the grouping rules added, loads after it.
+import { CustomMessageUi } from './steps/metadata/CustomMessageUi';
+import './steps/grouped-metadata/CustomMessageUi.css';
+
+export default stepRecipe(CustomMessageUi);
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/message-text.recipe.tsx b/examples/cookbook/src/recipes/message-list/custom-message/message-text.recipe.tsx
new file mode 100644
index 0000000000..afc0cfe45f
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/message-text.recipe.tsx
@@ -0,0 +1,4 @@
+import { stepRecipe } from './stepRecipe';
+import { CustomMessageUi } from './steps/message-text/CustomMessageUi';
+
+export default stepRecipe(CustomMessageUi);
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/metadata.recipe.tsx b/examples/cookbook/src/recipes/message-list/custom-message/metadata.recipe.tsx
new file mode 100644
index 0000000000..a6e52310f6
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/metadata.recipe.tsx
@@ -0,0 +1,4 @@
+import { stepRecipe } from './stepRecipe';
+import { CustomMessageUi } from './steps/metadata/CustomMessageUi';
+
+export default stepRecipe(CustomMessageUi);
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/plain-text.recipe.tsx b/examples/cookbook/src/recipes/message-list/custom-message/plain-text.recipe.tsx
new file mode 100644
index 0000000000..88824b9d9b
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/plain-text.recipe.tsx
@@ -0,0 +1,4 @@
+import { stepRecipe } from './stepRecipe';
+import { CustomMessageUi } from './steps/plain-text/CustomMessageUi';
+
+export default stepRecipe(CustomMessageUi);
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/sender-names.recipe.tsx b/examples/cookbook/src/recipes/message-list/custom-message/sender-names.recipe.tsx
new file mode 100644
index 0000000000..f2f4bd6526
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/sender-names.recipe.tsx
@@ -0,0 +1,4 @@
+import { stepRecipe } from './stepRecipe';
+import { CustomMessageUi } from './steps/sender-names/CustomMessageUi';
+
+export default stepRecipe(CustomMessageUi);
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/shots.json b/examples/cookbook/src/recipes/message-list/custom-message/shots.json
new file mode 100644
index 0000000000..f2f088d0ab
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/shots.json
@@ -0,0 +1,79 @@
+[
+  {
+    "file": "custom-message-ui-0.png",
+    "variant": "plain-text",
+    "query": {
+      "channel": "docs-v15-cb-design"
+    },
+    "waitFor": ".str-chat__li[data-message-id=\"docs-v15-ck-design-7\"]",
+    "clip": ".str-chat__message-list .str-chat__ul",
+    "padding": 0,
+    "settleMs": 1500
+  },
+  {
+    "file": "custom-message-ui-1.png",
+    "variant": "sender-names",
+    "query": {
+      "channel": "docs-v15-cb-design"
+    },
+    "waitFor": ".str-chat__li[data-message-id=\"docs-v15-ck-design-7\"]",
+    "clip": ".str-chat__message-list .str-chat__ul",
+    "padding": 0,
+    "settleMs": 1500
+  },
+  {
+    "file": "custom-message-ui-2.png",
+    "variant": "avatars",
+    "query": {
+      "channel": "docs-v15-cb-design"
+    },
+    "waitFor": ".str-chat__li[data-message-id=\"docs-v15-ck-design-7\"]",
+    "clip": ".str-chat__message-list .str-chat__ul",
+    "padding": 0,
+    "settleMs": 1500
+  },
+  {
+    "file": "custom-message-ui-3.png",
+    "variant": "message-text",
+    "query": {
+      "channel": "docs-v15-cb-design"
+    },
+    "waitFor": ".str-chat__li[data-message-id=\"docs-v15-ck-design-7\"]",
+    "clip": ".str-chat__message-list .str-chat__ul",
+    "padding": 0,
+    "settleMs": 1500
+  },
+  {
+    "file": "custom-message-ui-4.png",
+    "variant": "metadata",
+    "query": {
+      "channel": "docs-v15-cb-design"
+    },
+    "waitFor": ".str-chat__li[data-message-id=\"docs-v15-ck-design-7\"]",
+    "clip": ".str-chat__message-list .str-chat__ul",
+    "padding": 0,
+    "settleMs": 1500
+  },
+  {
+    "file": "custom-message-ui-5.png",
+    "variant": "grouped-metadata",
+    "query": {
+      "channel": "docs-v15-cb-design"
+    },
+    "waitFor": ".str-chat__li[data-message-id=\"docs-v15-ck-design-7\"]",
+    "clip": ".str-chat__message-list .str-chat__ul",
+    "padding": 0,
+    "settleMs": 1500
+  },
+  {
+    "file": "custom-message-ui-7.png",
+    "variant": "default",
+    "query": {
+      "channel": "docs-v15-cb-design"
+    },
+    "waitFor": ".str-chat__li[data-message-id=\"docs-v15-ck-design-7\"]",
+    "clip": ".str-chat__message-list .str-chat__ul",
+    "padding": 0,
+    "settleMs": 1500
+  }
+]
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/stepRecipe.tsx b/examples/cookbook/src/recipes/message-list/custom-message/stepRecipe.tsx
new file mode 100644
index 0000000000..973435aa42
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/stepRecipe.tsx
@@ -0,0 +1,16 @@
+import type { ComponentType, PropsWithChildren } from 'react';
+import { WithComponents } from 'stream-chat-react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { SimulateMessageStates } from './SimulateMessageStates';
+
+/**
+ * For the step variants: registers one step's `CustomMessageUi` on the `MessageUI` key, as
+ * `WithCustomMessageUi` does, and shows the demo messages' simulated states.
+ */
+export const stepRecipe = (MessageUI: ComponentType): RecipeConfig => {
+  const overrides = { MessageUI };
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <WithComponents overrides={overrides}>{children}</WithComponents>
+  );
+  return { chatViewChildren: <SimulateMessageStates />, Wrapper };
+};
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/steps/avatars/CustomMessageUi.css b/examples/cookbook/src/recipes/message-list/custom-message/steps/avatars/CustomMessageUi.css
new file mode 100644
index 0000000000..48979af36f
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/steps/avatars/CustomMessageUi.css
@@ -0,0 +1,32 @@
+@layer stream-overrides {
+  .cookbook-message-ui {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--str-chat__spacing-xs);
+    padding-inline: var(--str-chat__spacing-xl);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-message-ui--mine {
+    flex-direction: row-reverse;
+  }
+
+  .cookbook-message-ui__avatar {
+    flex-shrink: 0;
+  }
+
+  .cookbook-message-ui__text {
+    max-width: 70%;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 1px solid var(--str-chat__chat-border-incoming);
+    border-radius: var(--str-chat__message-bubble-radius-group-bottom);
+    background: var(--str-chat__chat-bg-incoming);
+    color: var(--str-chat__chat-text-incoming);
+  }
+
+  .cookbook-message-ui--mine .cookbook-message-ui__text {
+    border-color: var(--str-chat__chat-border-outgoing);
+    background: var(--str-chat__chat-bg-outgoing);
+    color: var(--str-chat__chat-text-outgoing);
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/steps/avatars/CustomMessageUi.tsx b/examples/cookbook/src/recipes/message-list/custom-message/steps/avatars/CustomMessageUi.tsx
new file mode 100644
index 0000000000..35e15c9a4b
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/steps/avatars/CustomMessageUi.tsx
@@ -0,0 +1,26 @@
+import { Avatar, useMessageContext } from 'stream-chat-react';
+import './CustomMessageUi.css';
+
+export const CustomMessageUi = () => {
+  const { isMyMessage, message } = useMessageContext();
+
+  const messageUiClassNames = ['cookbook-message-ui'];
+
+  if (isMyMessage()) {
+    messageUiClassNames.push('cookbook-message-ui--mine');
+  } else {
+    messageUiClassNames.push('cookbook-message-ui--other');
+  }
+
+  return (
+    <div className={messageUiClassNames.join(' ')}>
+      <Avatar
+        className='cookbook-message-ui__avatar'
+        imageUrl={message.user?.image}
+        size='md'
+        userName={message.user?.name || message.user?.id}
+      />
+      <span className='cookbook-message-ui__text'>{message.text}</span>
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/steps/grouped-metadata/CustomMessageUi.css b/examples/cookbook/src/recipes/message-list/custom-message/steps/grouped-metadata/CustomMessageUi.css
new file mode 100644
index 0000000000..75dc23bea2
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/steps/grouped-metadata/CustomMessageUi.css
@@ -0,0 +1,72 @@
+@layer stream-overrides {
+  .cookbook-message-ui {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-xs);
+    padding-inline: var(--str-chat__spacing-xl);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-message-ui--mine {
+    flex-direction: row-reverse;
+  }
+
+  .cookbook-message-ui__avatar {
+    flex-shrink: 0;
+  }
+
+  .cookbook-message-ui__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-xxs);
+    max-width: 70%;
+  }
+
+  .cookbook-message-ui--mine .cookbook-message-ui__content {
+    align-items: flex-end;
+  }
+
+  .cookbook-message-ui__text {
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 1px solid var(--str-chat__chat-border-incoming);
+    border-radius: var(--str-chat__message-bubble-radius-group-bottom);
+    background: var(--str-chat__chat-bg-incoming);
+    color: var(--str-chat__chat-text-incoming);
+  }
+
+  .cookbook-message-ui--mine .cookbook-message-ui__text {
+    border-color: var(--str-chat__chat-border-outgoing);
+    background: var(--str-chat__chat-bg-outgoing);
+    color: var(--str-chat__chat-text-outgoing);
+  }
+
+  /* Markdown wraps the text in paragraphs; the bubble's padding already spaces it. */
+  .cookbook-message-ui__text p {
+    margin: 0;
+  }
+
+  .cookbook-message-ui__metadata {
+    display: none;
+    align-items: baseline;
+    gap: var(--str-chat__spacing-xxs);
+    padding-inline: var(--str-chat__spacing-xs);
+    color: var(--str-chat__chat-text-timestamp);
+    font: var(--str-chat__font-metadata-default);
+  }
+
+  .cookbook-message-ui__metadata > * + *::before {
+    content: '·';
+    margin-inline-end: var(--str-chat__spacing-xxs);
+  }
+
+  .str-chat__li--bottom .cookbook-message-ui__metadata,
+  .str-chat__li--single .cookbook-message-ui__metadata {
+    display: flex;
+  }
+
+  .str-chat__li--top .cookbook-message-ui__avatar,
+  .str-chat__li--middle .cookbook-message-ui__avatar {
+    visibility: hidden;
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/steps/message-text/CustomMessageUi.css b/examples/cookbook/src/recipes/message-list/custom-message/steps/message-text/CustomMessageUi.css
new file mode 100644
index 0000000000..3644da78ae
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/steps/message-text/CustomMessageUi.css
@@ -0,0 +1,37 @@
+@layer stream-overrides {
+  .cookbook-message-ui {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--str-chat__spacing-xs);
+    padding-inline: var(--str-chat__spacing-xl);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-message-ui--mine {
+    flex-direction: row-reverse;
+  }
+
+  .cookbook-message-ui__avatar {
+    flex-shrink: 0;
+  }
+
+  .cookbook-message-ui__text {
+    max-width: 70%;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 1px solid var(--str-chat__chat-border-incoming);
+    border-radius: var(--str-chat__message-bubble-radius-group-bottom);
+    background: var(--str-chat__chat-bg-incoming);
+    color: var(--str-chat__chat-text-incoming);
+  }
+
+  .cookbook-message-ui--mine .cookbook-message-ui__text {
+    border-color: var(--str-chat__chat-border-outgoing);
+    background: var(--str-chat__chat-bg-outgoing);
+    color: var(--str-chat__chat-text-outgoing);
+  }
+
+  /* Markdown wraps the text in paragraphs; the bubble's padding already spaces it. */
+  .cookbook-message-ui__text p {
+    margin: 0;
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/steps/message-text/CustomMessageUi.tsx b/examples/cookbook/src/recipes/message-list/custom-message/steps/message-text/CustomMessageUi.tsx
new file mode 100644
index 0000000000..dbbb5aaf80
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/steps/message-text/CustomMessageUi.tsx
@@ -0,0 +1,28 @@
+import { Avatar, MessageText, useMessageContext } from 'stream-chat-react';
+import './CustomMessageUi.css';
+
+export const CustomMessageUi = () => {
+  const { isMyMessage, message } = useMessageContext();
+
+  const messageUiClassNames = ['cookbook-message-ui'];
+
+  if (isMyMessage()) {
+    messageUiClassNames.push('cookbook-message-ui--mine');
+  } else {
+    messageUiClassNames.push('cookbook-message-ui--other');
+  }
+
+  return (
+    <div className={messageUiClassNames.join(' ')}>
+      <Avatar
+        className='cookbook-message-ui__avatar'
+        imageUrl={message.user?.image}
+        size='md'
+        userName={message.user?.name || message.user?.id}
+      />
+      <div className='cookbook-message-ui__text'>
+        <MessageText />
+      </div>
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/steps/metadata/CustomMessageUi.css b/examples/cookbook/src/recipes/message-list/custom-message/steps/metadata/CustomMessageUi.css
new file mode 100644
index 0000000000..32e28993ce
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/steps/metadata/CustomMessageUi.css
@@ -0,0 +1,62 @@
+@layer stream-overrides {
+  .cookbook-message-ui {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-xs);
+    padding-inline: var(--str-chat__spacing-xl);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-message-ui--mine {
+    flex-direction: row-reverse;
+  }
+
+  .cookbook-message-ui__avatar {
+    flex-shrink: 0;
+  }
+
+  .cookbook-message-ui__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-xxs);
+    max-width: 70%;
+  }
+
+  .cookbook-message-ui--mine .cookbook-message-ui__content {
+    align-items: flex-end;
+  }
+
+  .cookbook-message-ui__text {
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 1px solid var(--str-chat__chat-border-incoming);
+    border-radius: var(--str-chat__message-bubble-radius-group-bottom);
+    background: var(--str-chat__chat-bg-incoming);
+    color: var(--str-chat__chat-text-incoming);
+  }
+
+  .cookbook-message-ui--mine .cookbook-message-ui__text {
+    border-color: var(--str-chat__chat-border-outgoing);
+    background: var(--str-chat__chat-bg-outgoing);
+    color: var(--str-chat__chat-text-outgoing);
+  }
+
+  /* Markdown wraps the text in paragraphs; the bubble's padding already spaces it. */
+  .cookbook-message-ui__text p {
+    margin: 0;
+  }
+
+  .cookbook-message-ui__metadata {
+    display: flex;
+    align-items: baseline;
+    gap: var(--str-chat__spacing-xxs);
+    padding-inline: var(--str-chat__spacing-xs);
+    color: var(--str-chat__chat-text-timestamp);
+    font: var(--str-chat__font-metadata-default);
+  }
+
+  .cookbook-message-ui__metadata > * + *::before {
+    content: '·';
+    margin-inline-end: var(--str-chat__spacing-xxs);
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/steps/metadata/CustomMessageUi.tsx b/examples/cookbook/src/recipes/message-list/custom-message/steps/metadata/CustomMessageUi.tsx
new file mode 100644
index 0000000000..39a3f42029
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/steps/metadata/CustomMessageUi.tsx
@@ -0,0 +1,115 @@
+import type { LocalMessage, UserResponse } from 'stream-chat';
+import { convertTimestampToDate } from 'stream-chat';
+import {
+  Avatar,
+  MessageText,
+  useChatContext,
+  useMessageContext,
+  useThreadContext,
+} from 'stream-chat-react';
+import './CustomMessageUi.css';
+
+const statusIconMap = {
+  delivered: { icon: '✅', label: 'Delivered' },
+  read: { icon: '👁️', label: 'Read' },
+  sending: { icon: '🛫', label: 'Sending' },
+  sent: { icon: '✉️', label: 'Sent' },
+  unknown: { icon: '❓', label: 'Status unknown' },
+};
+
+type MessageStatusParams = {
+  deliveredTo: UserResponse[];
+  message: LocalMessage;
+  ownUserId: string;
+  readBy: UserResponse[];
+  threadList: boolean;
+};
+
+const getMessageStatus = ({
+  deliveredTo,
+  message,
+  ownUserId,
+  readBy,
+  threadList,
+}: MessageStatusParams): keyof typeof statusIconMap => {
+  const [firstReader] = readBy;
+  const [firstDeliveredUser] = deliveredTo;
+
+  const justReadByMe = readBy.length === 1 && firstReader?.id === ownUserId;
+  const read = readBy.length > 0 && !justReadByMe && !threadList;
+
+  const deliveredOnlyToMe =
+    deliveredTo.length === 1 && firstDeliveredUser?.id === ownUserId;
+  const delivered = deliveredTo.length > 0 && !deliveredOnlyToMe && !read && !threadList;
+
+  const sent = message.status === 'received' && !delivered && !read && !threadList;
+  const sending = message.status === 'sending';
+
+  if (read) return 'read';
+  if (delivered) return 'delivered';
+  if (sent) return 'sent';
+  if (sending) return 'sending';
+  return 'unknown';
+};
+
+const CustomMessageUiMetadata = () => {
+  const { deliveredTo = [], isMyMessage, message, readBy = [] } = useMessageContext();
+  const { client } = useChatContext();
+  const threadList = !!useThreadContext();
+
+  const createdAt = convertTimestampToDate(message.created_at);
+  const editedAt = convertTimestampToDate(message.message_text_updated_at);
+  const status =
+    statusIconMap[
+      getMessageStatus({
+        deliveredTo,
+        message,
+        ownUserId: client.user?.id ?? '',
+        readBy,
+        threadList,
+      })
+    ];
+
+  return (
+    <div className='cookbook-message-ui__metadata'>
+      <span>
+        {createdAt?.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
+      </span>
+      {isMyMessage() && (
+        <span aria-label={status.label} role='img' title={status.label}>
+          {status.icon}
+        </span>
+      )}
+      {editedAt && <span title={editedAt.toLocaleString()}>Edited</span>}
+    </div>
+  );
+};
+
+export const CustomMessageUi = () => {
+  const { isMyMessage, message } = useMessageContext();
+
+  const messageUiClassNames = ['cookbook-message-ui'];
+
+  if (isMyMessage()) {
+    messageUiClassNames.push('cookbook-message-ui--mine');
+  } else {
+    messageUiClassNames.push('cookbook-message-ui--other');
+  }
+
+  return (
+    <div className={messageUiClassNames.join(' ')}>
+      <Avatar
+        className='cookbook-message-ui__avatar'
+        imageUrl={message.user?.image}
+        size='md'
+        userName={message.user?.name || message.user?.id}
+      />
+      <div className='cookbook-message-ui__content'>
+        <div className='cookbook-message-ui__text'>
+          <MessageText />
+        </div>
+        <CustomMessageUiMetadata />
+      </div>
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/steps/plain-text/CustomMessageUi.tsx b/examples/cookbook/src/recipes/message-list/custom-message/steps/plain-text/CustomMessageUi.tsx
new file mode 100644
index 0000000000..03da71692c
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/steps/plain-text/CustomMessageUi.tsx
@@ -0,0 +1,7 @@
+import { useMessageContext } from 'stream-chat-react';
+
+export const CustomMessageUi = () => {
+  const { message } = useMessageContext();
+
+  return <div>{message.text}</div>;
+};
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/steps/sender-names/CustomMessageUi.css b/examples/cookbook/src/recipes/message-list/custom-message/steps/sender-names/CustomMessageUi.css
new file mode 100644
index 0000000000..44b74f5a89
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/steps/sender-names/CustomMessageUi.css
@@ -0,0 +1,31 @@
+@layer stream-overrides {
+  .cookbook-message-ui {
+    display: flex;
+    gap: var(--str-chat__spacing-xs);
+    padding-block: var(--str-chat__spacing-xs);
+    padding-inline: var(--str-chat__spacing-xl);
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-message-ui__name {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--str-chat__spacing-xs);
+    color: var(--str-chat__chat-text-username);
+    font: var(--str-chat__font-body-emphasis);
+  }
+
+  .cookbook-message-ui--mine .cookbook-message-ui__name::before {
+    content: '<';
+  }
+
+  .cookbook-message-ui--other .cookbook-message-ui__name::after {
+    content: '>';
+  }
+
+  .cookbook-message-ui--mine {
+    flex-direction: row-reverse;
+    text-align: right;
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/custom-message/steps/sender-names/CustomMessageUi.tsx b/examples/cookbook/src/recipes/message-list/custom-message/steps/sender-names/CustomMessageUi.tsx
new file mode 100644
index 0000000000..50e0b16265
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/custom-message/steps/sender-names/CustomMessageUi.tsx
@@ -0,0 +1,23 @@
+import { useMessageContext } from 'stream-chat-react';
+import './CustomMessageUi.css';
+
+export const CustomMessageUi = () => {
+  const { isMyMessage, message } = useMessageContext();
+
+  const messageUiClassNames = ['cookbook-message-ui'];
+
+  if (isMyMessage()) {
+    messageUiClassNames.push('cookbook-message-ui--mine');
+  } else {
+    messageUiClassNames.push('cookbook-message-ui--other');
+  }
+
+  return (
+    <div className={messageUiClassNames.join(' ')}>
+      <strong className='cookbook-message-ui__name'>
+        {message.user?.name || message.user?.id}
+      </strong>
+      <span>{message.text}</span>
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/message-list/giphy-preview/GiphyPreviewActions.css b/examples/cookbook/src/recipes/message-list/giphy-preview/GiphyPreviewActions.css
new file mode 100644
index 0000000000..6226b841fe
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/giphy-preview/GiphyPreviewActions.css
@@ -0,0 +1,52 @@
+@layer stream-overrides {
+  .cookbook-giphy-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-xs);
+    margin-top: var(--str-chat__spacing-xs);
+    padding: var(--str-chat__spacing-sm);
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__background-core-elevation-0);
+  }
+
+  .cookbook-giphy-actions__query {
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-giphy-actions__buttons {
+    display: flex;
+    gap: var(--str-chat__spacing-xs);
+  }
+
+  .cookbook-giphy-actions__button {
+    display: inline-flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    gap: var(--str-chat__spacing-xxs);
+    padding: var(--str-chat__spacing-xs);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-full);
+    background: var(--str-chat__background-core-elevation-0);
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-emphasis);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .cookbook-giphy-actions__button:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-giphy-actions__button--send {
+    border-color: var(--str-chat__accent-primary);
+    background: var(--str-chat__accent-primary);
+    color: var(--str-chat__text-on-accent);
+  }
+
+  .cookbook-giphy-actions__button--send:hover {
+    background: var(--str-chat__accent-primary);
+    opacity: 0.9;
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/giphy-preview/GiphyPreviewActions.tsx b/examples/cookbook/src/recipes/message-list/giphy-preview/GiphyPreviewActions.tsx
new file mode 100644
index 0000000000..f619ada459
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/giphy-preview/GiphyPreviewActions.tsx
@@ -0,0 +1,117 @@
+import { useEffect, useId, useRef } from 'react';
+import type { AttachmentActionsProps } from 'stream-chat-react';
+import {
+  AttachmentActions,
+  useComponentContextIcons,
+  useFocusReturn,
+  useInteractionAnnouncements,
+  useTranslationContext,
+  VisuallyHidden,
+} from 'stream-chat-react';
+import './GiphyPreviewActions.css';
+
+/** A Giphy title that is a media URL is no use to a screen reader, so it counts as no title. */
+const readableTitle = (title?: string) =>
+  title && !/^(https?:|\/\/)/i.test(title) ? title : undefined;
+
+/**
+ * The buttons under a Giphy preview: the search term, then Send, Shuffle and Cancel with icons.
+ * Actions of other attachments keep the default UI.
+ */
+export const GiphyPreviewActions = (props: AttachmentActionsProps) => {
+  const { IconRefresh, IconSend, IconXmark } = useComponentContextIcons();
+  const { t } = useTranslationContext();
+  const { announceInteraction } = useInteractionAnnouncements();
+  const { reserve, restore } = useFocusReturn();
+  const focusedButton = useRef<HTMLButtonElement>(null);
+  const descriptionId = useId();
+  const isGiphy = props.type === 'giphy';
+
+  // The button `Attachment.attachmentActionsDefaultFocus` names (Send by default) takes the focus
+  // when the preview appears; Send and Cancel give it back to where it was. A button that already
+  // has the focus is left alone, so an effect that runs twice doesn't remember the button itself.
+  useEffect(() => {
+    if (!isGiphy) return;
+    const button = focusedButton.current;
+    if (button && document.activeElement !== button) {
+      reserve();
+      button.focus();
+    }
+  }, [isGiphy, reserve]);
+
+  // Shuffle swaps the GIF in place while the focus stays on Shuffle, so the new GIF is announced.
+  // Its URL tells one GIF from the next. The first GIF isn't announced: the focused button's
+  // description already says what the preview is.
+  const imageUrl = isGiphy
+    ? (props.giphy?.original?.url ?? props.thumb_url ?? props.image_url)
+    : undefined;
+  const previousImageUrl = useRef(imageUrl);
+  const title = readableTitle(props.title);
+  useEffect(() => {
+    if (!isGiphy || imageUrl === previousImageUrl.current) return;
+    previousImageUrl.current = imageUrl;
+    announceInteraction('giphy.shuffled', { title });
+  }, [announceInteraction, imageUrl, isGiphy, title]);
+
+  if (!isGiphy) return <AttachmentActions {...props} />;
+
+  const { actionHandler, actions, defaultFocusedActionValue } = props;
+  const icons: Record<string, typeof IconSend> = {
+    cancel: IconXmark,
+    send: IconSend,
+    shuffle: IconRefresh,
+  };
+  // The same translation keys as the default AttachmentActions.
+  const labels: Record<string, string> = {
+    cancel: t('common.cancel.label', 'Cancel'),
+    send: t('common.send.label', 'Send'),
+    shuffle: t('attachment.actions.shuffle.label', 'Shuffle'),
+  };
+
+  return (
+    <div
+      aria-label={t('attachment.actions.giphyActions.ariaLabel', 'Giphy actions')}
+      className='cookbook-giphy-actions'
+      role='group'
+    >
+      {props.title && (
+        <span className='cookbook-giphy-actions__query'>/giphy {props.title}</span>
+      )}
+      <div className='cookbook-giphy-actions__buttons'>
+        {actions.map((action) => {
+          const Icon = action.value ? icons[action.value] : undefined;
+          const isFocused = action.value === defaultFocusedActionValue;
+          return (
+            <button
+              // The focused button carries the preview's description, so it's read with the focus.
+              aria-describedby={isFocused ? descriptionId : undefined}
+              className={`cookbook-giphy-actions__button cookbook-giphy-actions__button--${action.value}`}
+              key={action.value}
+              onClick={(event) => {
+                void actionHandler?.(action.name, action.value, event);
+                if (action.value !== 'send' && action.value !== 'cancel') return;
+                // The focus goes back first and the announcement follows a frame later, so the
+                // screen reader doesn't drop it for the focus change.
+                restore();
+                const interaction =
+                  action.value === 'send' ? 'giphy.sent' : 'giphy.canceled';
+                requestAnimationFrame(() => announceInteraction(interaction));
+              }}
+              ref={isFocused ? focusedButton : undefined}
+              type='button'
+            >
+              {Icon && <Icon />}
+              {(action.value && labels[action.value]) ?? action.text}
+            </button>
+          );
+        })}
+      </div>
+      <VisuallyHidden id={descriptionId}>
+        {t(
+          'attachment.actions.giphyPreviewOnlyVisible.ariaLabel',
+          'Giphy preview, only visible to you. Use the Send, Shuffle, or Cancel actions.',
+        )}
+      </VisuallyHidden>
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/message-list/giphy-preview/ShowGiphyPreviewLocally.tsx b/examples/cookbook/src/recipes/message-list/giphy-preview/ShowGiphyPreviewLocally.tsx
new file mode 100644
index 0000000000..b39a53bd4f
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/giphy-preview/ShowGiphyPreviewLocally.tsx
@@ -0,0 +1,117 @@
+import { useEffect } from 'react';
+import type { MessageResponse } from 'stream-chat';
+import { formatMessage, nowNs } from 'stream-chat';
+import { useChannel, useChatContext } from 'stream-chat-react';
+
+const PREVIEW_IMAGE = 'https://picsum.photos/id/10/480/360';
+// The one still image stands in for every size Giphy would send.
+const PREVIEW_RENDITION = {
+  frames: '1',
+  height: '200',
+  size: '',
+  url: PREVIEW_IMAGE,
+  width: '267',
+};
+
+/**
+ * For the screenshots only, not part of the recipe: `?giphy=preview` adds a Giphy preview to the
+ * channel's paginator, as the server's answer to `/giphy forest` would. The cookbook is read-only,
+ * so `/giphy` can't be sent; the preview exists on this device only, and its buttons send nothing.
+ * The "GIF" is a still photo.
+ */
+export const ShowGiphyPreviewLocally = () => {
+  const { client } = useChatContext();
+  const channel = useChannel();
+
+  useEffect(() => {
+    if (new URLSearchParams(window.location.search).get('giphy') !== 'preview') return;
+    // The members' entries carry the full user, as the server's answer would.
+    const userId = client.user?.id;
+    if (!userId) return;
+
+    const addPreview = () => {
+      const user = channel.state.getLatestValue().members[userId]?.user;
+      if (!user) return;
+      // Wire timestamps are nanosecond numbers; `nowNs()` puts the preview after the latest message.
+      const now = nowNs();
+      const preview: MessageResponse = {
+        attachments: [
+          {
+            actions: [
+              {
+                name: 'image_action',
+                style: 'primary',
+                text: 'Send',
+                type: 'button',
+                value: 'send',
+              },
+              {
+                name: 'image_action',
+                style: 'default',
+                text: 'Shuffle',
+                type: 'button',
+                value: 'shuffle',
+              },
+              {
+                name: 'image_action',
+                style: 'default',
+                text: 'Cancel',
+                type: 'button',
+                value: 'cancel',
+              },
+            ],
+            custom: {},
+            giphy: {
+              fixed_height: PREVIEW_RENDITION,
+              fixed_height_downsampled: PREVIEW_RENDITION,
+              fixed_height_still: PREVIEW_RENDITION,
+              fixed_width: PREVIEW_RENDITION,
+              fixed_width_downsampled: PREVIEW_RENDITION,
+              fixed_width_still: PREVIEW_RENDITION,
+              original: PREVIEW_RENDITION,
+            },
+            thumb_url: PREVIEW_IMAGE,
+            title: 'forest',
+            type: 'giphy',
+          },
+        ],
+        cid: channel.cid,
+        command: 'giphy',
+        created_at: now,
+        custom: {},
+        deleted_reply_count: 0,
+        html: '',
+        id: 'docs-v15-ck-trip-giphy-preview',
+        latest_reactions: [],
+        mentioned_channel: false,
+        mentioned_here: false,
+        mentioned_users: [],
+        own_reactions: [],
+        pinned: false,
+        reaction_counts: {},
+        reaction_scores: {},
+        reply_count: 0,
+        restricted_visibility: [],
+        shadowed: false,
+        silent: false,
+        text: '/giphy forest',
+        type: 'ephemeral',
+        updated_at: now,
+        user,
+      };
+      channel.messagePaginator.ingestItem(formatMessage(preview));
+    };
+
+    // Waits for the first page, so the preview lands after the channel's latest message. The
+    // store calls the handler at once with its current value.
+    let added = false;
+    const unsubscribe = channel.messagePaginator.state.subscribe(({ items }) => {
+      if (added || !items?.length) return;
+      added = true;
+      addPreview();
+    });
+    return unsubscribe;
+  }, [channel, client]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/message-list/giphy-preview/WithGiphyPreview.tsx b/examples/cookbook/src/recipes/message-list/giphy-preview/WithGiphyPreview.tsx
new file mode 100644
index 0000000000..91ffd1331c
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/giphy-preview/WithGiphyPreview.tsx
@@ -0,0 +1,16 @@
+import type { PropsWithChildren } from 'react';
+import type { AttachmentProps } from 'stream-chat-react';
+import { Attachment, WithComponents } from 'stream-chat-react';
+import { GiphyPreviewActions } from './GiphyPreviewActions';
+
+// A Giphy preview's buttons render `AttachmentActions` from this prop.
+const AttachmentWithGiphyPreview = (props: AttachmentProps) => (
+  <Attachment {...props} AttachmentActions={GiphyPreviewActions} />
+);
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { Attachment: AttachmentWithGiphyPreview };
+
+export const WithGiphyPreview = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/message-list/giphy-preview/default.recipe.tsx b/examples/cookbook/src/recipes/message-list/giphy-preview/default.recipe.tsx
new file mode 100644
index 0000000000..ead9d21d95
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/giphy-preview/default.recipe.tsx
@@ -0,0 +1,20 @@
+import { MessageList } from 'stream-chat-react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { ShowGiphyPreviewLocally } from './ShowGiphyPreviewLocally';
+import { WithGiphyPreview } from './WithGiphyPreview';
+
+// The preview helper only serves the screenshots. It needs the channel, so it renders inside
+// `Channel`, next to the list.
+const MessageListWithGiphyPreview = () => (
+  <>
+    <ShowGiphyPreviewLocally />
+    <MessageList />
+  </>
+);
+
+const recipe: RecipeConfig = {
+  MessageList: MessageListWithGiphyPreview,
+  Wrapper: WithGiphyPreview,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-list/giphy-preview/shots.json b/examples/cookbook/src/recipes/message-list/giphy-preview/shots.json
new file mode 100644
index 0000000000..ba3fce047a
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/giphy-preview/shots.json
@@ -0,0 +1,13 @@
+[
+  {
+    "file": "giphy-preview-custom.png",
+    "query": {
+      "channel": "docs-v15-cb-trip",
+      "giphy": "preview"
+    },
+    "waitFor": ".cookbook-giphy-actions",
+    "clip": ".str-chat__li",
+    "hasText": "/giphy forest",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/ImageGrid.css b/examples/cookbook/src/recipes/message-list/image-gallery/ImageGrid.css
new file mode 100644
index 0000000000..0a432201a2
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/ImageGrid.css
@@ -0,0 +1,65 @@
+@layer stream-overrides {
+  .cookbook-image-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--str-chat__spacing-xxs);
+    width: 280px;
+    overflow: hidden;
+    border-radius: var(--str-chat__radius-lg);
+  }
+
+  /* One image fills the attachment's width, as the SDK sizes it. */
+  .cookbook-image-grid[data-count='1'] {
+    grid-template-columns: 1fr;
+    width: 100%;
+  }
+
+  /* With three items, the first one spans the top row. */
+  .cookbook-image-grid[data-count='3'] .cookbook-image-grid__tile:first-child {
+    grid-column: span 2;
+  }
+
+  .cookbook-image-grid__tile {
+    position: relative;
+    aspect-ratio: 4 / 3;
+    padding: 0;
+    border: 0;
+    background: var(--str-chat__background-core-surface-subtle);
+    cursor: zoom-in;
+  }
+
+  .cookbook-image-grid__tile:focus-visible {
+    outline: 2px solid var(--str-chat__border-utility-focused);
+    outline-offset: -2px;
+  }
+
+  .cookbook-image-grid__image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .cookbook-image-grid__play {
+    position: absolute;
+    inset: 50% auto auto 50%;
+    display: grid;
+    place-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--str-chat__radius-full);
+    background: var(--str-chat__background-core-scrim);
+    color: var(--str-chat__text-on-accent);
+    transform: translate(-50%, -50%);
+  }
+
+  .cookbook-image-grid__more {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    background: var(--str-chat__background-core-scrim);
+    color: var(--str-chat__text-on-accent);
+    font: var(--str-chat__font-heading-md);
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/ImageGrid.tsx b/examples/cookbook/src/recipes/message-list/image-gallery/ImageGrid.tsx
new file mode 100644
index 0000000000..d41c350e22
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/ImageGrid.tsx
@@ -0,0 +1,86 @@
+import { useContext, useMemo, useState } from 'react';
+import { convertTimestampToDate } from 'stream-chat';
+import type { ModalGalleryProps } from 'stream-chat-react';
+import {
+  Gallery,
+  GlobalModal,
+  MessageContext,
+  useComponentContextIcons,
+} from 'stream-chat-react';
+import { Lightbox } from './Lightbox';
+import './ImageGrid.css';
+
+const MAX_TILES = 4;
+
+/**
+ * A message's images and videos as a grid of up to four tiles; a click opens the lightbox at that
+ * item. A video tile shows the video's thumbnail with a play badge.
+ */
+export const ImageGrid = ({ items }: ModalGalleryProps) => {
+  const { IconPlayFill } = useComponentContextIcons();
+  // The SDK also renders the `ModalGallery` component outside a message, where there is no
+  // `MessageContext`, so the message may be missing.
+  const { message } = useContext(MessageContext) ?? {};
+  const [openAt, setOpenAt] = useState<number>();
+
+  // The lightbox renders in a modal, outside MessageContext, so each item carries its message,
+  // its sender and when it was shared.
+  const galleryItems = useMemo(
+    () =>
+      items.map((item) => ({
+        ...item,
+        createdAt: item.createdAt ?? convertTimestampToDate(message?.created_at),
+        message: item.message ?? message,
+        user: item.user ?? message?.user ?? undefined,
+      })),
+    [items, message],
+  );
+  const tiles = galleryItems.slice(0, MAX_TILES);
+  const hiddenCount = galleryItems.length - tiles.length;
+  const close = () => setOpenAt(undefined);
+
+  return (
+    <>
+      <div className='cookbook-image-grid' data-count={tiles.length}>
+        {tiles.map((item, index) => (
+          <button
+            aria-label={`Open ${item.videoUrl ? 'video' : 'image'} ${index + 1} of ${galleryItems.length}`}
+            className='cookbook-image-grid__tile'
+            key={item.imageUrl ?? item.videoUrl ?? index}
+            onClick={() => setOpenAt(index)}
+            type='button'
+          >
+            <img
+              alt=''
+              className='cookbook-image-grid__image'
+              src={item.imageUrl ?? item.videoThumbnailUrl}
+            />
+            {item.videoUrl && (
+              <span className='cookbook-image-grid__play'>
+                <IconPlayFill />
+              </span>
+            )}
+            {index === MAX_TILES - 1 && hiddenCount > 0 && (
+              <span className='cookbook-image-grid__more'>+{hiddenCount}</span>
+            )}
+          </button>
+        ))}
+      </div>
+      <GlobalModal
+        aria-label='Image gallery'
+        className='cookbook-lightbox-modal'
+        onClose={close}
+        open={openAt !== undefined}
+      >
+        {openAt !== undefined && (
+          <Gallery
+            GalleryUI={Lightbox}
+            initialIndex={openAt}
+            items={galleryItems}
+            onRequestClose={close}
+          />
+        )}
+      </GlobalModal>
+    </>
+  );
+};
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/Lightbox.css b/examples/cookbook/src/recipes/message-list/image-gallery/Lightbox.css
new file mode 100644
index 0000000000..7d1e4b5f00
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/Lightbox.css
@@ -0,0 +1,70 @@
+@layer stream-overrides {
+  .cookbook-lightbox {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-md);
+    width: min(880px, 90vw);
+    padding: var(--str-chat__spacing-lg);
+    border-radius: var(--str-chat__radius-xl);
+    background: var(--str-chat__background-core-elevation-1);
+    color: var(--str-chat__text-primary);
+  }
+
+  .cookbook-lightbox__header {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+  }
+
+  .cookbook-lightbox__sender {
+    flex: 1;
+    font: var(--str-chat__font-heading-xs);
+  }
+
+  .cookbook-lightbox__position {
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-lightbox__stage {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+  }
+
+  /* A horizontal swipe on the figure is the lightbox's; a vertical one still scrolls the page. */
+  .cookbook-lightbox__figure {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+    min-width: 0;
+    margin: 0;
+    touch-action: pan-y;
+    user-select: none;
+  }
+
+  .cookbook-lightbox__button {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-full);
+    background: var(--str-chat__background-core-elevation-0);
+    color: var(--str-chat__text-primary);
+    cursor: pointer;
+  }
+
+  .cookbook-lightbox__button:hover:not(:disabled) {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-lightbox__button:disabled {
+    color: var(--str-chat__text-disabled);
+    cursor: default;
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/Lightbox.tsx b/examples/cookbook/src/recipes/message-list/image-gallery/Lightbox.tsx
new file mode 100644
index 0000000000..ff2deb825f
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/Lightbox.tsx
@@ -0,0 +1,74 @@
+import { useEffect, useRef } from 'react';
+import { useComponentContextIcons, useGalleryContext } from 'stream-chat-react';
+import { LightboxCaption } from './LightboxCaption';
+import { LightboxMedia } from './LightboxMedia';
+import { ThumbnailStrip } from './ThumbnailStrip';
+import { useLightboxNavigation } from './useLightboxNavigation';
+import './Lightbox.css';
+
+/** The open gallery: who shared it, the current item with Previous and Next, its caption, and a strip of every item. */
+export const Lightbox = () => {
+  const { IconChevronLeft, IconChevronRight, IconXmark } = useComponentContextIcons();
+  const {
+    currentIndex,
+    currentItem,
+    goToNext,
+    goToPrevious,
+    hasNext,
+    hasPrevious,
+    itemCount,
+    onRequestClose,
+  } = useGalleryContext();
+  const swipeHandlers = useLightboxNavigation();
+  const closeButton = useRef<HTMLButtonElement>(null);
+
+  // The lightbox opens with the focus on Close, so Enter or Escape closes it at once.
+  useEffect(() => closeButton.current?.focus(), []);
+
+  return (
+    <div className='cookbook-lightbox'>
+      <div className='cookbook-lightbox__header'>
+        <span className='cookbook-lightbox__sender'>
+          {currentItem.user?.name ?? currentItem.user?.id}
+        </span>
+        <span className='cookbook-lightbox__position'>
+          {currentIndex + 1} / {itemCount}
+        </span>
+        <button
+          aria-label='Close'
+          className='cookbook-lightbox__button'
+          onClick={onRequestClose}
+          ref={closeButton}
+          type='button'
+        >
+          <IconXmark />
+        </button>
+      </div>
+      <div className='cookbook-lightbox__stage'>
+        <button
+          aria-label='Previous'
+          className='cookbook-lightbox__button'
+          disabled={!hasPrevious}
+          onClick={goToPrevious}
+          type='button'
+        >
+          <IconChevronLeft />
+        </button>
+        <figure className='cookbook-lightbox__figure' {...swipeHandlers}>
+          <LightboxMedia item={currentItem} />
+          <LightboxCaption item={currentItem} />
+        </figure>
+        <button
+          aria-label='Next'
+          className='cookbook-lightbox__button'
+          disabled={!hasNext}
+          onClick={goToNext}
+          type='button'
+        >
+          <IconChevronRight />
+        </button>
+      </div>
+      <ThumbnailStrip />
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/LightboxCaption.css b/examples/cookbook/src/recipes/message-list/image-gallery/LightboxCaption.css
new file mode 100644
index 0000000000..e78729486b
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/LightboxCaption.css
@@ -0,0 +1,8 @@
+@layer stream-overrides {
+  .cookbook-lightbox-caption {
+    max-width: 100%;
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-body-default);
+    text-align: center;
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/LightboxCaption.tsx b/examples/cookbook/src/recipes/message-list/image-gallery/LightboxCaption.tsx
new file mode 100644
index 0000000000..7efb6963c2
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/LightboxCaption.tsx
@@ -0,0 +1,13 @@
+import type { GalleryItem } from 'stream-chat-react';
+import './LightboxCaption.css';
+
+/**
+ * The caption under the current item: the attachment's own `title`, or the text of the message it
+ * was shared in when the attachment has none.
+ */
+export const LightboxCaption = ({ item }: { item: GalleryItem }) => {
+  const caption = item.title || item.message?.text;
+  if (!caption) return null;
+
+  return <figcaption className='cookbook-lightbox-caption'>{caption}</figcaption>;
+};
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/LightboxMedia.css b/examples/cookbook/src/recipes/message-list/image-gallery/LightboxMedia.css
new file mode 100644
index 0000000000..1c37047995
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/LightboxMedia.css
@@ -0,0 +1,7 @@
+@layer stream-overrides {
+  .cookbook-lightbox-media {
+    max-width: 100%;
+    max-height: 56vh;
+    border-radius: var(--str-chat__radius-lg);
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/LightboxMedia.tsx b/examples/cookbook/src/recipes/message-list/image-gallery/LightboxMedia.tsx
new file mode 100644
index 0000000000..34bae66c4d
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/LightboxMedia.tsx
@@ -0,0 +1,26 @@
+import type { GalleryItem } from 'stream-chat-react';
+import './LightboxMedia.css';
+
+/**
+ * The lightbox's current item: a video plays in the browser's own player, with its thumbnail as
+ * the poster; an image shows at full size.
+ */
+export const LightboxMedia = ({ item }: { item: GalleryItem }) =>
+  item.videoUrl ? (
+    <video
+      className='cookbook-lightbox-media'
+      controls
+      // A new key per video, so moving to another item stops the one that was playing.
+      key={item.videoUrl}
+      poster={item.videoThumbnailUrl}
+      preload='metadata'
+      src={item.videoUrl}
+    />
+  ) : (
+    <img
+      alt={item.title ?? ''}
+      className='cookbook-lightbox-media'
+      draggable={false}
+      src={item.imageUrl}
+    />
+  );
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/OpenLightboxFromUrl.tsx b/examples/cookbook/src/recipes/message-list/image-gallery/OpenLightboxFromUrl.tsx
new file mode 100644
index 0000000000..96655bc7f7
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/OpenLightboxFromUrl.tsx
@@ -0,0 +1,24 @@
+import { findByText, useClickInTurn } from '../../../base/useClickInTurn';
+
+// `?lightbox=<n>` clicks the n-th tile of the four-photo grid, and `&in=<text>` picks the message
+// with that text instead, so the shot shows the lightbox open at that item. Built once from the
+// URL, as useClickInTurn needs.
+const params = new URLSearchParams(window.location.search);
+const tile = params.get('lightbox');
+const messageText = params.get('in') ?? 'favourites from the trail';
+const steps = tile
+  ? [
+      {
+        find: () =>
+          findByText('.str-chat__li', messageText)?.querySelectorAll<HTMLElement>(
+            '.cookbook-image-grid__tile',
+          )[Number(tile) - 1],
+      },
+    ]
+  : [];
+
+/** For the screenshots only, not part of the recipe: opens the lightbox from the URL. */
+export const OpenLightboxFromUrl = () => {
+  useClickInTurn(steps);
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/ThumbnailStrip.css b/examples/cookbook/src/recipes/message-list/image-gallery/ThumbnailStrip.css
new file mode 100644
index 0000000000..87e1779cc3
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/ThumbnailStrip.css
@@ -0,0 +1,48 @@
+@layer stream-overrides {
+  .cookbook-thumbnail-strip {
+    display: flex;
+    justify-content: safe center;
+    gap: var(--str-chat__spacing-xs);
+    padding: var(--str-chat__spacing-xxs);
+    overflow-x: auto;
+  }
+
+  .cookbook-thumbnail-strip__thumbnail {
+    position: relative;
+    flex-shrink: 0;
+    width: 64px;
+    height: 48px;
+    padding: 0;
+    overflow: hidden;
+    border: 2px solid transparent;
+    border-radius: var(--str-chat__radius-sm);
+    background: none;
+    opacity: 0.6;
+    cursor: pointer;
+  }
+
+  .cookbook-thumbnail-strip__thumbnail[aria-current='true'] {
+    border-color: var(--str-chat__accent-primary);
+    opacity: 1;
+  }
+
+  .cookbook-thumbnail-strip__thumbnail:focus-visible {
+    outline: 2px solid var(--str-chat__border-utility-focused);
+    outline-offset: 2px;
+  }
+
+  .cookbook-thumbnail-strip__thumbnail img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .cookbook-thumbnail-strip__play {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    color: var(--str-chat__text-on-accent);
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/ThumbnailStrip.tsx b/examples/cookbook/src/recipes/message-list/image-gallery/ThumbnailStrip.tsx
new file mode 100644
index 0000000000..8a628b40d9
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/ThumbnailStrip.tsx
@@ -0,0 +1,40 @@
+import { useEffect, useRef } from 'react';
+import { useComponentContextIcons, useGalleryContext } from 'stream-chat-react';
+import './ThumbnailStrip.css';
+
+/** A thumbnail of every item in the gallery; the current one is marked, and a click shows another. */
+export const ThumbnailStrip = () => {
+  const { IconPlayFill } = useComponentContextIcons();
+  const { currentIndex, goToIndex, itemCount, items } = useGalleryContext();
+  const currentThumbnail = useRef<HTMLButtonElement>(null);
+
+  // Keeps the current thumbnail in view when the strip is wider than the lightbox.
+  useEffect(() => {
+    currentThumbnail.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+  }, [currentIndex]);
+
+  if (itemCount < 2) return null;
+
+  return (
+    <div aria-label='All items' className='cookbook-thumbnail-strip' role='group'>
+      {items.map((item, index) => (
+        <button
+          aria-current={index === currentIndex}
+          aria-label={`Show ${item.videoUrl ? 'video' : 'image'} ${index + 1}`}
+          className='cookbook-thumbnail-strip__thumbnail'
+          key={item.imageUrl ?? item.videoUrl ?? index}
+          onClick={() => goToIndex(index)}
+          ref={index === currentIndex ? currentThumbnail : undefined}
+          type='button'
+        >
+          <img alt='' src={item.imageUrl ?? item.videoThumbnailUrl} />
+          {item.videoUrl && (
+            <span className='cookbook-thumbnail-strip__play'>
+              <IconPlayFill />
+            </span>
+          )}
+        </button>
+      ))}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/WithImageGallery.tsx b/examples/cookbook/src/recipes/message-list/image-gallery/WithImageGallery.tsx
new file mode 100644
index 0000000000..cef39c28d6
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/WithImageGallery.tsx
@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from 'react';
+import type { AttachmentProps } from 'stream-chat-react';
+import { Attachment, WithComponents } from 'stream-chat-react';
+import { ImageGrid } from './ImageGrid';
+
+// A message with several images or videos renders `ModalGallery` from this prop.
+const AttachmentWithImageGrid = (props: AttachmentProps) => (
+  <Attachment {...props} ModalGallery={ImageGrid} />
+);
+
+// Declared once, so WithComponents gets the same object on every render. A message with one image
+// renders `Image`, which takes `ModalGallery` from here, not from the prop.
+const overrides = { Attachment: AttachmentWithImageGrid, ModalGallery: ImageGrid };
+
+export const WithImageGallery = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/default.recipe.tsx b/examples/cookbook/src/recipes/message-list/image-gallery/default.recipe.tsx
new file mode 100644
index 0000000000..f048862f86
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/default.recipe.tsx
@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { OpenLightboxFromUrl } from './OpenLightboxFromUrl';
+import { WithImageGallery } from './WithImageGallery';
+
+// A custom image grid and a lightbox with a thumbnail strip, keyboard and swipe navigation,
+// captions and videos. OpenLightboxFromUrl only serves the screenshots.
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithImageGallery>
+    <OpenLightboxFromUrl />
+    {children}
+  </WithImageGallery>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/demo-data.json b/examples/cookbook/src/recipes/message-list/image-gallery/demo-data.json
new file mode 100644
index 0000000000..c624d5e7a2
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/demo-data.json
@@ -0,0 +1,107 @@
+{
+  "channels": [
+    {
+      "id": "docs-v15-cb-trail-photos",
+      "name": "Trail photos",
+      "members": [
+        "docs-v15-ck-cleo",
+        "docs-v15-ck-bob",
+        "docs-v15-ck-cara",
+        "docs-v15-ck-dan"
+      ],
+      "messages": [
+        {
+          "id": "docs-v15-ck-trail-1",
+          "user": "docs-v15-ck-dan",
+          "text": "Back from the weekend hike. Anyone have photos?"
+        },
+        {
+          "id": "docs-v15-ck-trail-2",
+          "user": "docs-v15-ck-cara",
+          "text": "Here are my favourites from the trail.",
+          "attachments": [
+            {
+              "type": "image",
+              "fallback": "valley.jpg",
+              "image_url": "https://picsum.photos/id/1043/1200/900",
+              "original_height": 900,
+              "original_width": 1200,
+              "title": "The valley from the ridge"
+            },
+            {
+              "type": "image",
+              "fallback": "waterfall.jpg",
+              "image_url": "https://picsum.photos/id/1039/1200/900",
+              "original_height": 900,
+              "original_width": 1200,
+              "title": "The waterfall below the bridge"
+            },
+            {
+              "type": "image",
+              "fallback": "red-rocks.jpg",
+              "image_url": "https://picsum.photos/id/1016/1200/900",
+              "original_height": 900,
+              "original_width": 1200,
+              "title": "Red rocks at the turn"
+            },
+            {
+              "type": "image",
+              "fallback": "snowy-peaks.jpg",
+              "image_url": "https://picsum.photos/id/29/1200/900",
+              "original_height": 900,
+              "original_width": 1200,
+              "title": "Snowy peaks at the top"
+            }
+          ]
+        },
+        {
+          "id": "docs-v15-ck-trail-3",
+          "user": "docs-v15-ck-bob",
+          "text": "The waterfall one is great. Let's go back in spring."
+        },
+        {
+          "id": "docs-v15-ck-trail-4",
+          "user": "docs-v15-ck-dan",
+          "text": "Spring sounds good. One more from the forest path.",
+          "attachments": [
+            {
+              "type": "image",
+              "fallback": "forest-stream.jpg",
+              "image_url": "https://picsum.photos/id/28/1200/900",
+              "original_height": 900,
+              "original_width": 1200
+            }
+          ]
+        },
+        {
+          "id": "docs-v15-ck-trail-5",
+          "user": "docs-v15-ck-bob",
+          "text": "Two more from the meadow, and a short clip.",
+          "attachments": [
+            {
+              "type": "image",
+              "fallback": "meadow-flowers.jpg",
+              "image_url": "https://picsum.photos/id/106/1200/900",
+              "original_height": 900,
+              "original_width": 1200
+            },
+            {
+              "type": "image",
+              "fallback": "purple-flowers.jpg",
+              "image_url": "https://picsum.photos/id/152/1200/900",
+              "original_height": 900,
+              "original_width": 1200
+            },
+            {
+              "type": "video",
+              "title": "A flower in the meadow",
+              "asset_url": "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
+              "thumb_url": "https://picsum.photos/id/360/1200/900",
+              "mime_type": "video/mp4"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/shots.json b/examples/cookbook/src/recipes/message-list/image-gallery/shots.json
new file mode 100644
index 0000000000..97042015de
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/shots.json
@@ -0,0 +1,41 @@
+[
+  {
+    "file": "image-gallery-grid.png",
+    "query": {
+      "channel": "docs-v15-cb-trail-photos"
+    },
+    "waitFor": ".cookbook-image-grid",
+    "clip": ".str-chat__li",
+    "hasText": "favourites from the trail",
+    "padding": 0
+  },
+  {
+    "file": "image-gallery-lightbox.png",
+    "query": {
+      "channel": "docs-v15-cb-trail-photos",
+      "lightbox": "2"
+    },
+    "waitFor": ".cookbook-thumbnail-strip",
+    "settleMs": 1500
+  },
+  {
+    "file": "image-gallery-video.png",
+    "query": {
+      "channel": "docs-v15-cb-trail-photos"
+    },
+    "waitFor": ".cookbook-image-grid__play",
+    "clip": ".str-chat__li",
+    "hasText": "a short clip",
+    "padding": 0
+  },
+  {
+    "file": "image-gallery-lightbox-video.png",
+    "query": {
+      "channel": "docs-v15-cb-trail-photos",
+      "lightbox": "3",
+      "in": "a short clip"
+    },
+    "waitFor": ".cookbook-lightbox video",
+    "settleMs": 2500
+  }
+]
diff --git a/examples/cookbook/src/recipes/message-list/image-gallery/useLightboxNavigation.ts b/examples/cookbook/src/recipes/message-list/image-gallery/useLightboxNavigation.ts
new file mode 100644
index 0000000000..7cd5bd8fed
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/image-gallery/useLightboxNavigation.ts
@@ -0,0 +1,60 @@
+import type { PointerEvent } from 'react';
+import { useEffect, useRef } from 'react';
+import { useGalleryContext } from 'stream-chat-react';
+
+/** How far, in pixels, a pointer has to travel sideways to count as a swipe. */
+const SWIPE_DISTANCE = 50;
+
+/** Whether a key press belongs to a video's own controls, where the arrows seek. */
+const isInVideo = (target: EventTarget | null) =>
+  target instanceof Element && !!target.closest('video');
+
+/**
+ * Keyboard and swipe navigation for the lightbox. The arrow keys step to the previous or next
+ * item, Home and End jump to the first and last. Returns pointer handlers for the element a swipe
+ * starts on: a drag of at least {@link SWIPE_DISTANCE} pixels, more sideways than up or down,
+ * steps in the direction the content moves, with a finger, a pen or the mouse.
+ */
+export const useLightboxNavigation = () => {
+  const { goToIndex, goToNext, goToPrevious, itemCount } = useGalleryContext();
+  const swipeStart = useRef<{ x: number; y: number }>(undefined);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (isInVideo(event.target)) return;
+      const step = {
+        ArrowLeft: goToPrevious,
+        ArrowRight: goToNext,
+        End: () => goToIndex(itemCount - 1),
+        Home: () => goToIndex(0),
+      }[event.key];
+      if (!step) return;
+      event.preventDefault();
+      step();
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [goToIndex, goToNext, goToPrevious, itemCount]);
+
+  return {
+    onPointerCancel: () => {
+      swipeStart.current = undefined;
+    },
+    onPointerDown: (event: PointerEvent) => {
+      // A drag on a video's timeline seeks; it isn't a swipe.
+      if (isInVideo(event.target)) return;
+      swipeStart.current = { x: event.clientX, y: event.clientY };
+    },
+    onPointerUp: (event: PointerEvent) => {
+      const start = swipeStart.current;
+      swipeStart.current = undefined;
+      if (!start) return;
+      const deltaX = event.clientX - start.x;
+      const deltaY = event.clientY - start.y;
+      if (Math.abs(deltaX) < SWIPE_DISTANCE || Math.abs(deltaX) <= Math.abs(deltaY))
+        return;
+      if (deltaX < 0) goToNext();
+      else goToPrevious();
+    },
+  };
+};
diff --git a/examples/cookbook/src/recipes/message-list/pin-indicator/PinnedByIndicator.css b/examples/cookbook/src/recipes/message-list/pin-indicator/PinnedByIndicator.css
new file mode 100644
index 0000000000..6bbc885b6f
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/pin-indicator/PinnedByIndicator.css
@@ -0,0 +1,22 @@
+@layer stream-overrides {
+  .cookbook-pinned-by {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-pinned-by__expiry {
+    color: var(--str-chat__text-tertiary);
+  }
+
+  .cookbook-pinned-by__unpin {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--str-chat__text-link);
+    font: var(--str-chat__font-caption-emphasis);
+    cursor: pointer;
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/pin-indicator/PinnedByIndicator.tsx b/examples/cookbook/src/recipes/message-list/pin-indicator/PinnedByIndicator.tsx
new file mode 100644
index 0000000000..1c47e2387d
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/pin-indicator/PinnedByIndicator.tsx
@@ -0,0 +1,51 @@
+import type { PropsWithChildren } from 'react';
+import { convertTimestampToDate } from 'stream-chat';
+import {
+  useChatContext,
+  useMessageContext,
+  useUserRole,
+  WithComponents,
+} from 'stream-chat-react';
+import './PinnedByIndicator.css';
+
+const PinnedByIndicator = () => {
+  const { client } = useChatContext();
+  const { handlePin, message } = useMessageContext();
+  const { canPin } = useUserRole(message);
+
+  if (!message.pinned) return null;
+
+  const pinnedBy = message.pinned_by;
+  const pinnedByName =
+    pinnedBy?.id === client.user?.id
+      ? 'you'
+      : (pinnedBy?.name ?? pinnedBy?.id ?? 'someone');
+  const pinnedAt = convertTimestampToDate(message.pinned_at);
+  const expiresAt = convertTimestampToDate(message.pin_expires);
+
+  return (
+    <div className='str-chat__message-pin-indicator cookbook-pinned-by'>
+      <span>
+        <span aria-hidden>📌</span> Pinned by {pinnedByName}
+        {pinnedAt && ` on ${pinnedAt.toLocaleDateString()}`}
+      </span>
+      {expiresAt && (
+        <span className='cookbook-pinned-by__expiry'>
+          until {expiresAt.toLocaleString()}
+        </span>
+      )}
+      {canPin && (
+        <button className='cookbook-pinned-by__unpin' onClick={handlePin} type='button'>
+          Unpin
+        </button>
+      )}
+    </div>
+  );
+};
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { PinIndicator: PinnedByIndicator };
+
+export const WithPinnedByIndicator = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/message-list/pin-indicator/component.recipe.tsx b/examples/cookbook/src/recipes/message-list/pin-indicator/component.recipe.tsx
new file mode 100644
index 0000000000..e5af6b7253
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/pin-indicator/component.recipe.tsx
@@ -0,0 +1,7 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { WithPinnedByIndicator } from './PinnedByIndicator';
+
+// "Component based solution": who pinned the message, when, and an Unpin button.
+const recipe: RecipeConfig = { Wrapper: WithPinnedByIndicator };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-list/pin-indicator/css.recipe.tsx b/examples/cookbook/src/recipes/message-list/pin-indicator/css.recipe.tsx
new file mode 100644
index 0000000000..90e0ab559d
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/pin-indicator/css.recipe.tsx
@@ -0,0 +1,7 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import './pin-indicator.css';
+
+// "CSS based solution": the default indicator, restyled as a chip.
+const recipe: RecipeConfig = {};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-list/pin-indicator/pin-indicator.css b/examples/cookbook/src/recipes/message-list/pin-indicator/pin-indicator.css
new file mode 100644
index 0000000000..df7d52aa10
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/pin-indicator/pin-indicator.css
@@ -0,0 +1,17 @@
+@layer stream-overrides {
+  .str-chat__message--pinned
+    .str-chat__message-pin-indicator
+    .str-chat__message-pin-indicator__content {
+    width: fit-content;
+    padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xs);
+    border: 1px solid var(--str-chat__accent-primary);
+    border-radius: var(--str-chat__radius-sm);
+    background-color: var(--str-chat__background-core-surface-subtle);
+  }
+
+  .str-chat__message--pinned
+    .str-chat__message-pin-indicator__content
+    .str-chat__message-pin-indicator__icon {
+    color: var(--str-chat__accent-primary);
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/pin-indicator/shots.json b/examples/cookbook/src/recipes/message-list/pin-indicator/shots.json
new file mode 100644
index 0000000000..3f1d7c6c0e
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/pin-indicator/shots.json
@@ -0,0 +1,23 @@
+[
+  {
+    "file": "custom-pin-indicator.png",
+    "recipe": "base",
+    "query": { "channel": "docs-v15-cb-design" },
+    "clip": ".str-chat__li",
+    "hasText": "Review is on Thursday"
+  },
+  {
+    "file": "custom-pin-indicator-css.png",
+    "variant": "css",
+    "query": { "channel": "docs-v15-cb-design" },
+    "clip": ".str-chat__li",
+    "hasText": "Review is on Thursday"
+  },
+  {
+    "file": "custom-pin-indicator-component.png",
+    "variant": "component",
+    "query": { "channel": "docs-v15-cb-design" },
+    "clip": ".str-chat__li",
+    "hasText": "Review is on Thursday"
+  }
+]
diff --git a/examples/cookbook/src/recipes/message-list/pinned-messages-bar/ChannelHeaderWithPinnedBar.tsx b/examples/cookbook/src/recipes/message-list/pinned-messages-bar/ChannelHeaderWithPinnedBar.tsx
new file mode 100644
index 0000000000..b7e5975f8c
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/pinned-messages-bar/ChannelHeaderWithPinnedBar.tsx
@@ -0,0 +1,10 @@
+import { ChannelHeader } from 'stream-chat-react';
+import { PinnedMessagesBar } from './PinnedMessagesBar';
+
+// Rendered where the channel header goes, inside the channel, so the bar sits right under it.
+export const ChannelHeaderWithPinnedBar = () => (
+  <>
+    <ChannelHeader />
+    <PinnedMessagesBar />
+  </>
+);
diff --git a/examples/cookbook/src/recipes/message-list/pinned-messages-bar/ClickPinnedBarFromUrl.tsx b/examples/cookbook/src/recipes/message-list/pinned-messages-bar/ClickPinnedBarFromUrl.tsx
new file mode 100644
index 0000000000..e5203f0baf
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/pinned-messages-bar/ClickPinnedBarFromUrl.tsx
@@ -0,0 +1,17 @@
+import { useClickInTurn } from '../../../base/useClickInTurn';
+import type { ClickStep } from '../../../base/useClickInTurn';
+
+const clicks = Number(new URLSearchParams(window.location.search).get('pinClicks') ?? 0);
+
+const steps: ClickStep[] = Array.from({ length: clicks }, () => ({
+  find: () => document.querySelector<HTMLElement>('.cookbook-pinned-bar'),
+}));
+
+/**
+ * For the screenshot only, not part of the recipe: `?pinClicks=<n>` clicks the pinned-messages bar
+ * that many times once it is on screen, as a user would.
+ */
+export const ClickPinnedBarFromUrl = () => {
+  useClickInTurn(steps);
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/message-list/pinned-messages-bar/PinnedMessagesBar.css b/examples/cookbook/src/recipes/message-list/pinned-messages-bar/PinnedMessagesBar.css
new file mode 100644
index 0000000000..3f95af5272
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/pinned-messages-bar/PinnedMessagesBar.css
@@ -0,0 +1,37 @@
+@layer stream-overrides {
+  .cookbook-pinned-bar {
+    display: block;
+    width: 100%;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md);
+    border: 0;
+    border-bottom: 1px solid var(--str-chat__border-core-default);
+    background: var(--str-chat__background-core-elevation-1);
+    color: var(--str-chat__text-primary);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .cookbook-pinned-bar:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-pinned-bar__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-xxxs);
+    padding-inline-start: var(--str-chat__spacing-sm);
+    border-inline-start: 2px solid var(--str-chat__accent-primary);
+  }
+
+  .cookbook-pinned-bar__title {
+    color: var(--str-chat__accent-primary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-pinned-bar__text {
+    overflow: hidden;
+    font: var(--str-chat__font-caption-default);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/pinned-messages-bar/PinnedMessagesBar.tsx b/examples/cookbook/src/recipes/message-list/pinned-messages-bar/PinnedMessagesBar.tsx
new file mode 100644
index 0000000000..3f61cbc18b
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/pinned-messages-bar/PinnedMessagesBar.tsx
@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import type { LocalMessage, PaginatorState } from 'stream-chat';
+import { useChannel, useStateStore } from 'stream-chat-react';
+import './PinnedMessagesBar.css';
+
+const pinnedItemsSelector = ({ items }: PaginatorState<LocalMessage>) => ({ items });
+
+export const PinnedMessagesBar = () => {
+  const channel = useChannel();
+  const { items = [] } = useStateStore(
+    channel.pinnedMessagesPaginator.state,
+    pinnedItemsSelector,
+  );
+  // The pin the bar shows. Until the first click, and when that pin is gone, the most recent one.
+  const [shownId, setShownId] = useState<string>();
+
+  if (!items.length) return null;
+
+  // `items` holds the oldest pin first, so the most recent pin is the last item.
+  const shownIndex = items.findIndex((message) => message.id === shownId);
+  const index = shownIndex === -1 ? items.length - 1 : shownIndex;
+  const shown = items[index];
+
+  const jumpToShownPin = () => {
+    void channel.messagePaginator.jumpToMessage(shown.id);
+    // Next, the pin before it; after the oldest, the most recent again.
+    setShownId((items[index - 1] ?? items[items.length - 1]).id);
+  };
+
+  return (
+    <button className='cookbook-pinned-bar' onClick={jumpToShownPin} type='button'>
+      <span className='cookbook-pinned-bar__content'>
+        <span className='cookbook-pinned-bar__title'>
+          Pinned message{items.length > 1 && ` #${index + 1}`}
+        </span>
+        <span className='cookbook-pinned-bar__text'>
+          {shown.user?.name ?? shown.user?.id}: {shown.text}
+        </span>
+      </span>
+    </button>
+  );
+};
diff --git a/examples/cookbook/src/recipes/message-list/pinned-messages-bar/default.recipe.tsx b/examples/cookbook/src/recipes/message-list/pinned-messages-bar/default.recipe.tsx
new file mode 100644
index 0000000000..392c15fe00
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/pinned-messages-bar/default.recipe.tsx
@@ -0,0 +1,11 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { ChannelHeaderWithPinnedBar } from './ChannelHeaderWithPinnedBar';
+import { ClickPinnedBarFromUrl } from './ClickPinnedBarFromUrl';
+
+// ClickPinnedBarFromUrl only serves the screenshot: it clicks the bar.
+const recipe: RecipeConfig = {
+  ChannelHeader: ChannelHeaderWithPinnedBar,
+  chatViewChildren: <ClickPinnedBarFromUrl />,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-list/pinned-messages-bar/demo-data.json b/examples/cookbook/src/recipes/message-list/pinned-messages-bar/demo-data.json
new file mode 100644
index 0000000000..12c303cdc0
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/pinned-messages-bar/demo-data.json
@@ -0,0 +1,114 @@
+{
+  "channels": [
+    {
+      "id": "docs-v15-cb-moving-day",
+      "name": "Moving day",
+      "members": [
+        "docs-v15-ck-cleo",
+        "docs-v15-ck-bob",
+        "docs-v15-ck-cara",
+        "docs-v15-ck-dan"
+      ],
+      "messages": [
+        {
+          "id": "docs-v15-ck-moving-1",
+          "user": "docs-v15-ck-dan",
+          "text": "I am moving to the new flat on Saturday. Who can help?"
+        },
+        {
+          "id": "docs-v15-ck-moving-2",
+          "user": "docs-v15-ck-dan",
+          "text": "We meet at the old flat at 9:00. Coffee and pastries are on me.",
+          "pinnedBy": "docs-v15-ck-dan"
+        },
+        {
+          "id": "docs-v15-ck-moving-3",
+          "user": "docs-v15-ck-bob",
+          "text": "I am in! I can bring my car for the small boxes."
+        },
+        {
+          "id": "docs-v15-ck-moving-4",
+          "user": "docs-v15-ck-cara",
+          "text": "Count me in too. I will come after lunch."
+        },
+        {
+          "id": "docs-v15-ck-moving-5",
+          "user": "docs-v15-ck-cleo",
+          "text": "I will help in the morning. Do we have enough boxes?"
+        },
+        {
+          "id": "docs-v15-ck-moving-6",
+          "user": "docs-v15-ck-dan",
+          "text": "I have about twenty, but more would help."
+        },
+        {
+          "id": "docs-v15-ck-moving-7",
+          "user": "docs-v15-ck-cara",
+          "text": "Packing list: tape, markers, blankets for the mirror and a toolbox.",
+          "pinnedBy": "docs-v15-ck-cara"
+        },
+        {
+          "id": "docs-v15-ck-moving-8",
+          "user": "docs-v15-ck-bob",
+          "text": "I have a toolbox, I will bring it."
+        },
+        {
+          "id": "docs-v15-ck-moving-9",
+          "user": "docs-v15-ck-cleo",
+          "text": "I can pick up more boxes on Friday."
+        },
+        {
+          "id": "docs-v15-ck-moving-10",
+          "user": "docs-v15-ck-dan",
+          "text": "The van is booked from 10:00 to 14:00, so we load first and unpack after.",
+          "pinnedBy": "docs-v15-ck-dan"
+        },
+        {
+          "id": "docs-v15-ck-moving-11",
+          "user": "docs-v15-ck-cara",
+          "text": "Should we order pizza for lunch?"
+        },
+        {
+          "id": "docs-v15-ck-moving-12",
+          "user": "docs-v15-ck-cleo",
+          "text": "Yes, I will order it once we are at the new place."
+        },
+        {
+          "id": "docs-v15-ck-moving-13",
+          "user": "docs-v15-ck-bob",
+          "text": "Sounds good. I will bring snacks for the drive."
+        },
+        {
+          "id": "docs-v15-ck-moving-14",
+          "user": "docs-v15-ck-dan",
+          "text": "Who wants to carry the sofa? It is lighter than it looks."
+        },
+        {
+          "id": "docs-v15-ck-moving-15",
+          "user": "docs-v15-ck-bob",
+          "text": "Famous last words."
+        },
+        {
+          "id": "docs-v15-ck-moving-16",
+          "user": "docs-v15-ck-cara",
+          "text": "I will hold the doors open, that is my specialty."
+        },
+        {
+          "id": "docs-v15-ck-moving-17",
+          "user": "docs-v15-ck-cleo",
+          "text": "Then Bob and I take the sofa, Dan takes the plants."
+        },
+        {
+          "id": "docs-v15-ck-moving-18",
+          "user": "docs-v15-ck-dan",
+          "text": "Deal. You are all the best, see you Saturday!"
+        },
+        {
+          "id": "docs-v15-ck-moving-19",
+          "user": "docs-v15-ck-cara",
+          "text": "See you there!"
+        }
+      ]
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/message-list/pinned-messages-bar/shots.json b/examples/cookbook/src/recipes/message-list/pinned-messages-bar/shots.json
new file mode 100644
index 0000000000..355ee3292d
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/pinned-messages-bar/shots.json
@@ -0,0 +1,17 @@
+[
+  {
+    "file": "pinned-messages-bar.png",
+    "query": { "channel": "docs-v15-cb-moving-day" },
+    "waitFor": ".cookbook-pinned-bar",
+    "clip": ".str-chat__channel",
+    "padding": 0
+  },
+  {
+    "file": "pinned-messages-bar-after-click.png",
+    "query": { "channel": "docs-v15-cb-moving-day", "pinClicks": "1" },
+    "waitFor": ".str-chat__message--highlighted",
+    "clip": ".str-chat__channel",
+    "padding": 0,
+    "settleMs": 1000
+  }
+]
diff --git a/examples/cookbook/src/recipes/message-list/read-receipt-avatars/ReadReceiptAvatars.css b/examples/cookbook/src/recipes/message-list/read-receipt-avatars/ReadReceiptAvatars.css
new file mode 100644
index 0000000000..0aa3d5123a
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/read-receipt-avatars/ReadReceiptAvatars.css
@@ -0,0 +1,15 @@
+@layer stream-overrides {
+  .cookbook-read-receipts {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--str-chat__spacing-xxs);
+    margin: 0;
+    padding-block: var(--str-chat__spacing-xxs);
+    padding-inline: var(--str-chat__spacing-md);
+    list-style: none;
+  }
+
+  .cookbook-read-receipts__reader {
+    display: flex;
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/read-receipt-avatars/ReadReceiptAvatars.tsx b/examples/cookbook/src/recipes/message-list/read-receipt-avatars/ReadReceiptAvatars.tsx
new file mode 100644
index 0000000000..0e50aa767c
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/read-receipt-avatars/ReadReceiptAvatars.tsx
@@ -0,0 +1,61 @@
+import type { PropsWithChildren } from 'react';
+import type { MessageReceiptsSnapshot } from 'stream-chat';
+import {
+  Avatar,
+  MessageUI,
+  useChannel,
+  useChatContext,
+  useMessageContext,
+  useStateStore,
+  WithComponents,
+} from 'stream-chat-react';
+import './ReadReceiptAvatars.css';
+
+// The tracker groups members by the message their read position is on.
+const readersSelector = ({ readersByMessageId }: MessageReceiptsSnapshot) => ({
+  readersByMessageId,
+});
+
+/** The avatars of the other members whose last read message is this one. */
+const ReadReceiptAvatars = () => {
+  const channel = useChannel();
+  const { client } = useChatContext();
+  const { message, threadList } = useMessageContext();
+  const { readersByMessageId } = useStateStore(
+    channel.messageReceiptsTracker.snapshotStore,
+    readersSelector,
+  );
+
+  // Read positions belong to the channel's main list, so a thread shows none.
+  if (threadList) return null;
+
+  const readers = (readersByMessageId[message.id] ?? []).filter(
+    (user) => user.id !== client.userId,
+  );
+  if (!readers.length) return null;
+
+  return (
+    <ul aria-label='Seen by' className='cookbook-read-receipts'>
+      {readers.map((user) => (
+        <li className='cookbook-read-receipts__reader' key={user.id}>
+          <Avatar imageUrl={user.image} size='xs' userName={user.name ?? user.id} />
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+/** The SDK's message UI, with the reader avatars under it. */
+const MessageWithReadReceipts = () => (
+  <>
+    <MessageUI />
+    <ReadReceiptAvatars />
+  </>
+);
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { MessageUI: MessageWithReadReceipts };
+
+export const WithReadReceiptAvatars = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/message-list/read-receipt-avatars/ReadReceiptsChannel.tsx b/examples/cookbook/src/recipes/message-list/read-receipt-avatars/ReadReceiptsChannel.tsx
new file mode 100644
index 0000000000..7392bb0434
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/read-receipt-avatars/ReadReceiptsChannel.tsx
@@ -0,0 +1,12 @@
+import type { Channel as StreamChannel } from 'stream-chat';
+import { Channel, MessageComposer, MessageList } from 'stream-chat-react';
+import { WithReadReceiptAvatars } from './ReadReceiptAvatars';
+
+export const ReadReceiptsChannel = ({ channel }: { channel: StreamChannel }) => (
+  <WithReadReceiptAvatars>
+    <Channel channel={channel}>
+      <MessageList />
+      <MessageComposer />
+    </Channel>
+  </WithReadReceiptAvatars>
+);
diff --git a/examples/cookbook/src/recipes/message-list/read-receipt-avatars/default.recipe.tsx b/examples/cookbook/src/recipes/message-list/read-receipt-avatars/default.recipe.tsx
new file mode 100644
index 0000000000..23d51826c5
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/read-receipt-avatars/default.recipe.tsx
@@ -0,0 +1,9 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { WithReadReceiptAvatars } from './ReadReceiptAvatars';
+
+// Each member's avatar sits under the last message they read. The base app's channels view
+// renders the channel, so the wrapper goes around it; ReadReceiptsChannel.tsx is the same
+// wrapper around a channel of your own.
+const recipe: RecipeConfig = { Wrapper: WithReadReceiptAvatars };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-list/read-receipt-avatars/demo-data.json b/examples/cookbook/src/recipes/message-list/read-receipt-avatars/demo-data.json
new file mode 100644
index 0000000000..53c90b9d89
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/read-receipt-avatars/demo-data.json
@@ -0,0 +1,45 @@
+{
+  "channels": [
+    {
+      "id": "docs-v15-cb-movie-night",
+      "name": "Movie night",
+      "members": [
+        "docs-v15-ck-cleo",
+        "docs-v15-ck-bob",
+        "docs-v15-ck-cara",
+        "docs-v15-ck-dan"
+      ],
+      "messages": [
+        {
+          "id": "docs-v15-ck-movie-1",
+          "user": "docs-v15-ck-cara",
+          "text": "Movie night at my place on Friday?"
+        },
+        {
+          "id": "docs-v15-ck-movie-2",
+          "user": "docs-v15-ck-dan",
+          "text": "Yes! I can bring popcorn."
+        },
+        {
+          "id": "docs-v15-ck-movie-3",
+          "user": "docs-v15-ck-cleo",
+          "text": "I'm in. Comedy or sci-fi?"
+        },
+        {
+          "id": "docs-v15-ck-movie-4",
+          "user": "docs-v15-ck-bob",
+          "text": "Sci-fi, please."
+        },
+        {
+          "id": "docs-v15-ck-movie-5",
+          "user": "docs-v15-ck-cleo",
+          "text": "Sci-fi it is. Doors open at seven."
+        }
+      ],
+      "readBy": ["docs-v15-ck-bob", "docs-v15-ck-cara"],
+      "readUpTo": {
+        "docs-v15-ck-dan": "docs-v15-ck-movie-3"
+      }
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/message-list/read-receipt-avatars/shots.json b/examples/cookbook/src/recipes/message-list/read-receipt-avatars/shots.json
new file mode 100644
index 0000000000..5ae126bf2c
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/read-receipt-avatars/shots.json
@@ -0,0 +1,9 @@
+[
+  {
+    "file": "read-receipt-avatars.png",
+    "query": { "channel": "docs-v15-cb-movie-night" },
+    "waitFor": ".cookbook-read-receipts",
+    "clip": ".str-chat__channel .str-chat__message-list",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/message-list/system-message/AddLocalSystemMessage.tsx b/examples/cookbook/src/recipes/message-list/system-message/AddLocalSystemMessage.tsx
new file mode 100644
index 0000000000..3c2adfe4af
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/system-message/AddLocalSystemMessage.tsx
@@ -0,0 +1,61 @@
+import { useEffect } from 'react';
+import type { MessageResponse } from 'stream-chat';
+import { formatMessage, msToNs, nsToMs } from 'stream-chat';
+import { useChatContext } from 'stream-chat-react';
+
+/**
+ * For the screenshots only, not part of the recipe: `?system=rename&channel=<id>` adds a system
+ * message to that channel's message list on this device, as if the server had sent one. Demo users
+ * can't send system messages, so nothing is sent; reloading the page drops it.
+ */
+export const AddLocalSystemMessage = () => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const channelId = params.get('channel');
+    if (params.get('system') !== 'rename' || !channelId) return;
+
+    const channel = client.channel('messaging', channelId);
+    // Waits for the channel's first page and its members.
+    const timer = setInterval(() => {
+      const items = channel.messagePaginator.items;
+      const author = channel.state.getLatestValue().members['docs-v15-ck-cara']?.user;
+      if (!items?.length || !author) return;
+      clearInterval(timer);
+      const newest = Math.max(...items.map((item) => item.created_at));
+      // A minute after the newest message, so it lands at the end of the list.
+      const createdAt = msToNs(nsToMs(newest) + 60_000);
+      const message: MessageResponse = {
+        attachments: [],
+        cid: channel.cid,
+        created_at: createdAt,
+        custom: {},
+        deleted_reply_count: 0,
+        html: '',
+        id: 'cookbook-local-system-rename',
+        latest_reactions: [],
+        mentioned_channel: false,
+        mentioned_here: false,
+        mentioned_users: [],
+        own_reactions: [],
+        pinned: false,
+        reaction_counts: {},
+        reaction_scores: {},
+        reply_count: 0,
+        restricted_visibility: [],
+        shadowed: false,
+        silent: false,
+        text: 'Cara renamed the channel to Weekend trip.',
+        type: 'system',
+        updated_at: createdAt,
+        user: author,
+      };
+      channel.messagePaginator.ingestItem(formatMessage(message));
+    }, 200);
+
+    return () => clearInterval(timer);
+  }, [client]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/message-list/system-message/CustomSystemMessage.css b/examples/cookbook/src/recipes/message-list/system-message/CustomSystemMessage.css
new file mode 100644
index 0000000000..482516d269
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/system-message/CustomSystemMessage.css
@@ -0,0 +1,34 @@
+@layer stream-overrides {
+  .cookbook-system-message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--str-chat__spacing-xxs);
+    width: fit-content;
+    max-width: 360px;
+    margin: var(--str-chat__spacing-xs) auto;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md);
+    border: 1px solid var(--str-chat__border-core-subtle);
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__background-core-surface-subtle);
+    color: var(--str-chat__chat-text-system);
+    font: var(--str-chat__font-caption-default);
+    text-align: center;
+  }
+
+  .cookbook-system-message__text {
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-system-message__meta,
+  .cookbook-system-message__actor {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+  }
+
+  .cookbook-system-message__actor {
+    gap: var(--str-chat__spacing-xxs);
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/system-message/CustomSystemMessage.tsx b/examples/cookbook/src/recipes/message-list/system-message/CustomSystemMessage.tsx
new file mode 100644
index 0000000000..1ee21e7923
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/system-message/CustomSystemMessage.tsx
@@ -0,0 +1,37 @@
+import type { PropsWithChildren } from 'react';
+import { convertTimestampToDate } from 'stream-chat';
+import type { EventComponentProps } from 'stream-chat-react';
+import { Avatar, WithComponents } from 'stream-chat-react';
+import './CustomSystemMessage.css';
+
+const CustomSystemMessage = ({ message }: EventComponentProps) => {
+  const { created_at, text, user } = message;
+  const date = convertTimestampToDate(created_at);
+  const userName = user?.name || user?.id;
+
+  return (
+    <div className='cookbook-system-message'>
+      <div className='cookbook-system-message__text'>{text?.trim()}</div>
+      <div className='cookbook-system-message__meta'>
+        {user && (
+          <span className='cookbook-system-message__actor'>
+            <Avatar imageUrl={user.image} size='xs' userName={userName} />
+            {userName}
+          </span>
+        )}
+        {date && (
+          <time dateTime={date.toISOString()}>
+            {date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
+          </time>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { MessageSystem: CustomSystemMessage };
+
+export const WithCustomSystemMessages = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/message-list/system-message/custom.recipe.tsx b/examples/cookbook/src/recipes/message-list/system-message/custom.recipe.tsx
new file mode 100644
index 0000000000..811ff4560b
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/system-message/custom.recipe.tsx
@@ -0,0 +1,11 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { AddLocalSystemMessage } from './AddLocalSystemMessage';
+import { WithCustomSystemMessages } from './CustomSystemMessage';
+
+// "Custom system message component": the event, who triggered it, and when.
+const recipe: RecipeConfig = {
+  chatViewChildren: <AddLocalSystemMessage />,
+  Wrapper: WithCustomSystemMessages,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-list/system-message/default.recipe.tsx b/examples/cookbook/src/recipes/message-list/system-message/default.recipe.tsx
new file mode 100644
index 0000000000..46e7071c80
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/system-message/default.recipe.tsx
@@ -0,0 +1,7 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { AddLocalSystemMessage } from './AddLocalSystemMessage';
+
+// "Default system message component": the SDK's EventComponent, unchanged.
+const recipe: RecipeConfig = { chatViewChildren: <AddLocalSystemMessage /> };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-list/system-message/shots.json b/examples/cookbook/src/recipes/message-list/system-message/shots.json
new file mode 100644
index 0000000000..c4059b4d83
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/system-message/shots.json
@@ -0,0 +1,17 @@
+[
+  {
+    "file": "default-system-message.png",
+    "query": { "channel": "docs-v15-cb-trip", "system": "rename" },
+    "waitFor": ".str-chat__message--system",
+    "clip": ".str-chat__message-list .str-chat__ul",
+    "padding": 0
+  },
+  {
+    "file": "custom-system-message.png",
+    "variant": "custom",
+    "query": { "channel": "docs-v15-cb-trip", "system": "rename" },
+    "waitFor": ".cookbook-system-message",
+    "clip": ".str-chat__message-list .str-chat__ul",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/ScreenshotHelpers.tsx b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/ScreenshotHelpers.tsx
new file mode 100644
index 0000000000..a2eabc75cb
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/ScreenshotHelpers.tsx
@@ -0,0 +1,150 @@
+import { useEffect } from 'react';
+import type { Event, MessageResponse } from 'stream-chat';
+import { msToNs } from 'stream-chat';
+import { useChatContext } from 'stream-chat-react';
+import { useClickInTurn } from '../../../base/useClickInTurn';
+import demoData from './demo-data.json';
+
+// The seed leaves this channel unread from one message on (`unreadFrom` in demo-data.json).
+const UNREAD_CHANNEL_ID = demoData.channels[0].id;
+const params = new URLSearchParams(window.location.search);
+// Set once the list's mark-read on open has reached the read state, so the helpers below act on
+// the channel as the user would find it.
+let readOnOpen = false;
+
+/**
+ * For the screenshots only, not part of the recipe. The list marks a channel read as it opens at
+ * the latest message, which would end the seeded unread state for every later visitor. For this
+ * channel, a `markReadRequest` handler marks it read on this device only, so the list behaves as it
+ * would and the server keeps the channel unread. Every other channel is marked read as usual.
+ */
+const MarkDemoChannelReadLocally = () => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    client.config.set({
+      channel: {
+        requestHandlers: {
+          markReadRequest: async ({ channel, options }) => {
+            if (channel.id !== UNREAD_CHANNEL_ID) return await channel.markRead(options);
+            // Waits as long as a request would. `Channel` takes the unread snapshot in an effect
+            // that runs after the list's first mark-read, so a read applied at once would reach
+            // the snapshot and hide the separator.
+            await new Promise((resolve) => setTimeout(resolve, 300));
+            channel.markReadLocally();
+            readOnOpen = true;
+            return null;
+          },
+        },
+      },
+    });
+    return () => {
+      client.config.set({ channel: { requestHandlers: { markReadRequest: undefined } } });
+    };
+  }, [client]);
+
+  return null;
+};
+
+const findJumpButton = () =>
+  readOnOpen
+    ? document.querySelector<HTMLElement>(
+        '.str-chat__unread-messages-notification button, .cookbook-unread-banner__jump',
+      )
+    : null;
+
+// `?jump=unread` clicks the banner's jump button once it shows, as the user would.
+const jumpSteps = params.get('jump') === 'unread' ? [{ find: findJumpButton }] : [];
+
+const arrivingMessages = [
+  { text: 'Running shoes or trail shoes for the lake path?', user: 'docs-v15-ck-dan' },
+  { text: 'Running shoes are fine, the path is paved.', user: 'docs-v15-ck-cara' },
+];
+
+/**
+ * `&arrive=<n>`: once the list has jumped (the banner is gone and the scroll-to-latest button has
+ * shown for a second), the list scrolls further up and `n` messages from the others arrive in the
+ * channel. They are `message.new` events dispatched on this client only,
+ * as if the server had sent them; nothing is sent, and reloading the page drops them.
+ */
+const ArriveWhileScrolledUp = () => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    const count = Number(params.get('arrive') ?? 0);
+    if (!count) return;
+
+    const channel = client.channel('messaging', UNREAD_CHANNEL_ID);
+    let settledTicks = 0;
+    const timer = setInterval(() => {
+      const { members } = channel.state.getLatestValue();
+      const jumped =
+        !findJumpButton() &&
+        !!document.querySelector('.str-chat__jump-to-latest-message');
+      settledTicks = jumped ? settledTicks + 1 : 0;
+      if (settledTicks < 5) return;
+      clearInterval(timer);
+
+      // Scrolls further up, past the separator, as a user reading older messages would.
+      document.querySelector('.str-chat__message-list-scroll')?.scrollBy({ top: -400 });
+
+      arrivingMessages.slice(0, count).forEach(({ text, user: userId }, index) => {
+        const user = members[userId]?.user;
+        if (!user) return;
+        const createdAt = msToNs(Date.now() + index);
+        const message: MessageResponse = {
+          attachments: [],
+          cid: channel.cid,
+          created_at: createdAt,
+          custom: {},
+          deleted_reply_count: 0,
+          html: '',
+          id: `cookbook-local-arrival-${index + 1}`,
+          latest_reactions: [],
+          mentioned_channel: false,
+          mentioned_here: false,
+          mentioned_users: [],
+          own_reactions: [],
+          pinned: false,
+          reaction_counts: {},
+          reaction_scores: {},
+          reply_count: 0,
+          restricted_visibility: [],
+          shadowed: false,
+          silent: false,
+          text,
+          type: 'regular',
+          updated_at: createdAt,
+          user,
+        };
+        const event = {
+          channel_id: channel.id,
+          channel_type: channel.type,
+          cid: channel.cid,
+          created_at: createdAt,
+          message,
+          type: 'message.new',
+          user,
+        } as Event;
+        client.dispatchEvent(event);
+      });
+    }, 200);
+
+    return () => clearInterval(timer);
+  }, [client]);
+
+  return null;
+};
+
+const JumpToUnreadFromUrl = () => {
+  useClickInTurn(jumpSteps);
+  return null;
+};
+
+export const UnreadScreenshotHelpers = () => (
+  <>
+    <MarkDemoChannelReadLocally />
+    <JumpToUnreadFromUrl />
+    <ArriveWhileScrolledUp />
+  </>
+);
diff --git a/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/UnreadChannel.tsx b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/UnreadChannel.tsx
new file mode 100644
index 0000000000..1d37f96dde
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/UnreadChannel.tsx
@@ -0,0 +1,14 @@
+import type { Channel as StreamChannel } from 'stream-chat';
+import { Channel, MessageComposer, MessageList } from 'stream-chat-react';
+import { WithUnreadControls } from './UnreadControls';
+
+// The separator already says where the new messages start, so the list adds no date separator
+// above them.
+export const UnreadChannel = ({ channel }: { channel: StreamChannel }) => (
+  <WithUnreadControls>
+    <Channel channel={channel}>
+      <MessageList hideNewMessageSeparator />
+      <MessageComposer />
+    </Channel>
+  </WithUnreadControls>
+);
diff --git a/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/UnreadControls.css b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/UnreadControls.css
new file mode 100644
index 0000000000..f3fc6fc6ab
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/UnreadControls.css
@@ -0,0 +1,73 @@
+@layer stream-overrides {
+  .cookbook-unread-separator {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+    width: 100%;
+    padding: 0 var(--str-chat__spacing-md);
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: var(--str-chat__accent-primary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  /* A line on each side of the label. */
+  .cookbook-unread-separator::before,
+  .cookbook-unread-separator::after {
+    flex: 1;
+    border-top: 1px solid var(--str-chat__accent-primary);
+    content: '';
+  }
+
+  .cookbook-unread-separator__mark-read {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--str-chat__text-link);
+    font: var(--str-chat__font-caption-default);
+    cursor: pointer;
+  }
+
+  .cookbook-unread-banner {
+    position: absolute;
+    top: var(--str-chat__spacing-3xl);
+    inset-inline: 0;
+    z-index: 2;
+    display: flex;
+    width: fit-content;
+    margin-inline: auto;
+    overflow: hidden;
+    border-radius: var(--str-chat__radius-max);
+    background: var(--str-chat__accent-primary);
+    box-shadow: var(--str-chat__box-shadow-2);
+    color: var(--str-chat__text-on-accent);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-unread-banner__jump,
+  .cookbook-unread-banner__dismiss {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .cookbook-unread-banner__jump {
+    padding-inline-start: var(--str-chat__spacing-md);
+  }
+
+  .cookbook-unread-banner__dismiss {
+    border-inline-start: 1px solid var(--str-chat__border-core-on-accent);
+  }
+
+  .cookbook-unread-banner__jump:hover,
+  .cookbook-unread-banner__dismiss:hover {
+    background: var(--str-chat__background-core-overlay-light);
+  }
+}
diff --git a/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/UnreadControls.tsx b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/UnreadControls.tsx
new file mode 100644
index 0000000000..d8f761ee26
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/UnreadControls.tsx
@@ -0,0 +1,99 @@
+import type { PropsWithChildren } from 'react';
+import type { UnreadSnapshotState } from 'stream-chat';
+import {
+  IconArrowUp,
+  IconXmark,
+  useChannel,
+  useMessagePaginator,
+  useStateStore,
+  useThreadContext,
+  WithComponents,
+} from 'stream-chat-react';
+import type {
+  UnreadMessagesNotificationProps,
+  UnreadMessagesSeparatorProps,
+} from 'stream-chat-react';
+import './UnreadControls.css';
+
+const newMessagesLabel = (count?: number) =>
+  count ? `${count} new message${count === 1 ? '' : 's'}` : 'New messages';
+
+// Marks the channel, or the open thread, read and clears the unread snapshot the separator and the
+// banner render from, so both go away at once.
+const useMarkRead = () => {
+  const channel = useChannel();
+  const thread = useThreadContext();
+  const messagePaginator = useMessagePaginator();
+
+  return () => {
+    const request = thread ? thread.markRead() : channel.markReadViaReporter();
+    void request.catch((error) => console.error('Marking read failed', error));
+    messagePaginator.clearUnreadSnapshot();
+  };
+};
+
+const UnreadSeparator = ({ unreadCount }: UnreadMessagesSeparatorProps) => {
+  const markRead = useMarkRead();
+
+  // The root keeps the SDK's class: the list watches that element to show the banner while the
+  // separator is out of view.
+  return (
+    <div className='str-chat__unread-messages-separator cookbook-unread-separator'>
+      <span className='cookbook-unread-separator__label'>
+        {newMessagesLabel(unreadCount)}
+      </span>
+      <button
+        className='cookbook-unread-separator__mark-read'
+        onClick={markRead}
+        type='button'
+      >
+        Mark as read
+      </button>
+    </div>
+  );
+};
+
+const unreadCountSelector = ({ unreadCount }: UnreadSnapshotState) => ({ unreadCount });
+
+const JumpToUnreadBanner = ({ queryMessageLimit }: UnreadMessagesNotificationProps) => {
+  const messagePaginator = useMessagePaginator();
+  const { unreadCount } = useStateStore(
+    messagePaginator.unreadStateSnapshot,
+    unreadCountSelector,
+  );
+  const markRead = useMarkRead();
+
+  const jumpToFirstUnread = () =>
+    void messagePaginator.jumpToTheFirstUnreadMessage({ pageSize: queryMessageLimit });
+
+  return (
+    <div className='cookbook-unread-banner'>
+      <button
+        className='cookbook-unread-banner__jump'
+        onClick={jumpToFirstUnread}
+        type='button'
+      >
+        <IconArrowUp />
+        {newMessagesLabel(unreadCount)}
+      </button>
+      <button
+        aria-label='Mark as read'
+        className='cookbook-unread-banner__dismiss'
+        onClick={markRead}
+        type='button'
+      >
+        <IconXmark />
+      </button>
+    </div>
+  );
+};
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = {
+  UnreadMessagesNotification: JumpToUnreadBanner,
+  UnreadMessagesSeparator: UnreadSeparator,
+};
+
+export const WithUnreadControls = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/component.recipe.tsx b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/component.recipe.tsx
new file mode 100644
index 0000000000..6f0d211e5a
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/component.recipe.tsx
@@ -0,0 +1,16 @@
+import { MessageList } from 'stream-chat-react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { UnreadScreenshotHelpers } from './ScreenshotHelpers';
+import { WithUnreadControls } from './UnreadControls';
+
+// "Replace one part": a separator line with a Mark as read link, and an accent banner. The list
+// is the one UnreadChannel.tsx renders, without the date separator above the new messages.
+const UnreadMessageList = () => <MessageList hideNewMessageSeparator />;
+
+const recipe: RecipeConfig = {
+  chatViewChildren: <UnreadScreenshotHelpers />,
+  MessageList: UnreadMessageList,
+  Wrapper: WithUnreadControls,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/css.recipe.tsx b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/css.recipe.tsx
new file mode 100644
index 0000000000..61b2611b2a
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/css.recipe.tsx
@@ -0,0 +1,8 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { UnreadScreenshotHelpers } from './ScreenshotHelpers';
+import './unread-and-scroll-controls.css';
+
+// "Restyle": the default separator, banner and scroll-to-latest button in the accent color.
+const recipe: RecipeConfig = { chatViewChildren: <UnreadScreenshotHelpers /> };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/default.recipe.tsx b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/default.recipe.tsx
new file mode 100644
index 0000000000..c29987aea4
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/default.recipe.tsx
@@ -0,0 +1,7 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { UnreadScreenshotHelpers } from './ScreenshotHelpers';
+
+// The SDK's own separator, banner and scroll-to-latest button, for comparison.
+const recipe: RecipeConfig = { chatViewChildren: <UnreadScreenshotHelpers /> };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/demo-data.json b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/demo-data.json
new file mode 100644
index 0000000000..0d8b96626b
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/demo-data.json
@@ -0,0 +1,127 @@
+{
+  "channels": [
+    {
+      "id": "docs-v15-cb-running",
+      "name": "Running club",
+      "members": [
+        "docs-v15-ck-cleo",
+        "docs-v15-ck-bob",
+        "docs-v15-ck-cara",
+        "docs-v15-ck-dan"
+      ],
+      "messages": [
+        {
+          "id": "docs-v15-ck-running-1",
+          "user": "docs-v15-ck-bob",
+          "text": "Who is in for the Sunday morning run?"
+        },
+        {
+          "id": "docs-v15-ck-running-2",
+          "user": "docs-v15-ck-cleo",
+          "text": "Me! Same loop around the lake as last time?"
+        },
+        {
+          "id": "docs-v15-ck-running-3",
+          "user": "docs-v15-ck-cara",
+          "text": "Yes please, the lake loop is perfect."
+        },
+        {
+          "id": "docs-v15-ck-running-4",
+          "user": "docs-v15-ck-dan",
+          "text": "I can join, but only for the first half."
+        },
+        {
+          "id": "docs-v15-ck-running-5",
+          "user": "docs-v15-ck-bob",
+          "text": "Great. Let's meet at the boathouse at eight."
+        },
+        {
+          "id": "docs-v15-ck-running-6",
+          "user": "docs-v15-ck-cleo",
+          "text": "Sounds good. I will bring a spare water bottle."
+        },
+        {
+          "id": "docs-v15-ck-running-7",
+          "user": "docs-v15-ck-cara",
+          "text": "I will check the weather on Saturday evening."
+        },
+        {
+          "id": "docs-v15-ck-running-8",
+          "user": "docs-v15-ck-cleo",
+          "text": "Thanks! See you all on Sunday."
+        },
+        {
+          "id": "docs-v15-ck-running-9",
+          "user": "docs-v15-ck-cara",
+          "text": "Quick update: rain is likely until nine on Sunday."
+        },
+        {
+          "id": "docs-v15-ck-running-10",
+          "user": "docs-v15-ck-bob",
+          "text": "Should we move the run to nine thirty then?"
+        },
+        {
+          "id": "docs-v15-ck-running-11",
+          "user": "docs-v15-ck-dan",
+          "text": "Nine thirty works better for me anyway."
+        },
+        {
+          "id": "docs-v15-ck-running-12",
+          "user": "docs-v15-ck-cara",
+          "text": "Same here. The path dries quickly after rain."
+        },
+        {
+          "id": "docs-v15-ck-running-13",
+          "user": "docs-v15-ck-bob",
+          "text": "Then nine thirty it is, still at the boathouse."
+        },
+        {
+          "id": "docs-v15-ck-running-14",
+          "user": "docs-v15-ck-dan",
+          "text": "Could we add the hill at the end? I need the practice."
+        },
+        {
+          "id": "docs-v15-ck-running-15",
+          "user": "docs-v15-ck-cara",
+          "text": "Only if we walk down it afterwards."
+        },
+        {
+          "id": "docs-v15-ck-running-16",
+          "user": "docs-v15-ck-bob",
+          "text": "Deal. The hill, then a slow walk down."
+        },
+        {
+          "id": "docs-v15-ck-running-17",
+          "user": "docs-v15-ck-dan",
+          "text": "I found a bakery near the boathouse for afterwards."
+        },
+        {
+          "id": "docs-v15-ck-running-18",
+          "user": "docs-v15-ck-cara",
+          "text": "Perfect, cinnamon rolls are the best recovery food."
+        },
+        {
+          "id": "docs-v15-ck-running-19",
+          "user": "docs-v15-ck-bob",
+          "text": "I will reserve a table for five."
+        },
+        {
+          "id": "docs-v15-ck-running-20",
+          "user": "docs-v15-ck-dan",
+          "text": "Make it six, my neighbor wants to come too."
+        },
+        {
+          "id": "docs-v15-ck-running-21",
+          "user": "docs-v15-ck-cara",
+          "text": "The more the merrier."
+        },
+        {
+          "id": "docs-v15-ck-running-22",
+          "user": "docs-v15-ck-bob",
+          "text": "Table for six is booked."
+        }
+      ],
+      "unreadFrom": "docs-v15-ck-running-9"
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/shots.json b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/shots.json
new file mode 100644
index 0000000000..dfb011a91e
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/shots.json
@@ -0,0 +1,94 @@
+[
+  {
+    "file": "unread-controls-default-banner.png",
+    "variant": "default",
+    "query": {
+      "channel": "docs-v15-cb-running"
+    },
+    "waitFor": ".str-chat__unread-messages-notification",
+    "clip": ".str-chat__message-list-main-panel",
+    "padding": 0
+  },
+  {
+    "file": "unread-controls-default-separator.png",
+    "variant": "default",
+    "query": {
+      "channel": "docs-v15-cb-running",
+      "jump": "unread"
+    },
+    "waitFor": ".str-chat__jump-to-latest-message",
+    "clip": ".str-chat__message-list-main-panel",
+    "padding": 0,
+    "settleMs": 1500
+  },
+  {
+    "file": "unread-controls-default-new-messages.png",
+    "variant": "default",
+    "query": {
+      "channel": "docs-v15-cb-running",
+      "jump": "unread",
+      "arrive": "2"
+    },
+    "waitFor": ".str-chat__jump-to-latest__unread-count",
+    "clip": ".str-chat__message-list-main-panel",
+    "padding": 0,
+    "settleMs": 1500
+  },
+  {
+    "file": "unread-controls-css-banner.png",
+    "variant": "css",
+    "query": {
+      "channel": "docs-v15-cb-running"
+    },
+    "waitFor": ".str-chat__unread-messages-notification",
+    "clip": ".str-chat__message-list-main-panel",
+    "padding": 0
+  },
+  {
+    "file": "unread-controls-css-separator.png",
+    "variant": "css",
+    "query": {
+      "channel": "docs-v15-cb-running",
+      "jump": "unread"
+    },
+    "waitFor": ".str-chat__jump-to-latest-message",
+    "clip": ".str-chat__message-list-main-panel",
+    "padding": 0,
+    "settleMs": 1500
+  },
+  {
+    "file": "unread-controls-css-new-messages.png",
+    "variant": "css",
+    "query": {
+      "channel": "docs-v15-cb-running",
+      "jump": "unread",
+      "arrive": "2"
+    },
+    "waitFor": ".str-chat__jump-to-latest__unread-count",
+    "clip": ".str-chat__message-list-main-panel",
+    "padding": 0,
+    "settleMs": 1500
+  },
+  {
+    "file": "unread-controls-component-banner.png",
+    "variant": "component",
+    "query": {
+      "channel": "docs-v15-cb-running"
+    },
+    "waitFor": ".cookbook-unread-banner",
+    "clip": ".str-chat__message-list-main-panel",
+    "padding": 0
+  },
+  {
+    "file": "unread-controls-component-separator.png",
+    "variant": "component",
+    "query": {
+      "channel": "docs-v15-cb-running",
+      "jump": "unread"
+    },
+    "waitFor": ".str-chat__jump-to-latest-message",
+    "clip": ".str-chat__message-list-main-panel",
+    "padding": 0,
+    "settleMs": 1500
+  }
+]
diff --git a/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/unread-and-scroll-controls.css b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/unread-and-scroll-controls.css
new file mode 100644
index 0000000000..2d128b7b22
--- /dev/null
+++ b/examples/cookbook/src/recipes/message-list/unread-and-scroll-controls/unread-and-scroll-controls.css
@@ -0,0 +1,35 @@
+@layer stream-overrides {
+  /* The separator: an accent-colored chip. */
+  .str-chat__unread-messages-separator-wrapper .str-chat__unread-messages-separator {
+    border-color: var(--str-chat__accent-primary);
+    background: var(--str-chat__background-core-surface-subtle);
+    color: var(--str-chat__accent-primary);
+  }
+
+  /* The banner: filled with the accent color, with white text and icons. */
+  .str-chat__unread-messages-notification {
+    border-color: var(--str-chat__accent-primary);
+    background: var(--str-chat__accent-primary);
+    box-shadow: var(--str-chat__box-shadow-2);
+  }
+
+  .str-chat__unread-messages-notification .str-chat__button {
+    background: none;
+    color: var(--str-chat__text-on-accent);
+  }
+
+  /* The scroll-to-latest button: accent-colored, with the count on an inverse badge. */
+  .str-chat__jump-to-latest-message {
+    background-color: var(--str-chat__accent-primary);
+    box-shadow: var(--str-chat__box-shadow-2);
+  }
+
+  .str-chat__jump-to-latest-message .str-chat__jump-to-latest-message__button {
+    color: var(--str-chat__text-on-accent);
+  }
+
+  .str-chat__jump-to-latest-message .str-chat__jump-to-latest__unread-count {
+    background: var(--str-chat__background-core-inverse);
+    color: var(--str-chat__text-on-inverse);
+  }
+}
diff --git a/examples/cookbook/src/recipes/notifications/custom-snackbars/SimulateSnackbars.tsx b/examples/cookbook/src/recipes/notifications/custom-snackbars/SimulateSnackbars.tsx
new file mode 100644
index 0000000000..a20e3f71cf
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/custom-snackbars/SimulateSnackbars.tsx
@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { useChatContext } from 'stream-chat-react';
+import { publishSnackbars } from './publishSnackbars';
+
+/**
+ * Screenshot helper, not part of the recipe. `?simulate=snackbars` publishes the three snackbars
+ * `publishSnackbars` does once the page loads, and stops their countdowns from removing them
+ * before the shot is taken.
+ */
+export const SimulateSnackbars = () => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    if (new URLSearchParams(window.location.search).get('simulate') !== 'snackbars')
+      return;
+
+    const ids = publishSnackbars(client);
+    // The stack starts each countdown when it shows the snackbar; hold them for the shot.
+    const timer = setInterval(
+      () => ids.forEach((id) => client.notifications.clearTimeout(id)),
+      100,
+    );
+    return () => {
+      clearInterval(timer);
+      ids.forEach((id) => client.notifications.remove(id));
+    };
+  }, [client]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/notifications/custom-snackbars/Snackbar.css b/examples/cookbook/src/recipes/notifications/custom-snackbars/Snackbar.css
new file mode 100644
index 0000000000..716182ef34
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/custom-snackbars/Snackbar.css
@@ -0,0 +1,87 @@
+@layer stream-overrides {
+  .cookbook-snackbar {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-xs)
+      var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-inline-start-width: 4px;
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__background-core-elevation-1);
+    box-shadow: var(--str-chat__box-shadow-2);
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-default);
+    pointer-events: auto;
+    animation: cookbook-snackbar-enter 240ms ease-out both;
+  }
+
+  /* Each severity colors the stripe on the leading edge and the icon. */
+  .cookbook-snackbar--info {
+    border-inline-start-color: var(--str-chat__accent-primary);
+  }
+
+  .cookbook-snackbar--success {
+    border-inline-start-color: var(--str-chat__accent-success);
+  }
+
+  .cookbook-snackbar--warning {
+    border-inline-start-color: var(--str-chat__accent-warning);
+  }
+
+  .cookbook-snackbar--error {
+    border-inline-start-color: var(--str-chat__accent-error);
+  }
+
+  .cookbook-snackbar__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--str-chat__accent-primary);
+  }
+
+  .cookbook-snackbar--success .cookbook-snackbar__icon {
+    color: var(--str-chat__accent-success);
+  }
+
+  .cookbook-snackbar--warning .cookbook-snackbar__icon {
+    color: var(--str-chat__accent-warning);
+  }
+
+  .cookbook-snackbar--error .cookbook-snackbar__icon {
+    color: var(--str-chat__accent-error);
+  }
+
+  .cookbook-snackbar__message {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .cookbook-snackbar__action {
+    flex-shrink: 0;
+    font: var(--str-chat__font-caption-emphasis);
+    /* The label shows as the publisher wrote it. */
+    text-transform: none;
+  }
+
+  .cookbook-snackbar__dismiss {
+    flex-shrink: 0;
+    color: var(--str-chat__text-secondary);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cookbook-snackbar {
+      animation: none;
+    }
+  }
+
+  @keyframes cookbook-snackbar-enter {
+    from {
+      opacity: 0;
+      transform: translateY(50%);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+}
diff --git a/examples/cookbook/src/recipes/notifications/custom-snackbars/Snackbar.tsx b/examples/cookbook/src/recipes/notifications/custom-snackbars/Snackbar.tsx
new file mode 100644
index 0000000000..ba4f642042
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/custom-snackbars/Snackbar.tsx
@@ -0,0 +1,115 @@
+import type { ComponentType, FocusEvent } from 'react';
+import { useEffect, useRef } from 'react';
+import type { Notification } from 'stream-chat';
+import {
+  Button,
+  IconCheckmark,
+  IconExclamationCircleFill,
+  IconExclamationTriangleFill,
+  IconInfo,
+  IconXmark,
+  useChatContext,
+  useNotificationApi,
+  useTranslationContext,
+} from 'stream-chat-react';
+import './Snackbar.css';
+
+const iconsBySeverity: Record<string, ComponentType> = {
+  error: IconExclamationCircleFill,
+  info: IconInfo,
+  success: IconCheckmark,
+  warning: IconExclamationTriangleFill,
+};
+
+export const Snackbar = ({ notification }: { notification: Notification }) => {
+  const { client } = useChatContext();
+  const { t } = useTranslationContext();
+  const { ensureNotificationTimeout, removeNotification } = useNotificationApi();
+  const { actions, id, severity = 'info' } = notification;
+  const Icon = iconsBySeverity[severity];
+
+  // The countdown starts once the snackbar is on screen. A notification without a duration has
+  // none, and stays until it's dismissed.
+  useEffect(() => {
+    ensureNotificationTimeout(id);
+  }, [ensureNotificationTimeout, id]);
+
+  // Hovering or focusing the snackbar stops its countdown. It starts a full one again only once
+  // the pointer has left and focus has moved out of the snackbar.
+  const hovered = useRef(false);
+  const focused = useRef(false);
+  const pause = () => client.notifications.clearTimeout(id);
+  const resumeUnlessHeld = () => {
+    if (!hovered.current && !focused.current) ensureNotificationTimeout(id);
+  };
+  const handleMouseEnter = () => {
+    hovered.current = true;
+    pause();
+  };
+  const handleMouseLeave = () => {
+    hovered.current = false;
+    resumeUnlessHeld();
+  };
+  const handleFocus = () => {
+    focused.current = true;
+    pause();
+  };
+  // Focus moving between the snackbar's buttons stays inside it.
+  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
+    if (event.currentTarget.contains(event.relatedTarget)) return;
+    focused.current = false;
+    resumeUnlessHeld();
+  };
+
+  // The same text the SDK's notifications show: a translator for the type, or the message.
+  const message = t('translationBuilderTopic.notification', {
+    notification,
+    value: notification.message,
+  });
+
+  return (
+    <div
+      className={`cookbook-snackbar cookbook-snackbar--${severity}`}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {Icon && (
+        <span aria-hidden className='cookbook-snackbar__icon'>
+          <Icon />
+        </span>
+      )}
+      <span className='cookbook-snackbar__message'>{message}</span>
+      {actions?.map((action) => (
+        <Button
+          appearance='ghost'
+          className='cookbook-snackbar__action'
+          key={action.label}
+          onClick={() => {
+            action.handler();
+            removeNotification(id);
+          }}
+          size='sm'
+          variant='primary'
+        >
+          {action.label}
+        </Button>
+      ))}
+      <Button
+        appearance='ghost'
+        aria-label={t(
+          'notification.dismissNotification.ariaLabel',
+          'Dismiss notification',
+        )}
+        circular
+        className='cookbook-snackbar__dismiss'
+        onClick={() => removeNotification(id)}
+        size='sm'
+        variant='secondary'
+      >
+        <IconXmark />
+      </Button>
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/notifications/custom-snackbars/SnackbarStack.css b/examples/cookbook/src/recipes/notifications/custom-snackbars/SnackbarStack.css
new file mode 100644
index 0000000000..f86f49ae19
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/custom-snackbars/SnackbarStack.css
@@ -0,0 +1,24 @@
+@layer stream-overrides {
+  /* Floats over the bottom of its panel; only the snackbars themselves take clicks. */
+  .cookbook-snackbar-stack {
+    display: flex;
+    position: absolute;
+    z-index: 2;
+    inset-block-end: var(--str-chat__spacing-md);
+    inset-inline: var(--str-chat__spacing-md);
+    flex-direction: column;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+    pointer-events: none;
+  }
+
+  /* A modal's stack floats over the top of the modal instead. */
+  .cookbook-snackbar-stack--top {
+    inset-block-start: var(--str-chat__spacing-md);
+    inset-block-end: auto;
+  }
+
+  .cookbook-snackbar-stack > .cookbook-snackbar {
+    width: min(100%, 420px);
+  }
+}
diff --git a/examples/cookbook/src/recipes/notifications/custom-snackbars/SnackbarStack.tsx b/examples/cookbook/src/recipes/notifications/custom-snackbars/SnackbarStack.tsx
new file mode 100644
index 0000000000..862d50e773
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/custom-snackbars/SnackbarStack.tsx
@@ -0,0 +1,65 @@
+import type { PropsWithChildren } from 'react';
+import { useCallback } from 'react';
+import type { Notification } from 'stream-chat';
+import {
+  hasSystemNotificationTag,
+  useNotifications,
+  useTranslationContext,
+  WithComponents,
+} from 'stream-chat-react';
+import type { NotificationListProps } from 'stream-chat-react';
+import { Snackbar } from './Snackbar';
+import './SnackbarStack.css';
+
+// The rest wait their turn, so their countdowns don't run while they're out of sight.
+const MAX_VISIBLE = 3;
+
+// Takes the props of the list it replaces, so each panel keeps its own stack, and a modal's stack
+// sits at the top, where the modal asks for it.
+export const SnackbarStack = ({
+  className,
+  fallbackPanel,
+  filter,
+  panel,
+  verticalAlignment = 'bottom',
+}: NotificationListProps) => {
+  const { t } = useTranslationContext();
+  // System notifications belong to a banner, not a panel.
+  const panelFilter = useCallback(
+    (notification: Notification) =>
+      !hasSystemNotificationTag(notification) && (filter?.(notification) ?? true),
+    [filter],
+  );
+  const notifications = useNotifications({
+    applyDisplayFilter: true,
+    fallbackPanel,
+    filter: panelFilter,
+    panel,
+  });
+
+  if (!notifications.length) return null;
+
+  return (
+    <section
+      aria-label={t('notification.list.notifications.ariaLabel', 'Notifications')}
+      className={[
+        'cookbook-snackbar-stack',
+        verticalAlignment === 'top' && 'cookbook-snackbar-stack--top',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {notifications.slice(0, MAX_VISIBLE).map((notification) => (
+        <Snackbar key={notification.id} notification={notification} />
+      ))}
+    </section>
+  );
+};
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { NotificationList: SnackbarStack };
+
+export const WithSnackbars = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/notifications/custom-snackbars/default.recipe.tsx b/examples/cookbook/src/recipes/notifications/custom-snackbars/default.recipe.tsx
new file mode 100644
index 0000000000..e6d3435239
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/custom-snackbars/default.recipe.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { SimulateSnackbars } from './SimulateSnackbars';
+import { WithSnackbars } from './SnackbarStack';
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithSnackbars>
+    <SimulateSnackbars />
+    {children}
+  </WithSnackbars>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/notifications/custom-snackbars/publishSnackbars.ts b/examples/cookbook/src/recipes/notifications/custom-snackbars/publishSnackbars.ts
new file mode 100644
index 0000000000..904d93cf2d
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/custom-snackbars/publishSnackbars.ts
@@ -0,0 +1,29 @@
+import type { StreamChat } from 'stream-chat';
+
+/**
+ * Publishes one snackbar of each kind the page shows. A notification without a panel tag goes to
+ * the `channel` panel, so they stack over the open channel. Returns their ids.
+ */
+export const publishSnackbars = (client: StreamChat) => [
+  client.notifications.addSuccess({
+    message: 'Invite link copied',
+    origin: { emitter: 'InviteButton' },
+  }),
+  client.notifications.addWarning({
+    message: 'Photo is still uploading',
+    origin: { emitter: 'SendButton' },
+    options: {
+      actions: [
+        { handler: () => console.log('Send without the photo'), label: 'Send now' },
+      ],
+      // No duration, so it stays until the user acts on it or dismisses it.
+      duration: 0,
+      type: 'app:attachment:upload:pending',
+    },
+  }),
+  client.notifications.addError({
+    message: "Message couldn't be sent",
+    origin: { emitter: 'SendButton' },
+    options: { duration: 8000, type: 'app:message:send:failed' },
+  }),
+];
diff --git a/examples/cookbook/src/recipes/notifications/custom-snackbars/shots.json b/examples/cookbook/src/recipes/notifications/custom-snackbars/shots.json
new file mode 100644
index 0000000000..4d783238ef
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/custom-snackbars/shots.json
@@ -0,0 +1,12 @@
+[
+  {
+    "file": "custom-snackbars.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "snackbars"
+    },
+    "waitFor": ".cookbook-snackbar--error",
+    "clip": ".str-chat__channel",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/notifications/system-notification-banner/AppLayout.css b/examples/cookbook/src/recipes/notifications/system-notification-banner/AppLayout.css
new file mode 100644
index 0000000000..cf3eb1facd
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/system-notification-banner/AppLayout.css
@@ -0,0 +1,12 @@
+@layer stream-overrides {
+  .cookbook-app-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .cookbook-app-layout__body {
+    flex: 1;
+    min-height: 0;
+  }
+}
diff --git a/examples/cookbook/src/recipes/notifications/system-notification-banner/AppLayout.tsx b/examples/cookbook/src/recipes/notifications/system-notification-banner/AppLayout.tsx
new file mode 100644
index 0000000000..6c5e5011e8
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/system-notification-banner/AppLayout.tsx
@@ -0,0 +1,19 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+import { useChatContext } from 'stream-chat-react';
+import './AppLayout.css';
+
+// A column: the banner on top, then the rest of the app. It carries `str-chat` and the theme, so
+// the SDK's tokens resolve in the banner, outside ChatView.
+export const AppLayout = ({
+  banner,
+  children,
+}: PropsWithChildren<{ banner: ReactNode }>) => {
+  const { theme } = useChatContext();
+
+  return (
+    <div className={`str-chat ${theme} cookbook-app-layout`}>
+      {banner}
+      <div className='cookbook-app-layout__body'>{children}</div>
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/notifications/system-notification-banner/ConnectionStatusBanner.css b/examples/cookbook/src/recipes/notifications/system-notification-banner/ConnectionStatusBanner.css
new file mode 100644
index 0000000000..d8f53bd544
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/system-notification-banner/ConnectionStatusBanner.css
@@ -0,0 +1,9 @@
+@layer stream-overrides {
+  .cookbook-connection-status {
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md);
+    background: var(--str-chat__background-core-surface-default);
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-emphasis);
+    text-align: center;
+  }
+}
diff --git a/examples/cookbook/src/recipes/notifications/system-notification-banner/ConnectionStatusBanner.tsx b/examples/cookbook/src/recipes/notifications/system-notification-banner/ConnectionStatusBanner.tsx
new file mode 100644
index 0000000000..cd1bcfc7c9
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/system-notification-banner/ConnectionStatusBanner.tsx
@@ -0,0 +1,19 @@
+import type { Notification } from 'stream-chat';
+import { useSystemNotifications } from 'stream-chat-react';
+import './ConnectionStatusBanner.css';
+
+const isConnectionLost = (notification: Notification) =>
+  notification.type === 'system:network:connection:lost';
+
+export const ConnectionStatusBanner = () => {
+  const [notification] = useSystemNotifications({ filter: isConnectionLost });
+
+  // The status region stays rendered, so screen readers announce the text when it appears.
+  return (
+    <div role='status'>
+      {notification && (
+        <div className='cookbook-connection-status'>{notification.message}</div>
+      )}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/notifications/system-notification-banner/MaintenanceNotice.tsx b/examples/cookbook/src/recipes/notifications/system-notification-banner/MaintenanceNotice.tsx
new file mode 100644
index 0000000000..dde8ed6030
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/system-notification-banner/MaintenanceNotice.tsx
@@ -0,0 +1,34 @@
+import { useRef } from 'react';
+import { Button, useNotificationApi } from 'stream-chat-react';
+
+export const MaintenanceNotice = () => {
+  const { addSystemNotification, removeNotification } = useNotificationApi();
+  const notificationId = useRef<string | null>(null);
+
+  const show = () => {
+    notificationId.current = addSystemNotification({
+      // No duration, so it stays until removed.
+      duration: 0,
+      emitter: 'MaintenanceNotice',
+      message: 'Maintenance in 10 minutes',
+      severity: 'warning',
+      type: 'app:maintenance:upcoming',
+    });
+  };
+
+  const hide = () => {
+    if (notificationId.current) removeNotification(notificationId.current);
+    notificationId.current = null;
+  };
+
+  return (
+    <>
+      <Button appearance='outline' onClick={show} size='sm' variant='secondary'>
+        Announce maintenance
+      </Button>
+      <Button appearance='ghost' onClick={hide} size='sm' variant='secondary'>
+        Clear notice
+      </Button>
+    </>
+  );
+};
diff --git a/examples/cookbook/src/recipes/notifications/system-notification-banner/SimulateSystemNotification.tsx b/examples/cookbook/src/recipes/notifications/system-notification-banner/SimulateSystemNotification.tsx
new file mode 100644
index 0000000000..c9a016acc7
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/system-notification-banner/SimulateSystemNotification.tsx
@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { useChatContext, useNotificationApi } from 'stream-chat-react';
+
+/**
+ * Screenshot helper, not part of the recipe. `?simulate=offline` reports the device network as
+ * down once the app has loaded, so `Chat` publishes its lost-connection notification; `?simulate=maintenance` publishes
+ * the notice `MaintenanceNotice` would, without a click.
+ */
+export const SimulateSystemNotification = () => {
+  const { client } = useChatContext();
+  const { addSystemNotification, removeNotification } = useNotificationApi();
+
+  useEffect(() => {
+    const simulate = new URLSearchParams(window.location.search).get('simulate');
+    if (simulate === 'offline') {
+      // Goes offline once the channel list and the open channel have loaded, so the shot shows
+      // the app around the banner.
+      const channelId = new URLSearchParams(window.location.search).get('channel');
+      const hasLoaded = () =>
+        client.channelManager.paginators.some(
+          (paginator) => paginator.state.getLatestValue().items?.length,
+        ) &&
+        (!channelId ||
+          !!client.channel('messaging', channelId).messagePaginator.items?.length);
+      const timer = setInterval(() => {
+        if (!hasLoaded()) return;
+        clearInterval(timer);
+        client.networkConnection.setStatus(false);
+      }, 200);
+      return () => clearInterval(timer);
+    }
+    if (simulate !== 'maintenance') return;
+
+    const id = addSystemNotification({
+      duration: 0,
+      emitter: 'MaintenanceNotice',
+      message: 'Maintenance in 10 minutes',
+      severity: 'warning',
+      type: 'app:maintenance:upcoming',
+    });
+    return () => removeNotification(id);
+  }, [addSystemNotification, client, removeNotification]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/notifications/system-notification-banner/SystemNotificationBanner.css b/examples/cookbook/src/recipes/notifications/system-notification-banner/SystemNotificationBanner.css
new file mode 100644
index 0000000000..ef81fc58fd
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/system-notification-banner/SystemNotificationBanner.css
@@ -0,0 +1,90 @@
+@layer stream-overrides {
+  .cookbook-system-banner {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: var(--str-chat__spacing-xs);
+    overflow: hidden;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md);
+    border-bottom: 1px solid var(--str-chat__border-core-default);
+    background: var(--str-chat__background-core-surface-default);
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-emphasis);
+    animation: cookbook-system-banner-slide-in 300ms ease-out both;
+  }
+
+  .cookbook-system-banner--exiting {
+    animation: cookbook-system-banner-slide-out 300ms ease-in both;
+  }
+
+  .cookbook-system-banner--interactive {
+    cursor: pointer;
+  }
+
+  .cookbook-system-banner__icon {
+    display: inline-flex;
+    color: var(--str-chat__accent-primary);
+  }
+
+  .cookbook-system-banner--error .cookbook-system-banner__icon {
+    color: var(--str-chat__accent-error);
+  }
+
+  .cookbook-system-banner--success .cookbook-system-banner__icon {
+    color: var(--str-chat__accent-success);
+  }
+
+  .cookbook-system-banner--warning .cookbook-system-banner__icon {
+    color: var(--str-chat__accent-warning);
+  }
+
+  .cookbook-system-banner--loading .cookbook-system-banner__icon {
+    animation: cookbook-system-banner-spin 1.5s linear infinite;
+  }
+
+  .cookbook-system-banner__message {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Without animations, the bar shows and goes at once, and the icon stays still. */
+  @media (prefers-reduced-motion: reduce) {
+    .cookbook-system-banner,
+    .cookbook-system-banner--exiting,
+    .cookbook-system-banner--loading .cookbook-system-banner__icon {
+      animation: none;
+    }
+  }
+
+  @keyframes cookbook-system-banner-slide-in {
+    from {
+      max-height: 0;
+      opacity: 0;
+      padding-block: 0;
+    }
+    to {
+      max-height: 64px;
+      opacity: 1;
+    }
+  }
+
+  @keyframes cookbook-system-banner-slide-out {
+    from {
+      max-height: 64px;
+      opacity: 1;
+    }
+    to {
+      max-height: 0;
+      opacity: 0;
+      padding-block: 0;
+    }
+  }
+
+  @keyframes cookbook-system-banner-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
diff --git a/examples/cookbook/src/recipes/notifications/system-notification-banner/SystemNotificationBanner.tsx b/examples/cookbook/src/recipes/notifications/system-notification-banner/SystemNotificationBanner.tsx
new file mode 100644
index 0000000000..86bfa039d8
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/system-notification-banner/SystemNotificationBanner.tsx
@@ -0,0 +1,80 @@
+import type { ComponentType } from 'react';
+import { useEffect, useState } from 'react';
+import type { Notification } from 'stream-chat';
+import {
+  IconCheckmark,
+  IconExclamationCircleFill,
+  IconExclamationTriangleFill,
+  IconInfo,
+  IconLoading,
+  useSystemNotifications,
+} from 'stream-chat-react';
+import './SystemNotificationBanner.css';
+
+const iconsBySeverity: Record<string, ComponentType> = {
+  error: IconExclamationCircleFill,
+  info: IconInfo,
+  loading: IconLoading,
+  success: IconCheckmark,
+  warning: IconExclamationTriangleFill,
+};
+
+export const SystemNotificationBanner = () => {
+  const [notification] = useSystemNotifications();
+  // Without animations there is no slide-out to wait for, so the bar goes at once.
+  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  // The last notification shown, kept while the bar slides out.
+  const [retained, setRetained] = useState<Notification | undefined>(notification);
+
+  useEffect(() => {
+    if (notification) setRetained(notification);
+    else if (reduceMotion) setRetained(undefined);
+  }, [notification, reduceMotion]);
+
+  const shown = notification ?? (reduceMotion ? undefined : retained);
+  const isExiting = !notification;
+  // A bar on its way out no longer acts on a click.
+  const action = isExiting ? undefined : shown?.actions?.[0];
+  const Icon = shown && iconsBySeverity[shown.severity ?? 'error'];
+
+  const className = [
+    'cookbook-system-banner',
+    shown?.severity && `cookbook-system-banner--${shown.severity}`,
+    isExiting && 'cookbook-system-banner--exiting',
+    action && 'cookbook-system-banner--interactive',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  // The status region stays rendered, so screen readers announce each message put into it.
+  return (
+    <div role='status'>
+      {shown && (
+        <div
+          className={className}
+          onAnimationEnd={(event) => {
+            if (event.animationName === 'cookbook-system-banner-slide-out') {
+              setRetained(undefined);
+            }
+          }}
+          onClick={action?.handler}
+          onKeyDown={(event) => {
+            if (action && (event.key === 'Enter' || event.key === ' ')) {
+              event.preventDefault();
+              action.handler();
+            }
+          }}
+          role={action ? 'button' : undefined}
+          tabIndex={action ? 0 : undefined}
+        >
+          {Icon && (
+            <span aria-hidden className='cookbook-system-banner__icon'>
+              <Icon />
+            </span>
+          )}
+          <span className='cookbook-system-banner__message'>{shown.message}</span>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/notifications/system-notification-banner/connection.recipe.tsx b/examples/cookbook/src/recipes/notifications/system-notification-banner/connection.recipe.tsx
new file mode 100644
index 0000000000..e8ff409f6f
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/system-notification-banner/connection.recipe.tsx
@@ -0,0 +1,16 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { AppLayout } from './AppLayout';
+import { ConnectionStatusBanner } from './ConnectionStatusBanner';
+import { SimulateSystemNotification } from './SimulateSystemNotification';
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <AppLayout banner={<ConnectionStatusBanner />}>
+    <SimulateSystemNotification />
+    {children}
+  </AppLayout>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/notifications/system-notification-banner/default.recipe.tsx b/examples/cookbook/src/recipes/notifications/system-notification-banner/default.recipe.tsx
new file mode 100644
index 0000000000..d6a0432506
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/system-notification-banner/default.recipe.tsx
@@ -0,0 +1,16 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { AppLayout } from './AppLayout';
+import { SimulateSystemNotification } from './SimulateSystemNotification';
+import { SystemNotificationBanner } from './SystemNotificationBanner';
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <AppLayout banner={<SystemNotificationBanner />}>
+    <SimulateSystemNotification />
+    {children}
+  </AppLayout>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/notifications/system-notification-banner/shots.json b/examples/cookbook/src/recipes/notifications/system-notification-banner/shots.json
new file mode 100644
index 0000000000..683653f824
--- /dev/null
+++ b/examples/cookbook/src/recipes/notifications/system-notification-banner/shots.json
@@ -0,0 +1,23 @@
+[
+  {
+    "file": "system-notification-banner.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "maintenance"
+    },
+    "waitFor": ".cookbook-system-banner--warning",
+    "clip": ".cookbook-app-layout",
+    "padding": 0
+  },
+  {
+    "file": "system-notification-banner-offline.png",
+    "variant": "connection",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "offline"
+    },
+    "waitFor": ".cookbook-connection-status",
+    "clip": ".cookbook-app-layout",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/panels/channel-details/ChannelDetailsPanel.css b/examples/cookbook/src/recipes/panels/channel-details/ChannelDetailsPanel.css
new file mode 100644
index 0000000000..5de94f26f6
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/channel-details/ChannelDetailsPanel.css
@@ -0,0 +1,14 @@
+@layer stream-overrides {
+  .cookbook-channel-details {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  /* In a modal, the panel sets its own size. Here, it fills the side panel. */
+  .cookbook-channel-details .str-chat__channel-detail {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/examples/cookbook/src/recipes/panels/channel-details/ChannelDetailsPanel.tsx b/examples/cookbook/src/recipes/panels/channel-details/ChannelDetailsPanel.tsx
new file mode 100644
index 0000000000..59930582fd
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/channel-details/ChannelDetailsPanel.tsx
@@ -0,0 +1,69 @@
+import { useMemo } from 'react';
+import { ChannelInstanceProvider, ModalContextProvider } from 'stream-chat-react';
+import { ChannelDetail } from 'stream-chat-react/channel-detail';
+import type { SectionNavigatorSection } from 'stream-chat-react/channel-detail';
+import { useSlotChannel } from 'stream-chat-react/slot-layout';
+import { useSidePanel } from '../../../base/SidePanel';
+import './ChannelDetailsPanel.css';
+
+const CHANNEL_DETAILS_ID = 'channel-details';
+
+type ChannelDetailsProps = {
+  /** The panel's sections, in order. Defaults to the SDK's five. */
+  sections?: SectionNavigatorSection[];
+};
+
+/**
+ * The SDK's `ChannelDetail` for the channel open in the `channel` slot, so it follows the user to
+ * another channel.
+ */
+const ChannelDetails = ({ sections }: ChannelDetailsProps) => {
+  const channel = useSlotChannel({ slot: 'channel' });
+  const { closeSidePanel } = useSidePanel();
+  // The sections close themselves through the modal context: their close button, and actions
+  // such as opening a pinned message. Here, closing means closing the side panel.
+  const modalContext = useMemo(() => ({ close: closeSidePanel }), [closeSidePanel]);
+  const channelContext = useMemo(() => (channel ? { channel } : undefined), [channel]);
+
+  if (!channelContext) return null;
+
+  return (
+    // Channel info reads the channel from the channel context for its online status, and the
+    // side panel sits outside the channel's `Channel`.
+    <ChannelInstanceProvider value={channelContext}>
+      <ModalContextProvider value={modalContext}>
+        <div className='cookbook-channel-details'>
+          {/* A new channel starts the panel again on its first section. */}
+          <ChannelDetail
+            channel={channelContext.channel}
+            key={channelContext.channel.cid}
+            sections={sections}
+          />
+        </div>
+      </ModalContextProvider>
+    </ChannelInstanceProvider>
+  );
+};
+
+/**
+ * Opens the channel's details in the side panel, and closes them when they're the open content.
+ * `isOpen` tells the control that toggles them whether the details are on screen.
+ */
+export const useChannelDetailsPanel = ({ sections }: ChannelDetailsProps = {}) => {
+  const { closeSidePanel, openId, openSidePanel } = useSidePanel();
+  const isOpen = openId === CHANNEL_DETAILS_ID;
+
+  const toggle = () => {
+    if (isOpen) closeSidePanel();
+    else
+      openSidePanel({
+        body: <ChannelDetails sections={sections} />,
+        id: CHANNEL_DETAILS_ID,
+        // ChannelDetail brings its own header, with the section's title and a close button.
+        ownHeader: true,
+        title: 'Channel details',
+      });
+  };
+
+  return { isOpen, toggle };
+};
diff --git a/examples/cookbook/src/recipes/panels/channel-details/ChannelHeaderWithDetails.css b/examples/cookbook/src/recipes/panels/channel-details/ChannelHeaderWithDetails.css
new file mode 100644
index 0000000000..46937cca20
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/channel-details/ChannelHeaderWithDetails.css
@@ -0,0 +1,21 @@
+@layer stream-overrides {
+  /* The title keeps the header's look: no button chrome, only an underline on hover. */
+  .cookbook-channel-title-button {
+    padding: 0 var(--str-chat__spacing-xs);
+    border: 0;
+    border-radius: var(--str-chat__radius-sm);
+    background: none;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  .cookbook-channel-title-button:hover {
+    text-decoration: underline;
+  }
+
+  /* Drawn inside the button: the header's title column clips anything outside it. */
+  .cookbook-channel-title-button:focus-visible {
+    outline: 2px solid var(--str-chat__accent-primary);
+    outline-offset: -2px;
+  }
+}
diff --git a/examples/cookbook/src/recipes/panels/channel-details/ChannelHeaderWithDetails.tsx b/examples/cookbook/src/recipes/panels/channel-details/ChannelHeaderWithDetails.tsx
new file mode 100644
index 0000000000..0aeb91fdd7
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/channel-details/ChannelHeaderWithDetails.tsx
@@ -0,0 +1,92 @@
+import type { ChannelConfig, ChannelStateData, EventPayload } from 'stream-chat';
+import {
+  ChannelAvatar,
+  TypingIndicatorHeader,
+  useChannel,
+  useChannelPreviewInfo,
+  useChatContext,
+  useStateStore,
+  WorkspaceNavigationBackButton,
+  WorkspaceNavigationCloseButton,
+} from 'stream-chat-react';
+import { useChannelDetailsPanel } from './ChannelDetailsPanel';
+import { sectionsWithPresence } from './MembersWithPresence';
+import './ChannelHeaderWithDetails.css';
+
+const channelStateSelector = ({
+  memberCount,
+  typing,
+  watcherCount,
+}: ChannelStateData) => ({
+  memberCount,
+  typing,
+  watcherCount,
+});
+
+const typingEventsSelector = ({ typingEvents }: ChannelConfig) => ({
+  typingEventsEnabled: typingEvents.enabled,
+});
+
+/**
+ * The SDK's channel header, rebuilt from its parts so the channel's title is a button that opens
+ * the channel's details in the side panel, and closes them. It keeps the SDK's classes, so it
+ * looks like the header it replaces.
+ */
+export const ChannelHeaderWithDetails = () => {
+  const { client } = useChatContext();
+  const channel = useChannel();
+  const { memberCount, typing, watcherCount } = useStateStore(
+    channel.state,
+    channelStateSelector,
+  );
+  const { typingEventsEnabled } = useStateStore(
+    channel.configState,
+    typingEventsSelector,
+  );
+  const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
+    channel,
+  });
+  const { isOpen, toggle } = useChannelDetailsPanel({ sections: sectionsWithPresence });
+
+  // Others typing in the channel itself; replies typed in threads carry a parent_id.
+  const someoneIsTyping = (Object.values(typing) as EventPayload<'typing.start'>[]).some(
+    ({ parent_id, user }) => !parent_id && user?.id !== client.userId,
+  );
+
+  return (
+    <div className='str-chat__channel-header'>
+      <div className='str-chat__channel-header__start'>
+        <WorkspaceNavigationBackButton />
+      </div>
+      <div className='str-chat__channel-header__data'>
+        {/* The name keeps the visible title, so voice control finds the button by what it shows. */}
+        <button
+          aria-expanded={isOpen}
+          aria-label={`Channel details for ${displayTitle}`}
+          className='str-chat__channel-header__data__title cookbook-channel-title-button'
+          onClick={toggle}
+          type='button'
+        >
+          {displayTitle}
+        </button>
+        <div className='str-chat__channel-header__data__subtitle'>
+          {typingEventsEnabled && someoneIsTyping ? (
+            <TypingIndicatorHeader />
+          ) : (
+            `${memberCount} members · ${watcherCount} online`
+          )}
+        </div>
+      </div>
+      <div className='str-chat__channel-header__end'>
+        <ChannelAvatar
+          className='str-chat__avatar--channel-header'
+          displayMembers={groupChannelDisplayInfo.members}
+          imageUrl={displayImage}
+          size='lg'
+          userName={displayTitle}
+        />
+        <WorkspaceNavigationCloseButton />
+      </div>
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/panels/channel-details/MembersWithPresence.css b/examples/cookbook/src/recipes/panels/channel-details/MembersWithPresence.css
new file mode 100644
index 0000000000..1a5e868d57
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/channel-details/MembersWithPresence.css
@@ -0,0 +1,66 @@
+@layer stream-overrides {
+  .cookbook-members-with-presence {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .cookbook-members-with-presence__list {
+    margin: 0;
+    padding: 0 var(--str-chat__spacing-xs);
+    overflow-y: auto;
+    list-style: none;
+  }
+
+  .cookbook-member-row {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+    width: 100%;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 0;
+    border-radius: var(--str-chat__radius-lg);
+    background: none;
+    color: var(--str-chat__text-primary);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .cookbook-member-row:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-member-row__text {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .cookbook-member-row__name {
+    font: var(--str-chat__font-body-emphasis);
+  }
+
+  .cookbook-member-row__you,
+  .cookbook-member-row__last-seen {
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-member-row__status {
+    padding: var(--str-chat__spacing-xxxs) var(--str-chat__spacing-xs);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-max);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-member-row__status--online {
+    border-color: var(--str-chat__border-utility-success);
+    color: var(--str-chat__accent-success);
+  }
+
+  .cookbook-member-row__status--offline {
+    color: var(--str-chat__text-tertiary);
+  }
+}
diff --git a/examples/cookbook/src/recipes/panels/channel-details/MembersWithPresence.tsx b/examples/cookbook/src/recipes/panels/channel-details/MembersWithPresence.tsx
new file mode 100644
index 0000000000..93bb75a58a
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/channel-details/MembersWithPresence.tsx
@@ -0,0 +1,148 @@
+import { useId, useState } from 'react';
+import { convertTimestampToDate } from 'stream-chat';
+import type { ChannelMemberResponse, ChannelStateData } from 'stream-chat';
+import {
+  Avatar,
+  Prompt,
+  useChatContext,
+  useModalContext,
+  useStateStore,
+} from 'stream-chat-react';
+import {
+  ChannelMemberDetail,
+  defaultChannelDetailSections,
+  SectionNavigatorHeader,
+  useChannelDetailContext,
+} from 'stream-chat-react/channel-detail';
+import type {
+  SectionNavigatorSection,
+  SectionNavigatorSectionContentProps,
+} from 'stream-chat-react/channel-detail';
+import './MembersWithPresence.css';
+
+const membersSelector = ({ members }: ChannelStateData) => ({ members });
+
+// The panel's own text is English, so its dates are too. An app in another language passes its
+// language here.
+const relativeTime = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
+
+// "Last seen 5 minutes ago", in the largest unit that fits.
+const formatLastSeen = (lastActive: Date) => {
+  const minutes = Math.round((lastActive.getTime() - Date.now()) / 60_000);
+  if (Math.abs(minutes) < 60)
+    return `Last seen ${relativeTime.format(minutes, 'minute')}`;
+  const hours = Math.round(minutes / 60);
+  if (Math.abs(hours) < 24) return `Last seen ${relativeTime.format(hours, 'hour')}`;
+  return `Last seen ${relativeTime.format(Math.round(hours / 24), 'day')}`;
+};
+
+const getName = (member: ChannelMemberResponse) =>
+  member.user?.name || member.user?.id || member.user_id || '';
+
+type MemberRowProps = {
+  isOwnUser: boolean;
+  member: ChannelMemberResponse;
+  onSelect: (member: ChannelMemberResponse) => void;
+};
+
+const MemberRow = ({ isOwnUser, member, onSelect }: MemberRowProps) => {
+  const { user } = member;
+  const name = getName(member);
+  const online = !!user?.online;
+  const lastActive = convertTimestampToDate(user?.last_active);
+  const hintId = useId();
+
+  // The row's text names the button, status included; the hint adds what clicking it does.
+  return (
+    <li>
+      <button
+        aria-describedby={hintId}
+        className='cookbook-member-row'
+        onClick={() => onSelect(member)}
+        type='button'
+      >
+        <Avatar imageUrl={user?.image} isOnline={online} size='md' userName={name} />
+        <span className='cookbook-member-row__text'>
+          <span className='cookbook-member-row__name'>
+            {name}
+            {isOwnUser && <span className='cookbook-member-row__you'> (you)</span>}
+          </span>
+          {!online && lastActive && (
+            <span className='cookbook-member-row__last-seen'>
+              {formatLastSeen(lastActive)}
+            </span>
+          )}
+        </span>
+        <span
+          className={`cookbook-member-row__status cookbook-member-row__status--${
+            online ? 'online' : 'offline'
+          }`}
+        >
+          {online ? 'Online' : 'Offline'}
+        </span>
+        <span hidden id={hintId}>
+          Opens {name}&apos;s details
+        </span>
+      </button>
+    </li>
+  );
+};
+
+/**
+ * The Members section with each member's online status: who is online first, then everyone
+ * else. It reads the channel's members from `channel.state`, which the client updates when a
+ * member comes online or goes offline.
+ */
+export const MembersWithPresence = ({ layout }: SectionNavigatorSectionContentProps) => {
+  const { client } = useChatContext();
+  const { channel } = useChannelDetailContext();
+  const { close } = useModalContext();
+  const { members } = useStateStore(channel.state, membersSelector);
+  const [selectedMember, setSelectedMember] = useState<ChannelMemberResponse>();
+
+  if (selectedMember) {
+    return (
+      <ChannelMemberDetail
+        layout={layout}
+        member={selectedMember}
+        onBack={() => setSelectedMember(undefined)}
+      />
+    );
+  }
+
+  const sorted = Object.values(members).sort(
+    (a, b) =>
+      Number(!!b.user?.online) - Number(!!a.user?.online) ||
+      getName(a).localeCompare(getName(b)),
+  );
+  const onlineCount = sorted.filter((member) => member.user?.online).length;
+
+  return (
+    <div className='cookbook-members-with-presence'>
+      <SectionNavigatorHeader
+        close={close}
+        title={`${sorted.length} members · ${onlineCount} online`}
+      />
+      <Prompt.Body>
+        <ul className='cookbook-members-with-presence__list'>
+          {sorted.map((member) => (
+            <MemberRow
+              isOwnUser={member.user?.id === client.userId}
+              key={member.user?.id ?? member.user_id}
+              member={member}
+              onSelect={setSelectedMember}
+            />
+          ))}
+        </ul>
+      </Prompt.Body>
+    </div>
+  );
+};
+
+// The default sections, with this view in place of the Members section's content.
+export const sectionsWithPresence: SectionNavigatorSection[] =
+  defaultChannelDetailSections.map((section) =>
+    section.id === 'channel-members'
+      ? { ...section, SectionContent: MembersWithPresence }
+      : section,
+  );
diff --git a/examples/cookbook/src/recipes/panels/channel-details/OpenDetailsFromUrl.tsx b/examples/cookbook/src/recipes/panels/channel-details/OpenDetailsFromUrl.tsx
new file mode 100644
index 0000000000..955844dad2
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/channel-details/OpenDetailsFromUrl.tsx
@@ -0,0 +1,31 @@
+import { findByText, useClickInTurn } from '../../../base/useClickInTurn';
+import type { ClickStep } from '../../../base/useClickInTurn';
+
+const details = new URLSearchParams(window.location.search).get('details');
+
+const openDetails: ClickStep = {
+  find: () => document.querySelector<HTMLElement>('.cookbook-channel-title-button'),
+};
+const pickMembers: ClickStep = {
+  find: () =>
+    findByText(
+      '.cookbook-channel-details .str-chat__channel-detail__nav-button',
+      'Members',
+    ),
+};
+const steps: ClickStep[] =
+  details === 'open'
+    ? [openDetails]
+    : details === 'members'
+      ? [openDetails, pickMembers]
+      : [];
+
+/**
+ * For the screenshots only, not part of the recipe: `?details=open` clicks the channel's title in
+ * the header once it's on screen, and `?details=members` then picks the Members section. It never
+ * clicks an action, so nothing is muted or left.
+ */
+export const OpenDetailsFromUrl = () => {
+  useClickInTurn(steps);
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/panels/channel-details/channel-details-theme.css b/examples/cookbook/src/recipes/panels/channel-details/channel-details-theme.css
new file mode 100644
index 0000000000..c566e9d003
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/channel-details/channel-details-theme.css
@@ -0,0 +1,6 @@
+@layer stream-overrides {
+  /* The card of actions gets larger corners; it keeps the SDK's card background. */
+  .cookbook-channel-details {
+    --str-chat__switch-field-border-radius: var(--str-chat__radius-xl);
+  }
+}
diff --git a/examples/cookbook/src/recipes/panels/channel-details/default.recipe.tsx b/examples/cookbook/src/recipes/panels/channel-details/default.recipe.tsx
new file mode 100644
index 0000000000..3b2cbae858
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/channel-details/default.recipe.tsx
@@ -0,0 +1,15 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { SimulatePresence } from '../../channel-list/members-and-online-status/SimulatePresence';
+import './channel-details-theme.css';
+import { ChannelHeaderWithDetails } from './ChannelHeaderWithDetails';
+import { OpenDetailsFromUrl } from './OpenDetailsFromUrl';
+
+// SimulatePresence and OpenDetailsFromUrl only serve the screenshots: they bring some members
+// online and open the panel.
+const recipe: RecipeConfig = {
+  ChannelHeader: ChannelHeaderWithDetails,
+  chatViewChildren: <OpenDetailsFromUrl />,
+  Wrapper: SimulatePresence,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/panels/channel-details/shots.json b/examples/cookbook/src/recipes/panels/channel-details/shots.json
new file mode 100644
index 0000000000..bef2678383
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/channel-details/shots.json
@@ -0,0 +1,28 @@
+[
+  {
+    "file": "channel-details-panel.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "details": "open",
+      "simulate": "online",
+      "online": "docs-v15-ck-bob,docs-v15-ck-cara"
+    },
+    "waitFor": ".cookbook-channel-details .str-chat__channel-detail__channel-management-view"
+  },
+  {
+    "file": "channel-details-members.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "details": "members",
+      "simulate": "online",
+      "online": "docs-v15-ck-bob,docs-v15-ck-cara"
+    },
+    "waitFor": ".cookbook-member-row",
+    "clip": ".cookbook-side-panel",
+    "padding": 0,
+    "viewport": {
+      "width": 1280,
+      "height": 320
+    }
+  }
+]
diff --git a/examples/cookbook/src/recipes/panels/drafts-list/DraftsButton.css b/examples/cookbook/src/recipes/panels/drafts-list/DraftsButton.css
new file mode 100644
index 0000000000..b0d96821ca
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/drafts-list/DraftsButton.css
@@ -0,0 +1,7 @@
+@layer stream-overrides {
+  /* While the drafts are open, the button looks pressed, like the rail's current view. */
+  .cookbook-drafts-button[aria-expanded='true'] {
+    background: var(--str-chat__background-utility-selected);
+    color: var(--str-chat__accent-primary);
+  }
+}
diff --git a/examples/cookbook/src/recipes/panels/drafts-list/DraftsButton.tsx b/examples/cookbook/src/recipes/panels/drafts-list/DraftsButton.tsx
new file mode 100644
index 0000000000..3937e73ac5
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/drafts-list/DraftsButton.tsx
@@ -0,0 +1,44 @@
+import { useComponentContextIcons } from 'stream-chat-react';
+import {
+  ChatView,
+  ChatViewChannelsSelectorButton,
+  ChatViewSelectorButton,
+} from 'stream-chat-react/slot-layout';
+import type { ChatViewSelectorEntry } from 'stream-chat-react/slot-layout';
+import { useSidePanel } from '../../../base/SidePanel';
+import { DraftsList } from './DraftsList';
+import './DraftsButton.css';
+
+const DRAFTS_PANEL_ID = 'drafts';
+
+/** A button in the navigation rail that opens and closes the user's drafts in the side panel. */
+const DraftsSelectorButton = () => {
+  const { IconEdit } = useComponentContextIcons();
+  const { closeSidePanel, openId, openSidePanel } = useSidePanel();
+  const isOpen = openId === DRAFTS_PANEL_ID;
+
+  const toggle = () =>
+    isOpen
+      ? closeSidePanel()
+      : openSidePanel({ body: <DraftsList />, id: DRAFTS_PANEL_ID, title: 'Drafts' });
+
+  return (
+    <ChatViewSelectorButton
+      aria-controls={isOpen ? 'cookbook-side-panel' : undefined}
+      aria-expanded={isOpen}
+      className='cookbook-drafts-button'
+      Icon={IconEdit}
+      onClick={toggle}
+      text='Drafts'
+    />
+  );
+};
+
+// The channels view, then the drafts. Declared once, so the rail gets the same list every render.
+const itemSet: ChatViewSelectorEntry[] = [
+  { Component: ChatViewChannelsSelectorButton, type: 'channels' },
+  { Component: DraftsSelectorButton, type: 'drafts' },
+];
+
+/** The navigation rail, with a Drafts button under the channels view's. */
+export const NavRailWithDrafts = () => <ChatView.Selector itemSet={itemSet} />;
diff --git a/examples/cookbook/src/recipes/panels/drafts-list/DraftsList.css b/examples/cookbook/src/recipes/panels/drafts-list/DraftsList.css
new file mode 100644
index 0000000000..d1b59aefad
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/drafts-list/DraftsList.css
@@ -0,0 +1,87 @@
+@layer stream-overrides {
+  .cookbook-drafts {
+    display: flex;
+    flex-direction: column;
+    padding-block-end: var(--str-chat__spacing-md);
+  }
+
+  .cookbook-drafts__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* The draft's button fills the row; the delete button sits at its end. */
+  .cookbook-draft {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xxs);
+    padding-inline-end: var(--str-chat__spacing-sm);
+    border-block-end: 1px solid var(--str-chat__border-core-subtle);
+  }
+
+  .cookbook-draft:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-draft__open {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-xxs);
+    min-width: 0;
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+    border: 0;
+    background: none;
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-default);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .cookbook-draft__open:focus-visible {
+    outline: 2px solid var(--str-chat__accent-primary);
+    outline-offset: -2px;
+  }
+
+  .cookbook-draft__header {
+    display: flex;
+    align-items: baseline;
+    gap: var(--str-chat__spacing-xs);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-draft__where {
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-draft__time {
+    margin-inline-start: auto;
+  }
+
+  /* A thread's draft shows the message that started the thread above its own text. */
+  .cookbook-draft__parent {
+    overflow: hidden;
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .cookbook-drafts__note {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-sm);
+    margin: 0;
+    padding: var(--str-chat__spacing-md);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-drafts__note p {
+    margin: 0;
+  }
+}
diff --git a/examples/cookbook/src/recipes/panels/drafts-list/DraftsList.tsx b/examples/cookbook/src/recipes/panels/drafts-list/DraftsList.tsx
new file mode 100644
index 0000000000..0dff8c5184
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/drafts-list/DraftsList.tsx
@@ -0,0 +1,278 @@
+import { useCallback, useEffect, useState } from 'react';
+import { flushSync } from 'react-dom';
+import { convertTimestampToDate } from 'stream-chat';
+import type { DraftResponse } from 'stream-chat';
+import {
+  Button,
+  LoadingIndicator,
+  LoadMoreButton,
+  useChannelDisplayName,
+  useChatContext,
+  useComponentContextIcons,
+  useNotificationApi,
+  useWorkspaceNavigation,
+} from 'stream-chat-react';
+import './DraftsList.css';
+
+const PAGE_SIZE = 3;
+
+// Day and 24-hour time, like the message list's timestamps.
+const timeFormat = new Intl.DateTimeFormat('en-US', {
+  day: 'numeric',
+  hour: '2-digit',
+  hourCycle: 'h23',
+  minute: '2-digit',
+  month: 'short',
+});
+
+/** A thread's draft names the message that started the thread; a channel's draft names none. */
+const isThreadDraft = (draft: DraftResponse) => !!draft.parent_id;
+
+/** Each channel and each thread holds at most one draft, so the two ids name a draft. */
+const isSameDraft = (a: DraftResponse, b: DraftResponse) =>
+  a.channel_cid === b.channel_cid && a.parent_id === b.parent_id;
+
+/** The key a list item and the screenshots know a draft by. */
+const draftKey = (draft: DraftResponse) =>
+  `${draft.channel_cid}/${draft.parent_id ?? ''}`;
+
+type DraftsState = {
+  drafts?: DraftResponse[];
+  error?: Error;
+  isLoading: boolean;
+  /** The cursor of the next page; none when the last page has loaded. */
+  next?: string;
+};
+
+/**
+ * The user's drafts across channels and threads, newest first, a page at a time. `draft.updated`
+ * and `draft.deleted` keep the loaded ones current, for example when the user leaves a channel
+ * and its composer saves a draft.
+ */
+const useDrafts = () => {
+  const { client } = useChatContext();
+  const [state, setState] = useState<DraftsState>({ isLoading: true });
+
+  /** Loads the first page, or the page after `next`, which is added to the loaded ones. */
+  const load = useCallback(
+    (next?: string) => {
+      setState((current) => ({ ...current, error: undefined, isLoading: true }));
+      client
+        .queryDrafts({
+          limit: PAGE_SIZE,
+          next,
+          sort: [{ direction: -1, field: 'created_at' }],
+        })
+        .then((page) =>
+          setState((current) => ({
+            drafts: [...(next ? (current.drafts ?? []) : []), ...page.drafts],
+            isLoading: false,
+            next: page.next,
+          })),
+        )
+        .catch((error: Error) =>
+          setState((current) => ({ ...current, error, isLoading: false })),
+        );
+    },
+    [client],
+  );
+
+  /** Takes a draft out of the list: it was sent, cleared or deleted. */
+  const remove = useCallback(
+    (gone: DraftResponse) =>
+      setState((current) => ({
+        ...current,
+        drafts: current.drafts?.filter((draft) => !isSameDraft(draft, gone)),
+      })),
+    [],
+  );
+
+  useEffect(() => load(), [load]);
+
+  useEffect(() => {
+    // A saved draft moves to the top, in place of the one it replaces.
+    const updated = client.on('draft.updated', ({ draft }) => {
+      if (!draft) return;
+      setState((current) => ({
+        ...current,
+        drafts: [
+          draft,
+          ...(current.drafts ?? []).filter((loaded) => !isSameDraft(loaded, draft)),
+        ],
+      }));
+    });
+    const deleted = client.on('draft.deleted', ({ draft }) => draft && remove(draft));
+    return () => {
+      updated.unsubscribe();
+      deleted.unsubscribe();
+    };
+  }, [client, remove]);
+
+  return { ...state, load, remove };
+};
+
+/** Puts focus in the composer of the open channel or thread, found by the SDK's class for it. */
+const focusComposerIn = (container: 'str-chat__channel' | 'str-chat__thread') =>
+  document.querySelector<HTMLTextAreaElement>(`.${container} textarea`)?.focus();
+
+/**
+ * Opens the draft's channel, and its thread for a thread's draft, puts focus in that composer and
+ * loads the draft into it.
+ */
+const useOpenDraft = () => {
+  const { client } = useChatContext();
+  const { addNotification } = useNotificationApi();
+  const { openChannel, openThread } = useWorkspaceNavigation();
+
+  return async (draft: DraftResponse) => {
+    const [type, id] = draft.channel_cid.split(':');
+    try {
+      const channel = await client.channel(type, id).watch();
+      // flushSync renders what opens right away, so its composer is there to take focus.
+      flushSync(() => openChannel(channel));
+      let composer = channel.messageComposer;
+      if (draft.parent_id) {
+        const parentMessage =
+          draft.parent_message ??
+          (await client.getMessage({ id: draft.parent_id })).message;
+        const thread = client.threads.ensure({ channel, parentMessage });
+        flushSync(() => openThread(thread));
+        composer = thread.messageComposer;
+      }
+      focusComposerIn(draft.parent_id ? 'str-chat__thread' : 'str-chat__channel');
+      // A composer is emptied when it closes, and a loaded channel isn't queried again, so the
+      // composer fetches its draft itself.
+      await composer.getDraft();
+    } catch (error) {
+      addNotification({
+        emitter: 'DraftsList',
+        error: error as Error,
+        message: 'Failed to open the draft',
+        severity: 'error',
+        // The side panel has no notification list, so the channel beside it shows the error.
+        targetPanels: ['channel'],
+      });
+    }
+  };
+};
+
+type DraftProps = {
+  /** Takes focus when it renders, as the first item of a page Load more fetched. */
+  autoFocus?: boolean;
+  draft: DraftResponse;
+  onDeleted: (draft: DraftResponse) => void;
+};
+
+/** One draft: where it is, when it was last saved, its text, and a button that deletes it. */
+const Draft = ({ autoFocus, draft, onDeleted }: DraftProps) => {
+  const { client } = useChatContext();
+  const { addNotification } = useNotificationApi();
+  const { IconDelete } = useComponentContextIcons();
+  const openDraft = useOpenDraft();
+  const [type, id] = draft.channel_cid.split(':');
+  const channel = client.channel(type, id);
+  const channelName = useChannelDisplayName(channel);
+  const where = isThreadDraft(draft) ? `Thread in ${channelName}` : channelName;
+  const savedAt = convertTimestampToDate(draft.created_at);
+
+  const deleteDraft = () =>
+    channel
+      .deleteDraft({ parent_id: draft.parent_id })
+      .then(() => onDeleted(draft))
+      .catch((error: Error) =>
+        addNotification({
+          emitter: 'DraftsList',
+          error,
+          message: 'Failed to delete the draft',
+          severity: 'error',
+          targetPanels: ['channel'],
+        }),
+      );
+
+  return (
+    <li className='cookbook-draft'>
+      <button
+        autoFocus={autoFocus}
+        className='cookbook-draft__open'
+        data-draft-key={draftKey(draft)}
+        onClick={() => void openDraft(draft)}
+        type='button'
+      >
+        <span className='cookbook-draft__header'>
+          <span className='cookbook-draft__where'>{where}</span>
+          {savedAt && (
+            <time className='cookbook-draft__time' dateTime={savedAt.toISOString()}>
+              {timeFormat.format(savedAt)}
+            </time>
+          )}
+        </span>
+        {draft.parent_message && (
+          <span className='cookbook-draft__parent'>{draft.parent_message.text}</span>
+        )}
+        <span className='cookbook-draft__text'>{draft.message.text}</span>
+      </button>
+      <Button
+        appearance='ghost'
+        aria-label={`Delete draft: ${where}`}
+        circular
+        className='cookbook-draft__delete'
+        onClick={deleteDraft}
+        size='sm'
+        variant='secondary'
+      >
+        <IconDelete />
+      </Button>
+    </li>
+  );
+};
+
+/**
+ * The side panel's body: the user's unsent drafts. Clicking one opens it in its channel or thread;
+ * Load more fetches the next page.
+ */
+export const DraftsList = () => {
+  const { drafts, error, isLoading, load, next, remove } = useDrafts();
+  // The index of the first item Load more fetches, which takes focus from the button it disables.
+  const [focusIndex, setFocusIndex] = useState<number>();
+
+  if (error && !drafts?.length) {
+    return (
+      <div className='cookbook-drafts__note' role='alert'>
+        <p>Couldn’t load your drafts.</p>
+        <Button appearance='outline' onClick={() => load()} size='sm' variant='secondary'>
+          Try again
+        </Button>
+      </div>
+    );
+  }
+  if (!drafts) return <LoadingIndicator />;
+  if (!drafts.length) {
+    return (
+      <p className='cookbook-drafts__note'>No drafts. Unsent messages show up here.</p>
+    );
+  }
+
+  return (
+    <div className='cookbook-drafts'>
+      <ul className='cookbook-drafts__list'>
+        {drafts.map((draft, index) => (
+          <Draft
+            autoFocus={index === focusIndex}
+            draft={draft}
+            key={draftKey(draft)}
+            onDeleted={remove}
+          />
+        ))}
+      </ul>
+      {next && (
+        <LoadMoreButton
+          isLoading={isLoading}
+          onClick={() => {
+            setFocusIndex(drafts.length);
+            load(next);
+          }}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/panels/drafts-list/OpenDraftsFromUrl.tsx b/examples/cookbook/src/recipes/panels/drafts-list/OpenDraftsFromUrl.tsx
new file mode 100644
index 0000000000..549eb71974
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/drafts-list/OpenDraftsFromUrl.tsx
@@ -0,0 +1,30 @@
+import { useClickInTurn } from '../../../base/useClickInTurn';
+import type { ClickStep } from '../../../base/useClickInTurn';
+
+const params = new URLSearchParams(window.location.search);
+const draftKey = params.get('draft');
+
+// `?drafts=open` clicks the Drafts button, and `&draft=<channel cid>/<parent message id>` then
+// clicks that draft, as the user would.
+const steps: ClickStep[] =
+  params.get('drafts') === 'open'
+    ? [
+        { find: () => document.querySelector<HTMLElement>('.cookbook-drafts-button') },
+        ...(draftKey
+          ? [
+              {
+                find: () =>
+                  document.querySelector<HTMLElement>(
+                    `.cookbook-draft__open[data-draft-key="${CSS.escape(draftKey)}"]`,
+                  ),
+              },
+            ]
+          : []),
+      ]
+    : [];
+
+/** For the screenshots only, not part of the recipe: opens the drafts from the URL. */
+export const OpenDraftsFromUrl = () => {
+  useClickInTurn(steps);
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/panels/drafts-list/default.recipe.tsx b/examples/cookbook/src/recipes/panels/drafts-list/default.recipe.tsx
new file mode 100644
index 0000000000..c1d4651127
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/drafts-list/default.recipe.tsx
@@ -0,0 +1,21 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { NavRailWithDrafts } from './DraftsButton';
+import { OpenDraftsFromUrl } from './OpenDraftsFromUrl';
+
+// A Drafts button in the navigation rail that opens the user's drafts in the side panel.
+// OpenDraftsFromUrl only serves the screenshots.
+const recipe: RecipeConfig = {
+  chatProps: (client) => {
+    // Drafts are off by default. On, every composer saves, restores and clears its draft.
+    client.config.set({ messageComposer: { drafts: { enabled: true } } });
+    return {};
+  },
+  chatViewChildren: (
+    <>
+      <NavRailWithDrafts />
+      <OpenDraftsFromUrl />
+    </>
+  ),
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/panels/drafts-list/demo-data.json b/examples/cookbook/src/recipes/panels/drafts-list/demo-data.json
new file mode 100644
index 0000000000..310f4830ec
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/drafts-list/demo-data.json
@@ -0,0 +1,68 @@
+{
+  "channels": [
+    {
+      "id": "docs-v15-cb-craft-fair",
+      "name": "Craft fair",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-bob", "docs-v15-ck-cara"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-craft-fair-1",
+          "user": "docs-v15-ck-bob",
+          "text": "The craft fair is on the first Saturday of next month."
+        },
+        {
+          "id": "docs-v15-ck-craft-fair-2",
+          "user": "docs-v15-ck-cara",
+          "text": "I can paint the signs for our stall."
+        }
+      ],
+      "draftsForCurrentUser": [{ "text": "I can bring the folding table and a few" }]
+    },
+    {
+      "id": "docs-v15-cb-kite-day",
+      "name": "Kite day",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-cara", "docs-v15-ck-dan"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-kite-day-1",
+          "user": "docs-v15-ck-dan",
+          "text": "Which hill should we fly the kites from on Sunday?"
+        },
+        {
+          "id": "docs-v15-ck-kite-day-1-r1",
+          "user": "docs-v15-ck-cara",
+          "parent": "docs-v15-ck-kite-day-1",
+          "text": "The one by the old mill gets the most wind."
+        },
+        {
+          "id": "docs-v15-ck-kite-day-2",
+          "user": "docs-v15-ck-cara",
+          "text": "Remember to bring spare string."
+        }
+      ],
+      "draftsForCurrentUser": [
+        {
+          "parent": "docs-v15-ck-kite-day-1",
+          "text": "The mill hill works for me, as long as we"
+        },
+        {
+          "quotedMessage": "docs-v15-ck-kite-day-2",
+          "text": "I have a whole spool, so"
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-dog-walks",
+      "name": "Dog walks",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-bob", "docs-v15-ck-dan"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-dog-walks-1",
+          "user": "docs-v15-ck-bob",
+          "text": "Morning walk at eight tomorrow, same park as usual?"
+        }
+      ],
+      "draftsForCurrentUser": [{ "text": "Count me in, I might be a few minutes" }]
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/panels/drafts-list/shots.json b/examples/cookbook/src/recipes/panels/drafts-list/shots.json
new file mode 100644
index 0000000000..d6614a417b
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/drafts-list/shots.json
@@ -0,0 +1,30 @@
+[
+  {
+    "file": "drafts-list.png",
+    "query": { "channel": "docs-v15-cb-general", "drafts": "open" },
+    "waitFor": ".cookbook-draft__open[data-draft-key=\"messaging:docs-v15-cb-kite-day/docs-v15-ck-kite-day-1\"]",
+    "settleMs": 1500
+  },
+  {
+    "file": "drafts-list-open-thread.png",
+    "query": {
+      "channel": "docs-v15-cb-general",
+      "drafts": "open",
+      "draft": "messaging:docs-v15-cb-kite-day/docs-v15-ck-kite-day-1"
+    },
+    "viewport": { "width": 1600, "height": 720 },
+    "waitFor": ".str-chat__thread .str-chat__message-list",
+    "settleMs": 2000
+  },
+  {
+    "file": "drafts-list-open-quote.png",
+    "query": {
+      "channel": "docs-v15-cb-general",
+      "drafts": "open",
+      "draft": "messaging:docs-v15-cb-kite-day/"
+    },
+    "waitFor": ".str-chat__channel .str-chat__quoted-message-preview",
+    "clip": ".str-chat__channel .str-chat__message-composer-container",
+    "settleMs": 1500
+  }
+]
diff --git a/examples/cookbook/src/recipes/panels/hide-history-for-new-members/AddMembersButton.css b/examples/cookbook/src/recipes/panels/hide-history-for-new-members/AddMembersButton.css
new file mode 100644
index 0000000000..889c38fd0e
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/hide-history-for-new-members/AddMembersButton.css
@@ -0,0 +1,40 @@
+@layer stream-overrides {
+  .cookbook-history-options {
+    display: grid;
+    gap: var(--str-chat__spacing-xs);
+  }
+
+  .cookbook-history-option {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-default);
+    cursor: pointer;
+  }
+
+  .cookbook-history-option input {
+    accent-color: var(--str-chat__control-radio-button-bg-selected);
+  }
+
+  .cookbook-history-custom {
+    margin-top: var(--str-chat__spacing-sm);
+  }
+
+  .cookbook-history-custom__input {
+    box-sizing: border-box;
+    width: 100%;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-max);
+    background: var(--str-chat__background-core-surface-card);
+    color: var(--str-chat__input-text-default);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-history-custom__error {
+    margin-top: var(--str-chat__spacing-xxs);
+    color: var(--str-chat__accent-error);
+    font: var(--str-chat__font-caption-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/panels/hide-history-for-new-members/AddMembersButton.tsx b/examples/cookbook/src/recipes/panels/hide-history-for-new-members/AddMembersButton.tsx
new file mode 100644
index 0000000000..1af10fbe8a
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/hide-history-for-new-members/AddMembersButton.tsx
@@ -0,0 +1,136 @@
+import type { ChannelUpdateOptions } from 'stream-chat';
+import { useId, useState } from 'react';
+import { Button, GlobalModal, Prompt, useChannel } from 'stream-chat-react';
+import './AddMembersButton.css';
+
+type HistoryMode = 'none' | 'today' | 'all' | 'custom';
+
+const historyOptions: { label: string; mode: HistoryMode }[] = [
+  { label: "don't include", mode: 'none' },
+  { label: 'from today', mode: 'today' },
+  { label: 'from the beginning', mode: 'all' },
+  { label: 'custom', mode: 'custom' },
+];
+
+// The addMembers options for a choice, or undefined when the custom date isn't valid.
+const getHistoryOptions = (
+  mode: HistoryMode,
+  customInput: string,
+): ChannelUpdateOptions | undefined => {
+  if (mode === 'all') return {};
+  if (mode === 'none') return { hide_history: true };
+
+  if (mode === 'today') {
+    const startOfToday = new Date();
+    startOfToday.setHours(0, 0, 0, 0);
+    return { hide_history_before: startOfToday };
+  }
+
+  const cutoff = new Date(customInput);
+  if (Number.isNaN(cutoff.getTime()) || cutoff > new Date()) return undefined;
+  return { hide_history_before: cutoff };
+};
+
+export const AddMembersButton = ({ memberIds }: { memberIds: string[] }) => {
+  const channel = useChannel();
+  const [open, setOpen] = useState(false);
+  const [mode, setMode] = useState<HistoryMode>('none');
+  const [customInput, setCustomInput] = useState('');
+  const [adding, setAdding] = useState(false);
+  const errorId = useId();
+
+  const options = getHistoryOptions(mode, customInput);
+  // The error waits until the user has typed a date.
+  const showCustomError = mode === 'custom' && customInput !== '' && !options;
+
+  // Every time the dialog opens, it starts from the most private choice.
+  const openDialog = () => {
+    setMode('none');
+    setCustomInput('');
+    setOpen(true);
+  };
+  const close = () => setOpen(false);
+
+  const handleAdd = async () => {
+    if (!options || adding) return;
+    setAdding(true);
+    try {
+      await channel.addMembers({ members: memberIds, ...options });
+      close();
+    } catch (error) {
+      console.error('Could not add the members', error);
+    } finally {
+      setAdding(false);
+    }
+  };
+
+  return (
+    <>
+      <Button
+        appearance='outline'
+        className='cookbook-add-members'
+        onClick={openDialog}
+        size='sm'
+        variant='secondary'
+      >
+        Add members
+      </Button>
+      <GlobalModal onClose={close} open={open}>
+        <Prompt.Root>
+          <Prompt.Header close={close} title='Include conversation history?' />
+          <Prompt.Body>
+            <div
+              aria-label='Conversation history'
+              className='cookbook-history-options'
+              role='radiogroup'
+            >
+              {historyOptions.map((option) => (
+                <label className='cookbook-history-option' key={option.mode}>
+                  <input
+                    checked={mode === option.mode}
+                    name='history'
+                    onChange={() => setMode(option.mode)}
+                    type='radio'
+                    value={option.mode}
+                  />
+                  <span>{option.label}</span>
+                </label>
+              ))}
+            </div>
+            {mode === 'custom' && (
+              <div className='cookbook-history-custom'>
+                <input
+                  aria-describedby={showCustomError ? errorId : undefined}
+                  aria-invalid={showCustomError}
+                  aria-label='Show history from'
+                  className='cookbook-history-custom__input'
+                  onChange={(event) => setCustomInput(event.target.value)}
+                  type='datetime-local'
+                  value={customInput}
+                />
+                {showCustomError && (
+                  <div className='cookbook-history-custom__error' id={errorId}>
+                    Enter a valid date and time in the past
+                  </div>
+                )}
+              </div>
+            )}
+          </Prompt.Body>
+          <Prompt.Footer>
+            <Prompt.FooterControls>
+              <Prompt.FooterControlsButtonSecondary onClick={close}>
+                Cancel
+              </Prompt.FooterControlsButtonSecondary>
+              <Prompt.FooterControlsButtonPrimary
+                disabled={!options || adding}
+                onClick={handleAdd}
+              >
+                Add
+              </Prompt.FooterControlsButtonPrimary>
+            </Prompt.FooterControls>
+          </Prompt.Footer>
+        </Prompt.Root>
+      </GlobalModal>
+    </>
+  );
+};
diff --git a/examples/cookbook/src/recipes/panels/hide-history-for-new-members/ChannelHeaderWithAddMembers.tsx b/examples/cookbook/src/recipes/panels/hide-history-for-new-members/ChannelHeaderWithAddMembers.tsx
new file mode 100644
index 0000000000..76648ed824
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/hide-history-for-new-members/ChannelHeaderWithAddMembers.tsx
@@ -0,0 +1,18 @@
+import { ChannelHeader, WorkspaceNavigationCloseButton } from 'stream-chat-react';
+import { AddMembersButton } from './AddMembersButton';
+
+/**
+ * The SDK's header, with Add members before its close button. Call it once, outside any
+ * component, so the header and its button keep their identity across renders.
+ */
+export const createChannelHeaderWithAddMembers = (memberIds: string[]) => {
+  const HeaderEnd = () => (
+    <>
+      <AddMembersButton memberIds={memberIds} />
+      <WorkspaceNavigationCloseButton />
+    </>
+  );
+
+  const ChannelHeaderWithAddMembers = () => <ChannelHeader EndContent={HeaderEnd} />;
+  return ChannelHeaderWithAddMembers;
+};
diff --git a/examples/cookbook/src/recipes/panels/hide-history-for-new-members/OpenHistoryDialog.tsx b/examples/cookbook/src/recipes/panels/hide-history-for-new-members/OpenHistoryDialog.tsx
new file mode 100644
index 0000000000..d7ae054f14
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/hide-history-for-new-members/OpenHistoryDialog.tsx
@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+/**
+ * For the screenshots only, not part of the recipe: `?dialog=history` clicks Add members once the
+ * header is on screen, so the shot shows the dialog. It never clicks Add, so no member is added.
+ */
+export const OpenHistoryDialog = () => {
+  useEffect(() => {
+    if (new URLSearchParams(window.location.search).get('dialog') !== 'history') return;
+
+    const timer = setInterval(() => {
+      const button = document.querySelector<HTMLButtonElement>('.cookbook-add-members');
+      if (!button) return;
+      clearInterval(timer);
+      button.click();
+    }, 200);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/panels/hide-history-for-new-members/default.recipe.tsx b/examples/cookbook/src/recipes/panels/hide-history-for-new-members/default.recipe.tsx
new file mode 100644
index 0000000000..c5cfc6349c
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/hide-history-for-new-members/default.recipe.tsx
@@ -0,0 +1,15 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { createChannelHeaderWithAddMembers } from './ChannelHeaderWithAddMembers';
+import { OpenHistoryDialog } from './OpenHistoryDialog';
+
+// Dan isn't in Weekend trip, the channel the shot opens.
+const ChannelHeaderWithAddMembers = createChannelHeaderWithAddMembers([
+  'docs-v15-ck-dan',
+]);
+
+const recipe: RecipeConfig = {
+  ChannelHeader: ChannelHeaderWithAddMembers,
+  chatViewChildren: <OpenHistoryDialog />,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/panels/hide-history-for-new-members/shots.json b/examples/cookbook/src/recipes/panels/hide-history-for-new-members/shots.json
new file mode 100644
index 0000000000..4842b5afbb
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/hide-history-for-new-members/shots.json
@@ -0,0 +1,9 @@
+[
+  {
+    "file": "hide-channel-history-before-dialog.png",
+    "query": { "channel": "docs-v15-cb-trip", "dialog": "history" },
+    "waitFor": ".str-chat__prompt",
+    "clip": ".str-chat__prompt",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/panels/message-info/MessageInfoAction.tsx b/examples/cookbook/src/recipes/panels/message-info/MessageInfoAction.tsx
new file mode 100644
index 0000000000..966d0480f5
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/message-info/MessageInfoAction.tsx
@@ -0,0 +1,61 @@
+import type { PropsWithChildren } from 'react';
+import type { MessageActionSetItem } from 'stream-chat-react';
+import {
+  ContextMenuButton,
+  defaultMessageActionSet,
+  MessageActions,
+  useComponentContextIcons,
+  useContextMenuContext,
+  useMessageContext,
+  WithComponents,
+} from 'stream-chat-react';
+import { useSidePanel } from '../../../base/SidePanel';
+import { MessageInfo } from './MessageInfoPanel';
+
+const MessageInfoAction = () => {
+  const { IconInfo } = useComponentContextIcons();
+  const { closeMenu } = useContextMenuContext();
+  const { isMyMessage, message } = useMessageContext();
+  const { openSidePanel } = useSidePanel();
+
+  // Only the user's own messages, and only in the channel: threads have no receipts yet.
+  if (!isMyMessage() || message.parent_id) return null;
+
+  return (
+    <ContextMenuButton
+      Icon={IconInfo}
+      onClick={() => {
+        // Only the ids: the panel reads the message from the channel, so it stays current.
+        openSidePanel({
+          body: <MessageInfo cid={message.cid} messageId={message.id} />,
+          id: `message-info:${message.id}`,
+          title: 'Message info',
+        });
+        closeMenu();
+      }}
+    >
+      Info
+    </ContextMenuButton>
+  );
+};
+
+// Declared once: the base filter recomputes whenever it gets a new list. Info goes just above
+// Delete, so the destructive action stays last.
+const infoAction: MessageActionSetItem = {
+  Component: MessageInfoAction,
+  placement: 'dropdown',
+  type: 'info',
+};
+const messageActionSet = defaultMessageActionSet.flatMap((item) =>
+  'type' in item && item.type === 'delete' ? [infoAction, item] : [item],
+);
+
+const MessageActionsWithInfo = () => (
+  <MessageActions messageActionSet={messageActionSet} />
+);
+
+const overrides = { MessageActions: MessageActionsWithInfo };
+
+export const WithMessageInfoAction = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/panels/message-info/MessageInfoPanel.css b/examples/cookbook/src/recipes/panels/message-info/MessageInfoPanel.css
new file mode 100644
index 0000000000..25e6e9b6a8
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/message-info/MessageInfoPanel.css
@@ -0,0 +1,46 @@
+@layer stream-overrides {
+  .cookbook-message-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-lg);
+    padding: var(--str-chat__spacing-md);
+  }
+
+  .cookbook-message-info__message {
+    align-self: flex-end;
+    max-width: 85%;
+    margin: 0;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__chat-bg-outgoing);
+    color: var(--str-chat__chat-text-outgoing);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-message-info__list {
+    display: grid;
+    gap: var(--str-chat__spacing-sm);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .cookbook-message-info__row {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+  }
+
+  .cookbook-message-info__name {
+    flex: 1;
+    min-width: 0;
+    font: var(--str-chat__font-body-emphasis);
+  }
+
+  .cookbook-message-info__time,
+  .cookbook-message-info__empty {
+    margin: 0;
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/panels/message-info/MessageInfoPanel.tsx b/examples/cookbook/src/recipes/panels/message-info/MessageInfoPanel.tsx
new file mode 100644
index 0000000000..a9bdc05024
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/message-info/MessageInfoPanel.tsx
@@ -0,0 +1,122 @@
+import { useEffect, useId } from 'react';
+import type {
+  Channel,
+  ChannelStateData,
+  LocalMessage,
+  MessageReceiptsSnapshot,
+  PaginatorState,
+  UserResponse,
+} from 'stream-chat';
+import { convertTimestampToDate } from 'stream-chat';
+import { Avatar, useChatContext, useStateStore } from 'stream-chat-react';
+import { useSlotChannel } from 'stream-chat-react/slot-layout';
+import { useSidePanel } from '../../../base/SidePanel';
+import './MessageInfoPanel.css';
+
+const revisionSelector = ({ revision }: MessageReceiptsSnapshot) => ({ revision });
+const readSelector = ({ read }: ChannelStateData) => ({ read });
+const itemsSelector = ({ items }: PaginatorState<LocalMessage>) => ({ items });
+
+// Day and 24-hour time, like the message list's timestamps. The panel's own text is English, so
+// its dates are too. An app in another language passes its language here.
+const timeFormat = new Intl.DateTimeFormat('en-US', {
+  day: 'numeric',
+  hour: '2-digit',
+  hourCycle: 'h23',
+  minute: '2-digit',
+  month: 'short',
+});
+
+type Receipt = { at?: Date; user: UserResponse };
+
+const ReceiptList = ({ receipts, title }: { receipts: Receipt[]; title: string }) => {
+  const headingId = useId();
+
+  return (
+    <section aria-labelledby={headingId} className='cookbook-message-info__section'>
+      <h3 className='cookbook-side-panel__section-title' id={headingId}>
+        {title}
+      </h3>
+      {receipts.length ? (
+        <ul className='cookbook-message-info__list'>
+          {receipts.map(({ at, user }) => (
+            <li className='cookbook-message-info__row' key={user.id}>
+              <Avatar imageUrl={user.image} size='md' userName={user.name ?? user.id} />
+              <span className='cookbook-message-info__name'>{user.name ?? user.id}</span>
+              {at && (
+                <time className='cookbook-message-info__time' dateTime={at.toISOString()}>
+                  {timeFormat.format(at)}
+                </time>
+              )}
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className='cookbook-message-info__empty'>Nobody yet</p>
+      )}
+    </section>
+  );
+};
+
+type ReceiptsProps = { channel: Channel; messageId: string };
+
+/** The message and its receipts, read from the channel, so an edit or a new receipt shows. */
+const Receipts = ({ channel, messageId }: ReceiptsProps) => {
+  const { client } = useChatContext();
+  const tracker = channel.messageReceiptsTracker;
+  // Re-renders whenever the channel's messages change, so an edited text shows.
+  useStateStore(channel.messagePaginator.state, itemsSelector);
+  // Re-renders whenever someone's read or delivered position moves.
+  useStateStore(tracker.snapshotStore, revisionSelector);
+  // The times come from each member's read state.
+  const { read } = useStateStore(channel.state, readSelector);
+
+  const message = channel.messagePaginator.getItem(messageId);
+  if (!message) return null;
+
+  const ref = { msgId: message.id, timestamp: message.created_at };
+  const isOther = (user: UserResponse) => user.id !== client.userId;
+
+  const readBy = tracker
+    .readersForMessage(ref)
+    .filter(isOther)
+    .map((user) => ({ at: convertTimestampToDate(read[user.id]?.last_read), user }));
+  const deliveredTo = tracker
+    .deliveredNotReadForMessage(ref)
+    .filter(isOther)
+    .map((user) => ({
+      at: convertTimestampToDate(read[user.id]?.last_delivered_at),
+      user,
+    }));
+
+  return (
+    <div className='cookbook-message-info'>
+      <p className='cookbook-message-info__message'>{message.text}</p>
+      <ReceiptList receipts={readBy} title='Read by' />
+      <ReceiptList receipts={deliveredTo} title='Delivered to' />
+    </div>
+  );
+};
+
+type MessageInfoProps = {
+  /** The channel the message belongs to. */
+  cid: string;
+  messageId: string;
+};
+
+/**
+ * The side panel's body for a message's receipts. It shows while the message's channel is open in
+ * the `channel` slot, and closes the side panel when the user opens another channel.
+ */
+export const MessageInfo = ({ cid, messageId }: MessageInfoProps) => {
+  const channel = useSlotChannel({ slot: 'channel' });
+  const { closeSidePanel } = useSidePanel();
+  const isMessageChannelOpen = channel?.cid === cid;
+
+  useEffect(() => {
+    if (!isMessageChannelOpen) closeSidePanel();
+  }, [closeSidePanel, isMessageChannelOpen]);
+
+  if (!channel || !isMessageChannelOpen) return null;
+  return <Receipts channel={channel} messageId={messageId} />;
+};
diff --git a/examples/cookbook/src/recipes/panels/message-info/OpenInfoFromUrl.tsx b/examples/cookbook/src/recipes/panels/message-info/OpenInfoFromUrl.tsx
new file mode 100644
index 0000000000..1dbff7e506
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/message-info/OpenInfoFromUrl.tsx
@@ -0,0 +1,34 @@
+import { findByText, useClickInTurn } from '../../../base/useClickInTurn';
+import type { ClickStep } from '../../../base/useClickInTurn';
+
+const messageId = new URLSearchParams(window.location.search).get('info');
+
+const isActionsMenuOpen = () =>
+  !!document.querySelector('.str-chat__message-actions-box--open');
+
+// Until Info shows, the message's actions menu is opened again: it may not be ready yet. A menu
+// that is already open is left alone, since clicking its toggle again would close it.
+const steps: ClickStep[] = messageId
+  ? [
+      {
+        find: () => findByText('.str-chat__message-actions-box--open button', 'Info'),
+        retry: () => {
+          if (isActionsMenuOpen()) return;
+          document
+            .querySelector<HTMLElement>(
+              `[data-message-id='${messageId}'] [data-testid='message-actions-toggle-button']`,
+            )
+            ?.click();
+        },
+      },
+    ]
+  : [];
+
+/**
+ * For the screenshot only, not part of the recipe: `?info=<message id>` opens that message's
+ * actions menu once the message is on screen and clicks Info, as a user would.
+ */
+export const OpenInfoFromUrl = () => {
+  useClickInTurn(steps);
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/panels/message-info/default.recipe.tsx b/examples/cookbook/src/recipes/panels/message-info/default.recipe.tsx
new file mode 100644
index 0000000000..337bae0116
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/message-info/default.recipe.tsx
@@ -0,0 +1,11 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { WithMessageInfoAction } from './MessageInfoAction';
+import { OpenInfoFromUrl } from './OpenInfoFromUrl';
+
+// OpenInfoFromUrl only serves the screenshot: it picks Info in a message's menu.
+const recipe: RecipeConfig = {
+  chatViewChildren: <OpenInfoFromUrl />,
+  Wrapper: WithMessageInfoAction,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/panels/message-info/demo-data.json b/examples/cookbook/src/recipes/panels/message-info/demo-data.json
new file mode 100644
index 0000000000..424ba3a76e
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/message-info/demo-data.json
@@ -0,0 +1,33 @@
+{
+  "channels": [
+    {
+      "id": "docs-v15-cb-picnic",
+      "name": "Picnic plan",
+      "members": [
+        "docs-v15-ck-cleo",
+        "docs-v15-ck-bob",
+        "docs-v15-ck-cara",
+        "docs-v15-ck-dan"
+      ],
+      "messages": [
+        {
+          "id": "docs-v15-ck-picnic-1",
+          "user": "docs-v15-ck-bob",
+          "text": "Who is up for a picnic in the park on Saturday?"
+        },
+        {
+          "id": "docs-v15-ck-picnic-2",
+          "user": "docs-v15-ck-cara",
+          "text": "Count me in! I can make sandwiches."
+        },
+        {
+          "id": "docs-v15-ck-picnic-3",
+          "user": "docs-v15-ck-cleo",
+          "text": "Great, I will bring the blanket and lemonade."
+        }
+      ],
+      "readBy": ["docs-v15-ck-bob", "docs-v15-ck-cara"],
+      "deliveredTo": ["docs-v15-ck-dan"]
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/panels/message-info/shots.json b/examples/cookbook/src/recipes/panels/message-info/shots.json
new file mode 100644
index 0000000000..4a235d30e4
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/message-info/shots.json
@@ -0,0 +1,7 @@
+[
+  {
+    "file": "message-info-panel.png",
+    "query": { "channel": "docs-v15-cb-picnic", "info": "docs-v15-ck-picnic-3" },
+    "waitFor": ".cookbook-message-info .cookbook-message-info__time"
+  }
+]
diff --git a/examples/cookbook/src/recipes/panels/saved-items-and-reminders/OpenSavedItemsFromUrl.tsx b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/OpenSavedItemsFromUrl.tsx
new file mode 100644
index 0000000000..b0d2488d1c
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/OpenSavedItemsFromUrl.tsx
@@ -0,0 +1,36 @@
+import { findByText, useClickInTurn } from '../../../base/useClickInTurn';
+import type { ClickStep } from '../../../base/useClickInTurn';
+
+const params = new URLSearchParams(window.location.search);
+const kind = params.get('kind');
+const itemId = params.get('item');
+
+// `?saved=open` clicks the Saved items button, `&kind=saved` then the Saved filter, and
+// `&item=<message id>` that item, as the user would.
+const steps: ClickStep[] =
+  params.get('saved') === 'open'
+    ? [
+        {
+          find: () => document.querySelector<HTMLElement>('.cookbook-saved-items-button'),
+        },
+        ...(kind === 'saved'
+          ? [{ find: () => findByText('.cookbook-saved-items__kind', 'Saved') }]
+          : []),
+        ...(itemId
+          ? [
+              {
+                find: () =>
+                  document.querySelector<HTMLElement>(
+                    `.cookbook-saved-item__open[data-message-id="${CSS.escape(itemId)}"]`,
+                  ),
+              },
+            ]
+          : []),
+      ]
+    : [];
+
+/** For the screenshots only, not part of the recipe: opens the saved items from the URL. */
+export const OpenSavedItemsFromUrl = () => {
+  useClickInTurn(steps);
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/panels/saved-items-and-reminders/SavedItems.css b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/SavedItems.css
new file mode 100644
index 0000000000..0715bb6b2a
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/SavedItems.css
@@ -0,0 +1,111 @@
+@layer stream-overrides {
+  .cookbook-saved-items {
+    display: flex;
+    flex-direction: column;
+    padding-block-end: var(--str-chat__spacing-md);
+  }
+
+  .cookbook-saved-items__kinds {
+    display: flex;
+    gap: var(--str-chat__spacing-xs);
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+  }
+
+  /* The kind on show looks selected. */
+  .cookbook-saved-items__kind[aria-pressed='true'] {
+    border-color: var(--str-chat__accent-primary);
+    background: var(--str-chat__background-utility-selected);
+    color: var(--str-chat__accent-primary);
+  }
+
+  .cookbook-saved-items__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .cookbook-saved-item {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-xs);
+    padding-inline-end: var(--str-chat__spacing-sm);
+    border-block-end: 1px solid var(--str-chat__border-core-subtle);
+  }
+
+  .cookbook-saved-item:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-saved-item__open {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-xxs);
+    min-width: 0;
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+    border: 0;
+    background: none;
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-default);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .cookbook-saved-item__open:focus-visible {
+    outline: 2px solid var(--str-chat__accent-primary);
+    outline-offset: -2px;
+  }
+
+  .cookbook-saved-item__action {
+    margin-block-start: var(--str-chat__spacing-sm);
+  }
+
+  .cookbook-saved-item__header {
+    display: flex;
+    align-items: baseline;
+    gap: var(--str-chat__spacing-xs);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-saved-item__author {
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-saved-item__due {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  /* An overdue reminder's time reads as a warning. */
+  .cookbook-saved-item[data-overdue] .cookbook-saved-item__due {
+    color: var(--str-chat__accent-error);
+  }
+
+  .cookbook-saved-item__overdue {
+    padding: 0 var(--str-chat__spacing-xs);
+    border-radius: var(--str-chat__radius-max);
+    background: var(--str-chat__accent-error);
+    color: var(--str-chat__text-on-accent);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-saved-items__note {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-sm);
+    margin: 0;
+    padding: var(--str-chat__spacing-md);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-saved-items__note p {
+    margin: 0;
+  }
+}
diff --git a/examples/cookbook/src/recipes/panels/saved-items-and-reminders/SavedItems.tsx b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/SavedItems.tsx
new file mode 100644
index 0000000000..26434087d7
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/SavedItems.tsx
@@ -0,0 +1,282 @@
+import { useEffect, useState } from 'react';
+import type { MouseEvent } from 'react';
+import { nsToDate } from 'stream-chat';
+import type {
+  PaginatorState,
+  ReminderManager,
+  ReminderResponseData,
+  ReminderState,
+} from 'stream-chat';
+import {
+  Button,
+  LoadingIndicator,
+  LoadMoreButton,
+  useChatContext,
+  useComponentContextIcons,
+  useMessageReminder,
+  useStateStore,
+  useWorkspaceNavigation,
+} from 'stream-chat-react';
+import './SavedItems.css';
+
+/** Which of the user's saved messages the panel lists. */
+type Kind = 'reminders' | 'saved';
+
+const KINDS: { kind: Kind; label: string }[] = [
+  { kind: 'reminders', label: 'Reminders' },
+  { kind: 'saved', label: 'Saved' },
+];
+
+/**
+ * Points the client's one reminder paginator at one kind and loads its first page. Setting
+ * `filters` or `sort` empties the paginator, so the new kind starts from its first page.
+ */
+const showKind = (reminders: ReminderManager, kind: Kind) => {
+  const { paginator } = reminders;
+  if (kind === 'reminders') {
+    // Reminders have a time: the next one due first, so overdue ones lead.
+    paginator.filters = { remind_at: { $exists: true } };
+    paginator.sort = [{ direction: 1, field: 'remind_at' }];
+  } else {
+    // Saved for later has no time: the most recently saved first.
+    paginator.filters = { remind_at: { $exists: false } };
+    paginator.sort = [{ direction: -1, field: 'created_at' }];
+  }
+  void reminders.queryNextReminders();
+};
+
+const paginatorSelector = ({
+  hasMoreTail,
+  isLoading,
+  items,
+  lastQueryError,
+}: PaginatorState<ReminderResponseData>) => ({
+  hasMoreTail,
+  isLoading,
+  items,
+  lastQueryError,
+});
+
+type ListState = ReturnType<typeof paginatorSelector>;
+
+/** The first page failed, so there is nothing to list. A failed later page keeps what loaded. */
+const failedToLoad = ({ items, lastQueryError }: ListState) =>
+  !!lastQueryError && !items?.length;
+
+/** The first page hasn't arrived yet: the paginator has no `items` before its first query ends. */
+const isFirstLoad = ({ items }: ListState) => !items;
+
+const timeLeftSelector = ({ timeLeftMs }: ReminderState) => ({ timeLeftMs });
+
+/** The reminder's time has passed. `timeLeftMs` goes negative then, and is `null` without a time. */
+const isOverdue = (timeLeftMs: number | null | undefined) =>
+  timeLeftMs != null && timeLeftMs <= 0;
+
+// Date and 24-hour time. The panel's own text is English, so its dates are too.
+const timeFormat = new Intl.DateTimeFormat('en-US', {
+  day: 'numeric',
+  hour: '2-digit',
+  hourCycle: 'h23',
+  minute: '2-digit',
+  month: 'short',
+  year: 'numeric',
+});
+
+/**
+ * The channel's name from the query's copy of it. The reminder's channel may not be loaded, so
+ * there's no `Channel` to name with `useChannelDisplayName()`.
+ */
+const channelNameOf = ({ channel }: ReminderResponseData) => {
+  const name = channel && 'name' in channel.custom ? channel.custom.name : undefined;
+  return typeof name === 'string' ? name : channel?.id;
+};
+
+/** Opens the message's channel in the layout and scrolls to the message. */
+const useOpenSavedMessage = () => {
+  const { channelManager, client } = useChatContext();
+  const { openChannel } = useWorkspaceNavigation();
+
+  return (item: ReminderResponseData, event: MouseEvent) => {
+    if (!item.channel) return;
+    // The channel the client holds, or a new instance for one it hasn't loaded yet. It replaces a
+    // channel that is being disposed, so the one it returns can always be opened.
+    const channel = client.channel(item.channel.type, item.channel.id);
+    openChannel(channel, { event });
+    channelManager.ingestChannel(channel);
+    // Highlights the message, loading the page around it and watching the channel when needed.
+    channel.messagePaginator
+      .jumpToMessage(item.message_id, { watchChannel: true })
+      .catch((error: Error) =>
+        client.notifications.addError({
+          message: 'Failed to load the channel',
+          options: { originalError: error },
+          origin: { context: { panel: 'channel' }, emitter: 'SavedItems' },
+        }),
+      );
+  };
+};
+
+/** Deletes the reminder, then drops it from the list, which only changes on its own queries. */
+const useRemoveSavedMessage = () => {
+  const { client } = useChatContext();
+
+  return async (messageId: string) => {
+    try {
+      await client.reminders.deleteReminder(messageId);
+      client.reminders.paginator.removeItem({ id: messageId });
+    } catch (error) {
+      client.notifications.addError({
+        message: 'Failed to remove the saved message',
+        options: { originalError: error as Error },
+        origin: { context: { panel: 'channel' }, emitter: 'SavedItems' },
+      });
+    }
+  };
+};
+
+type SavedItemProps = {
+  /** Takes focus when it renders, as the first item of a page Load more fetched. */
+  autoFocus?: boolean;
+  item: ReminderResponseData;
+};
+
+/** One saved message: who wrote it, where, its text, and its time when it has one. */
+const SavedItem = ({ autoFocus, item }: SavedItemProps) => {
+  const { IconBookmarkRemove, IconCheckmark } = useComponentContextIcons();
+  const openSavedMessage = useOpenSavedMessage();
+  const removeSavedMessage = useRemoveSavedMessage();
+  // The manager's `Reminder` for the message, whose timer keeps `timeLeftMs` current.
+  const reminder = useMessageReminder(item.message_id);
+  const { timeLeftMs } = useStateStore(reminder?.state, timeLeftSelector) ?? {};
+  const overdue = isOverdue(timeLeftMs);
+
+  const author = item.message?.user?.name ?? item.message?.user?.id;
+  const channelName = channelNameOf(item);
+  const remindAt = item.remind_at != null ? nsToDate(item.remind_at) : undefined;
+  const actionLabel = remindAt ? 'Mark done' : 'Remove';
+
+  return (
+    <li className='cookbook-saved-item' data-overdue={overdue || undefined}>
+      <button
+        autoFocus={autoFocus}
+        className='cookbook-saved-item__open'
+        data-message-id={item.message_id}
+        onClick={(event) => openSavedMessage(item, event)}
+        type='button'
+      >
+        <span className='cookbook-saved-item__header'>
+          <span className='cookbook-saved-item__author'>{author}</span>
+          <span className='cookbook-saved-item__channel'>{channelName}</span>
+        </span>
+        <span className='cookbook-saved-item__text'>{item.message?.text}</span>
+        {remindAt && (
+          <span className='cookbook-saved-item__due'>
+            {overdue && <span className='cookbook-saved-item__overdue'>Overdue</span>}
+            <time dateTime={remindAt.toISOString()}>{timeFormat.format(remindAt)}</time>
+          </span>
+        )}
+      </button>
+      <Button
+        appearance='ghost'
+        aria-label={`${actionLabel}: ${author} in ${channelName}`}
+        circular
+        className='cookbook-saved-item__action'
+        onClick={() => void removeSavedMessage(item.message_id)}
+        size='sm'
+        title={actionLabel}
+        variant='secondary'
+      >
+        {remindAt ? <IconCheckmark /> : <IconBookmarkRemove />}
+      </Button>
+    </li>
+  );
+};
+
+/**
+ * The side panel's body: the user's reminders or the messages they saved for later, one kind at a
+ * time from the client's reminder paginator. Load more fetches the next page.
+ */
+export const SavedItems = () => {
+  const { client } = useChatContext();
+  const { reminders } = client;
+  const state = useStateStore(reminders.paginator.state, paginatorSelector);
+  const [kind, setKind] = useState<Kind>('reminders');
+  // The index of the first item Load more fetches, which takes focus from the button it disables.
+  const [focusIndex, setFocusIndex] = useState<number>();
+
+  useEffect(() => {
+    setFocusIndex(undefined);
+    showKind(reminders, kind);
+  }, [kind, reminders]);
+
+  const renderList = () => {
+    if (failedToLoad(state)) {
+      return (
+        <div className='cookbook-saved-items__note' role='alert'>
+          <p>Couldn’t load your saved messages.</p>
+          <Button
+            appearance='outline'
+            onClick={() => showKind(reminders, kind)}
+            size='sm'
+            variant='secondary'
+          >
+            Try again
+          </Button>
+        </div>
+      );
+    }
+    if (isFirstLoad(state)) return <LoadingIndicator />;
+    if (!state.items?.length) {
+      return (
+        <p className='cookbook-saved-items__note'>
+          {kind === 'reminders'
+            ? 'No reminders. Pick Remind me in a message’s menu to set one.'
+            : 'Nothing saved. Pick Save for later in a message’s menu to keep one here.'}
+        </p>
+      );
+    }
+    return (
+      <>
+        <ul className='cookbook-saved-items__list'>
+          {state.items.map((item, index) => (
+            <SavedItem
+              autoFocus={index === focusIndex}
+              item={item}
+              key={item.message_id}
+            />
+          ))}
+        </ul>
+        {state.hasMoreTail && (
+          <LoadMoreButton
+            isLoading={state.isLoading}
+            onClick={() => {
+              setFocusIndex(state.items?.length);
+              void reminders.queryNextReminders();
+            }}
+          />
+        )}
+      </>
+    );
+  };
+
+  return (
+    <div className='cookbook-saved-items'>
+      <div aria-label='Show' className='cookbook-saved-items__kinds' role='group'>
+        {KINDS.map(({ kind: option, label }) => (
+          <Button
+            appearance='outline'
+            aria-pressed={kind === option}
+            className='cookbook-saved-items__kind'
+            key={option}
+            onClick={() => setKind(option)}
+            size='xs'
+            variant='secondary'
+          >
+            {label}
+          </Button>
+        ))}
+      </div>
+      {renderList()}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/panels/saved-items-and-reminders/SavedItemsButton.css b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/SavedItemsButton.css
new file mode 100644
index 0000000000..a70ee8f1ec
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/SavedItemsButton.css
@@ -0,0 +1,19 @@
+@layer stream-overrides {
+  /* The default header and the button share a row. */
+  .cookbook-channel-list-header {
+    display: flex;
+    align-items: center;
+    padding-inline-end: var(--str-chat__spacing-md);
+  }
+
+  .cookbook-channel-list-header__title {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* While the saved items are open, the button looks pressed. */
+  .cookbook-saved-items-button[aria-expanded='true'] {
+    background: var(--str-chat__background-utility-selected);
+    color: var(--str-chat__accent-primary);
+  }
+}
diff --git a/examples/cookbook/src/recipes/panels/saved-items-and-reminders/SavedItemsButton.tsx b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/SavedItemsButton.tsx
new file mode 100644
index 0000000000..c5ee138c4c
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/SavedItemsButton.tsx
@@ -0,0 +1,57 @@
+import type { PropsWithChildren } from 'react';
+import {
+  Button,
+  ChannelListHeader,
+  useComponentContextIcons,
+  WithComponents,
+} from 'stream-chat-react';
+import { useSidePanel } from '../../../base/SidePanel';
+import { SavedItems } from './SavedItems';
+import './SavedItemsButton.css';
+
+const SAVED_ITEMS_PANEL_ID = 'saved-items';
+
+/** The default channel list header, with a button beside it that opens and closes the saved items. */
+const ChannelListHeaderWithSavedItems = () => {
+  const { IconBookmark } = useComponentContextIcons();
+  const { closeSidePanel, openId, openSidePanel } = useSidePanel();
+  const isOpen = openId === SAVED_ITEMS_PANEL_ID;
+
+  const toggle = () =>
+    isOpen
+      ? closeSidePanel()
+      : openSidePanel({
+          body: <SavedItems />,
+          id: SAVED_ITEMS_PANEL_ID,
+          title: 'Saved items',
+        });
+
+  return (
+    <div className='cookbook-channel-list-header'>
+      <div className='cookbook-channel-list-header__title'>
+        <ChannelListHeader />
+      </div>
+      <Button
+        appearance='ghost'
+        aria-controls={isOpen ? 'cookbook-side-panel' : undefined}
+        aria-expanded={isOpen}
+        aria-label='Saved items'
+        circular
+        className='cookbook-saved-items-button'
+        onClick={toggle}
+        size='md'
+        variant='secondary'
+      >
+        <IconBookmark />
+      </Button>
+    </div>
+  );
+};
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { ChannelListHeader: ChannelListHeaderWithSavedItems };
+
+/** Adds the Saved items button to the channel list header. */
+export const WithSavedItemsButton = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/panels/saved-items-and-reminders/default.recipe.tsx b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/default.recipe.tsx
new file mode 100644
index 0000000000..b84addc762
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/default.recipe.tsx
@@ -0,0 +1,12 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { OpenSavedItemsFromUrl } from './OpenSavedItemsFromUrl';
+import { WithSavedItemsButton } from './SavedItemsButton';
+
+// A Saved items button in the channel list header that opens the user's reminders and saved
+// messages in the side panel. OpenSavedItemsFromUrl only serves the screenshots.
+const recipe: RecipeConfig = {
+  chatViewChildren: <OpenSavedItemsFromUrl />,
+  Wrapper: WithSavedItemsButton,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/panels/saved-items-and-reminders/demo-data.json b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/demo-data.json
new file mode 100644
index 0000000000..766fc3db90
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/demo-data.json
@@ -0,0 +1,52 @@
+{
+  "channels": [
+    {
+      "id": "docs-v15-cb-volunteer",
+      "name": "Volunteer day",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-bob", "docs-v15-ck-cara"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-volunteer-1",
+          "user": "docs-v15-ck-cara",
+          "text": "Please send me your shift times for the park cleanup by Friday.",
+          "reminderForCurrentUser": { "remindAt": "+2m" }
+        },
+        {
+          "id": "docs-v15-ck-volunteer-2",
+          "user": "docs-v15-ck-bob",
+          "text": "I can take the morning shift and bring the gloves."
+        },
+        {
+          "id": "docs-v15-ck-volunteer-3",
+          "user": "docs-v15-ck-cara",
+          "text": "Here is the meeting point: the main gate, next to the fountain.",
+          "reminderForCurrentUser": {}
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-band",
+      "name": "Band practice",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-bob", "docs-v15-ck-dan"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-band-1",
+          "user": "docs-v15-ck-dan",
+          "text": "The spring concert set list is due before the first rehearsal.",
+          "reminderForCurrentUser": { "remindAt": "2030-03-14T17:00:00Z" }
+        },
+        {
+          "id": "docs-v15-ck-band-2",
+          "user": "docs-v15-ck-bob",
+          "text": "I will bring the new sheet music on Thursday."
+        },
+        {
+          "id": "docs-v15-ck-band-3",
+          "user": "docs-v15-ck-dan",
+          "text": "Warm-up idea: start slow with the scales, then the chorus twice.",
+          "reminderForCurrentUser": {}
+        }
+      ]
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/panels/saved-items-and-reminders/shots.json b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/shots.json
new file mode 100644
index 0000000000..5767fa68a1
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/saved-items-and-reminders/shots.json
@@ -0,0 +1,32 @@
+[
+  {
+    "file": "saved-items-reminders.png",
+    "query": { "channel": "docs-v15-cb-general", "saved": "open" },
+    "waitFor": ".cookbook-saved-items__list, .cookbook-saved-items__note",
+    "settleMs": 1500
+  },
+  {
+    "file": "saved-items-saved.png",
+    "query": { "channel": "docs-v15-cb-general", "saved": "open", "kind": "saved" },
+    "waitFor": ".cookbook-saved-items__kind[aria-pressed=\"true\"]:last-child",
+    "clip": ".cookbook-side-panel",
+    "settleMs": 1500
+  },
+  {
+    "file": "saved-items-button.png",
+    "query": { "channel": "docs-v15-cb-general", "saved": "open" },
+    "waitFor": ".cookbook-saved-items",
+    "clip": ".cookbook-channel-list-header",
+    "padding": 8
+  },
+  {
+    "file": "saved-items-jump.png",
+    "query": {
+      "channel": "docs-v15-cb-general",
+      "saved": "open",
+      "item": "docs-v15-ck-band-1"
+    },
+    "waitFor": ".str-chat__channel [data-message-id=\"docs-v15-ck-band-1\"]",
+    "settleMs": 1500
+  }
+]
diff --git a/examples/cookbook/src/recipes/panels/threads-view/OnlyCookbookThreads.tsx b/examples/cookbook/src/recipes/panels/threads-view/OnlyCookbookThreads.tsx
new file mode 100644
index 0000000000..3db0f12ed9
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/threads-view/OnlyCookbookThreads.tsx
@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from 'react';
+import { ThreadListItem, WithComponents } from 'stream-chat-react';
+import type { ThreadListItemProps } from 'stream-chat-react';
+import { visibleChannelIds } from '../../../base/client';
+
+// The shared demo app keeps threads in channels the cookbook no longer lists, so the list shows
+// only threads whose channel is one of the cookbook's. Cookbook code, not part of the recipe.
+const CookbookThreadListItem = (props: ThreadListItemProps) =>
+  visibleChannelIds.includes(props.thread.channel.id ?? '') ? (
+    <ThreadListItem {...props} />
+  ) : null;
+
+const overrides = { ThreadListItem: CookbookThreadListItem };
+
+export const OnlyCookbookThreads = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/panels/threads-view/ScreenshotHelpers.tsx b/examples/cookbook/src/recipes/panels/threads-view/ScreenshotHelpers.tsx
new file mode 100644
index 0000000000..3decc9f0a1
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/threads-view/ScreenshotHelpers.tsx
@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import { nowNs } from 'stream-chat';
+import { useChatContext } from 'stream-chat-react';
+import demoData from './demo-data.json';
+
+// The threads the seed keeps unread for the user (`unreadForCurrentUser` in demo-data.json).
+const SEEDED_UNREAD_THREAD_IDS = demoData.channels.flatMap(({ messages }) =>
+  messages
+    .filter(
+      (message) => 'unreadForCurrentUser' in message && message.unreadForCurrentUser,
+    )
+    .map(({ id }) => id),
+);
+
+/**
+ * For the screenshots only, not part of the recipe. Opening a thread marks it read on the server,
+ * which would clear the seeded "unread" state of the threads above for every later visitor. For
+ * those threads, a thread `markReadRequest` handler marks the thread read on this device only, so
+ * the row and the thread behave as they would and the server keeps the thread unread. Every other
+ * thread is marked read as usual.
+ */
+export const MarkDemoThreadsReadLocally = () => {
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    client.config.set({
+      thread: {
+        requestHandlers: {
+          markReadRequest: async ({ options, thread }) => {
+            if (!SEEDED_UNREAD_THREAD_IDS.includes(thread.id)) {
+              return await thread.channel.markRead(options);
+            }
+            const userId = client.userId;
+            thread.state.next((current) => {
+              const ownRead = userId ? current.read[userId] : undefined;
+              if (!userId || !ownRead) return current;
+              return {
+                ...current,
+                read: {
+                  ...current.read,
+                  [userId]: { ...ownRead, lastReadAt: nowNs(), unreadMessageCount: 0 },
+                },
+              };
+            });
+            return null;
+          },
+        },
+      },
+    });
+    return () => {
+      client.config.set({ thread: { requestHandlers: { markReadRequest: undefined } } });
+    };
+  }, [client]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/panels/threads-view/ThreadRow.css b/examples/cookbook/src/recipes/panels/threads-view/ThreadRow.css
new file mode 100644
index 0000000000..9c40796aba
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/threads-view/ThreadRow.css
@@ -0,0 +1,75 @@
+@layer stream-overrides {
+  .cookbook-thread-row {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-xxs);
+    width: 100%;
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+    border: 0;
+    border-bottom: 1px solid var(--str-chat__border-core-subtle);
+    background: none;
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-body-default);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .cookbook-thread-row:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-thread-row[aria-selected='true'] {
+    background: var(--str-chat__background-utility-selected);
+  }
+
+  .cookbook-thread-row--new {
+    background: var(--str-chat__background-core-highlight);
+  }
+
+  .cookbook-thread-row__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--str-chat__spacing-xs);
+  }
+
+  .cookbook-thread-row__channel {
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-thread-row--unread .cookbook-thread-row__parent {
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-emphasis);
+  }
+
+  .cookbook-thread-row__parent,
+  .cookbook-thread-row__latest-reply {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .cookbook-thread-row__latest-reply {
+    color: var(--str-chat__text-tertiary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-thread-row__author {
+    margin-inline-end: var(--str-chat__spacing-xxs);
+    font-weight: inherit;
+  }
+
+  .cookbook-thread-row__author::after {
+    content: ':';
+  }
+
+  .cookbook-thread-row__footer {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+    margin-block-start: var(--str-chat__spacing-xxs);
+    color: var(--str-chat__text-link);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+}
diff --git a/examples/cookbook/src/recipes/panels/threads-view/ThreadRow.tsx b/examples/cookbook/src/recipes/panels/threads-view/ThreadRow.tsx
new file mode 100644
index 0000000000..04dd6624e2
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/threads-view/ThreadRow.tsx
@@ -0,0 +1,111 @@
+import { useCallback, useEffect } from 'react';
+import type { MessagePaginatorAggregateState, ThreadState } from 'stream-chat';
+import type { ThreadListItemUIProps } from 'stream-chat-react';
+import {
+  AvatarStack,
+  Badge,
+  useChannelPreviewInfo,
+  useChatContext,
+  useStateStore,
+  useThreadListItemContext,
+  useWorkspaceNavigation,
+} from 'stream-chat-react';
+import './ThreadRow.css';
+
+const latestReplySelector = ({ latestMessage }: MessagePaginatorAggregateState) => ({
+  latestReply: latestMessage,
+});
+
+/**
+ * One row of the thread list: the channel, the message that started the thread, its latest reply,
+ * who takes part, and how many replies the user hasn't read.
+ */
+export const ThreadRow = ({ resetHighlighting }: ThreadListItemUIProps) => {
+  const { client } = useChatContext();
+  // ThreadListItem always provides the row's thread.
+  const thread = useThreadListItemContext()!;
+  const { isThreadActive, openThread } = useWorkspaceNavigation();
+
+  const threadSelector = useCallback(
+    (state: ThreadState) => ({
+      channel: state.channel,
+      parentMessage: state.parentMessage,
+      participants: state.participants,
+      replyCount: state.replyCount,
+      unreadCount: state.read[client.userId ?? '']?.unreadMessageCount ?? 0,
+    }),
+    [client],
+  );
+  const { channel, parentMessage, participants, replyCount, unreadCount } = useStateStore(
+    thread.state,
+    threadSelector,
+  );
+  const { latestReply } = useStateStore(
+    thread.messagePaginator.aggregateState,
+    latestReplySelector,
+  );
+  const { displayTitle } = useChannelPreviewInfo({ channel });
+
+  const participantInfo = (participants ?? []).map(({ user }) => ({
+    id: user?.id,
+    imageUrl: user?.image,
+    userName: user?.name ?? user?.id,
+  }));
+  const isActive = isThreadActive(thread.id);
+
+  // A thread that a reload just brought into the list is highlighted for two seconds.
+  useEffect(() => {
+    if (!resetHighlighting) return;
+    const timeout = setTimeout(resetHighlighting, 2000);
+    return () => clearTimeout(timeout);
+  }, [resetHighlighting]);
+
+  const className = [
+    'cookbook-thread-row',
+    unreadCount > 0 && 'cookbook-thread-row--unread',
+    resetHighlighting && 'cookbook-thread-row--new',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    // role, aria-selected and data-thread-id: what ThreadList's arrow-key navigation looks for.
+    <button
+      aria-selected={isActive}
+      className={className}
+      data-thread-id={thread.id}
+      onClick={(event) =>
+        openThread(thread, { additive: event.ctrlKey || event.metaKey })
+      }
+      role='option'
+      type='button'
+    >
+      <span className='cookbook-thread-row__header'>
+        <span className='cookbook-thread-row__channel'># {displayTitle}</span>
+        {unreadCount > 0 && (
+          <Badge size='sm' variant='primary'>
+            {unreadCount}
+          </Badge>
+        )}
+      </span>
+      <span className='cookbook-thread-row__parent'>
+        <span className='cookbook-thread-row__author'>
+          {parentMessage.user?.name ?? parentMessage.user?.id}
+        </span>
+        {parentMessage.text}
+      </span>
+      {latestReply && (
+        <span className='cookbook-thread-row__latest-reply'>
+          <span className='cookbook-thread-row__author'>
+            {latestReply.user?.name ?? latestReply.user?.id}
+          </span>
+          {latestReply.text}
+        </span>
+      )}
+      <span className='cookbook-thread-row__footer'>
+        <AvatarStack displayInfo={participantInfo} size='sm' />
+        {replyCount === 1 ? '1 reply' : `${replyCount} replies`}
+      </span>
+    </button>
+  );
+};
diff --git a/examples/cookbook/src/recipes/panels/threads-view/ThreadsView.css b/examples/cookbook/src/recipes/panels/threads-view/ThreadsView.css
new file mode 100644
index 0000000000..4f3ec39b73
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/threads-view/ThreadsView.css
@@ -0,0 +1,6 @@
+@layer stream-overrides {
+  /* As wide as the channel list it replaces. */
+  .str-chat {
+    --str-chat__thread-list-width: 320px;
+  }
+}
diff --git a/examples/cookbook/src/recipes/panels/threads-view/ThreadsView.tsx b/examples/cookbook/src/recipes/panels/threads-view/ThreadsView.tsx
new file mode 100644
index 0000000000..5d3154db69
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/threads-view/ThreadsView.tsx
@@ -0,0 +1,40 @@
+import {
+  MessageComposer,
+  MessageList,
+  ThreadHeader,
+  ThreadList,
+  useThreadContext,
+  WithComponents,
+} from 'stream-chat-react';
+import {
+  ChatViewEmptyPlaceholder,
+  ThreadSlot,
+  useActiveThread,
+} from 'stream-chat-react/slot-layout';
+import { ThreadRow } from './ThreadRow';
+import './ThreadsView.css';
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { ThreadListItemUI: ThreadRow };
+
+// Marks the open thread as on screen, so its new replies are marked read.
+const ActiveThread = () => {
+  const thread = useThreadContext();
+  useActiveThread({ activeThread: thread });
+  return null;
+};
+
+/** The user's threads in place of the channel list, and the one picked beside them. */
+export const ThreadsView = () => (
+  <>
+    <WithComponents overrides={overrides}>
+      <ThreadList />
+    </WithComponents>
+    <ThreadSlot fallback={<ChatViewEmptyPlaceholder />} slot='thread'>
+      <ActiveThread />
+      <ThreadHeader />
+      <MessageList />
+      <MessageComposer />
+    </ThreadSlot>
+  </>
+);
diff --git a/examples/cookbook/src/recipes/panels/threads-view/default.recipe.tsx b/examples/cookbook/src/recipes/panels/threads-view/default.recipe.tsx
new file mode 100644
index 0000000000..c8572acc63
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/threads-view/default.recipe.tsx
@@ -0,0 +1,54 @@
+import { ChatView } from 'stream-chat-react/slot-layout';
+import type { RecipeConfig } from '../../../base/recipe';
+import type { ClickStep } from '../../../base/useClickInTurn';
+import { useClickInTurn } from '../../../base/useClickInTurn';
+import { OnlyCookbookThreads } from './OnlyCookbookThreads';
+import { MarkDemoThreadsReadLocally } from './ScreenshotHelpers';
+import { ThreadsView } from './ThreadsView';
+
+// For the screenshots: `?view=threads` clicks the Threads button, and `&row=<parent message id>`
+// then clicks that thread's row, as the user would.
+const params = new URLSearchParams(window.location.search);
+const row = params.get('row');
+const clickSteps: ClickStep[] =
+  params.get('view') === 'threads'
+    ? [
+        {
+          find: () =>
+            document.querySelector<HTMLElement>(
+              '.str-chat__chat-view__selector-button-container:nth-child(2) button',
+            ),
+        },
+        ...(row
+          ? [
+              {
+                find: () =>
+                  document.querySelector<HTMLElement>(
+                    `.cookbook-thread-row[data-thread-id="${CSS.escape(row)}"]`,
+                  ),
+              },
+            ]
+          : []),
+      ]
+    : [];
+
+const OpenThreadsFromUrl = () => {
+  useClickInTurn(clickSteps);
+  return null;
+};
+
+const recipe: RecipeConfig = {
+  chatViewChildren: (
+    <>
+      <ChatView.Selector />
+      <OpenThreadsFromUrl />
+      <MarkDemoThreadsReadLocally />
+    </>
+  ),
+  // A threads layout with one slot for the picked thread, beside the base app's channels layout.
+  layouts: [{ id: 'threads', slots: ['thread'] }],
+  views: { threads: <ThreadsView /> },
+  Wrapper: OnlyCookbookThreads,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/panels/threads-view/demo-data.json b/examples/cookbook/src/recipes/panels/threads-view/demo-data.json
new file mode 100644
index 0000000000..eeb3be9f76
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/threads-view/demo-data.json
@@ -0,0 +1,77 @@
+{
+  "channels": [
+    {
+      "id": "docs-v15-cb-hiking",
+      "name": "Hiking club",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-bob", "docs-v15-ck-dan"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-hiking-1",
+          "user": "docs-v15-ck-bob",
+          "text": "Which trail should we take on Sunday?",
+          "unreadForCurrentUser": true
+        },
+        {
+          "id": "docs-v15-ck-hiking-1-r1",
+          "user": "docs-v15-ck-cleo",
+          "parent": "docs-v15-ck-hiking-1",
+          "text": "The lake loop sounds good to me."
+        },
+        {
+          "id": "docs-v15-ck-hiking-1-r2",
+          "user": "docs-v15-ck-dan",
+          "parent": "docs-v15-ck-hiking-1",
+          "text": "Same here, it is shorter and has a picnic spot."
+        },
+        {
+          "id": "docs-v15-ck-hiking-1-r3",
+          "user": "docs-v15-ck-bob",
+          "parent": "docs-v15-ck-hiking-1",
+          "text": "Lake loop it is. Meet at the car park at nine?"
+        },
+        {
+          "id": "docs-v15-ck-hiking-2",
+          "user": "docs-v15-ck-dan",
+          "text": "Does anyone have a spare water bottle?"
+        },
+        {
+          "id": "docs-v15-ck-hiking-2-r1",
+          "user": "docs-v15-ck-cleo",
+          "parent": "docs-v15-ck-hiking-2",
+          "text": "I have two, I will bring one for you."
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-bake-sale",
+      "name": "Bake sale",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-cara", "docs-v15-ck-dan"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-bake-sale-1",
+          "user": "docs-v15-ck-cara",
+          "text": "What should we bake for Friday?",
+          "unreadForCurrentUser": true
+        },
+        {
+          "id": "docs-v15-ck-bake-sale-1-r1",
+          "user": "docs-v15-ck-cleo",
+          "parent": "docs-v15-ck-bake-sale-1",
+          "text": "Lemon bars? They travel well."
+        },
+        {
+          "id": "docs-v15-ck-bake-sale-1-r2",
+          "user": "docs-v15-ck-dan",
+          "parent": "docs-v15-ck-bake-sale-1",
+          "text": "Cookies too, they always sell first."
+        },
+        {
+          "id": "docs-v15-ck-bake-sale-1-r3",
+          "user": "docs-v15-ck-cara",
+          "parent": "docs-v15-ck-bake-sale-1",
+          "text": "Great, I will put up a sign-up sheet."
+        }
+      ]
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/panels/threads-view/shots.json b/examples/cookbook/src/recipes/panels/threads-view/shots.json
new file mode 100644
index 0000000000..1a07ba1d1b
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/threads-view/shots.json
@@ -0,0 +1,14 @@
+[
+  {
+    "file": "threads-view.png",
+    "query": { "view": "threads" },
+    "waitFor": ".cookbook-thread-row[data-thread-id=\"docs-v15-ck-design-4\"]",
+    "settleMs": 1500
+  },
+  {
+    "file": "threads-view-open-thread.png",
+    "query": { "view": "threads", "row": "docs-v15-ck-design-4" },
+    "waitFor": ".str-chat__chat-view__threads .str-chat__thread-container .str-chat__message-list",
+    "settleMs": 1500
+  }
+]
diff --git a/examples/cookbook/src/recipes/panels/user-details/MessageListWithUserDetails.tsx b/examples/cookbook/src/recipes/panels/user-details/MessageListWithUserDetails.tsx
new file mode 100644
index 0000000000..ba8228b895
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/user-details/MessageListWithUserDetails.tsx
@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import { MessageList } from 'stream-chat-react';
+import type { MessageListProps } from 'stream-chat-react';
+import { useSidePanel } from '../../../base/SidePanel';
+
+/**
+ * A message list whose avatars and user mentions open the user's profile in the side panel.
+ * Opening another user replaces the one shown.
+ */
+export const MessageListWithUserDetails = () => {
+  const { openUserProfile } = useSidePanel();
+
+  const handlers = useMemo(
+    (): Pick<MessageListProps, 'onMentionsClick' | 'onUserClick'> => ({
+      // Runs for a click anywhere in a message that mentions someone: only a click on a user
+      // mention, which carries the user's id, opens a profile.
+      onMentionsClick: (event) => {
+        const mention = (event.target as HTMLElement).closest<HTMLElement>(
+          '[data-user-id]',
+        );
+        if (mention?.dataset.userId) openUserProfile(mention.dataset.userId);
+      },
+      onUserClick: (_event, user) => openUserProfile(user.id),
+    }),
+    [openUserProfile],
+  );
+
+  return <MessageList {...handlers} />;
+};
diff --git a/examples/cookbook/src/recipes/panels/user-details/OpenProfileFromUrl.tsx b/examples/cookbook/src/recipes/panels/user-details/OpenProfileFromUrl.tsx
new file mode 100644
index 0000000000..2916095f3e
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/user-details/OpenProfileFromUrl.tsx
@@ -0,0 +1,24 @@
+import { useClickInTurn } from '../../../base/useClickInTurn';
+import type { ClickStep } from '../../../base/useClickInTurn';
+
+const name = new URLSearchParams(window.location.search).get('profile');
+
+const steps: ClickStep[] = name
+  ? [
+      {
+        find: () =>
+          document.querySelector<HTMLElement>(
+            `.str-chat__channel .str-chat__message .str-chat__avatar[title="${CSS.escape(name)}"]`,
+          ),
+      },
+    ]
+  : [];
+
+/**
+ * For the screenshots only, not part of the recipe. `?profile=<name>` clicks that person's avatar
+ * on their first message in the channel, once it's on screen.
+ */
+export const OpenProfileFromUrl = () => {
+  useClickInTurn(steps);
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/panels/user-details/UserDetailsPanel.css b/examples/cookbook/src/recipes/panels/user-details/UserDetailsPanel.css
new file mode 100644
index 0000000000..fdefe703d6
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/user-details/UserDetailsPanel.css
@@ -0,0 +1,59 @@
+@layer stream-overrides {
+  .cookbook-user-details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-md);
+    padding: var(--str-chat__spacing-xl) var(--str-chat__spacing-md);
+  }
+
+  .cookbook-user-details__identity {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--str-chat__spacing-xxs);
+    text-align: center;
+  }
+
+  .cookbook-user-details__name {
+    margin: var(--str-chat__spacing-xs) 0 0;
+    font: var(--str-chat__font-heading-md);
+  }
+
+  .cookbook-user-details__presence,
+  .cookbook-user-details__note {
+    margin: 0;
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-user-details__note {
+    text-align: center;
+  }
+
+  .cookbook-user-details__channels {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .cookbook-user-details__channel {
+    width: 100%;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border: 0;
+    border-radius: var(--str-chat__radius-lg);
+    background: none;
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-default);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .cookbook-user-details__channel:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-user-details__channel:focus-visible {
+    outline: 2px solid var(--str-chat__accent-primary);
+    outline-offset: -2px;
+  }
+}
diff --git a/examples/cookbook/src/recipes/panels/user-details/UserDetailsPanel.tsx b/examples/cookbook/src/recipes/panels/user-details/UserDetailsPanel.tsx
new file mode 100644
index 0000000000..b6c66eff73
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/user-details/UserDetailsPanel.tsx
@@ -0,0 +1,186 @@
+import { useEffect, useState } from 'react';
+import { convertTimestampToDate } from 'stream-chat';
+import type { Channel, ChannelManagerState, UserResponse } from 'stream-chat';
+import {
+  Avatar,
+  Button,
+  useChannelDisplayName,
+  useChatContext,
+  useComponentContextIcons,
+  useStateStore,
+  useWorkspaceNavigation,
+} from 'stream-chat-react';
+import { findDirectConversation } from './directConversation';
+import './UserDetailsPanel.css';
+
+/**
+ * The user as the client knows them, kept current: the client updates `client.state.users` on
+ * every presence change and profile update of a user it has loaded, and the panel re-reads it then.
+ */
+const useUser = (userId: string): UserResponse | undefined => {
+  const { client } = useChatContext();
+  const [user, setUser] = useState(() => client.state.users[userId]);
+
+  useEffect(() => {
+    setUser(client.state.users[userId]);
+    const update = (event: { user?: { id: string } }) => {
+      if (event.user?.id !== userId) return;
+      // A copy, so the panel renders again; nothing until the client has loaded the user.
+      const loaded = client.state.users[userId];
+      if (loaded) setUser({ ...loaded });
+    };
+    const presence = client.on('user.presence.changed', update);
+    const updated = client.on('user.updated', update);
+    return () => {
+      presence.unsubscribe();
+      updated.unsubscribe();
+    };
+  }, [client, userId]);
+
+  return user;
+};
+
+const paginatorsSelector = ({ paginators }: ChannelManagerState) => ({ paginators });
+
+/**
+ * The channels the user's channel lists hold, each once, kept current as the lists load and
+ * change. They're the channels the client has loaded for the user, so finding them sends no query.
+ */
+const useListedChannels = (): Channel[] => {
+  const { channelManager } = useChatContext();
+  const { paginators } = useStateStore(channelManager.state, paginatorsSelector);
+  const [channels, setChannels] = useState<Channel[]>([]);
+
+  useEffect(() => {
+    const update = () =>
+      setChannels([...new Set(paginators.flatMap((paginator) => paginator.items ?? []))]);
+    update();
+    const unsubscribers = paginators.map((paginator) =>
+      paginator.state.subscribe(update),
+    );
+    return () => unsubscribers.forEach((unsubscribe) => unsubscribe());
+  }, [paginators]);
+
+  return channels;
+};
+
+// The panel's own text is English, so its dates are too. An app in another language passes its
+// language here.
+const lastActiveFormat = new Intl.DateTimeFormat('en-US', {
+  dateStyle: 'medium',
+  timeStyle: 'short',
+});
+
+const presenceText = (user: UserResponse) => {
+  if (user.online) return 'Online';
+  // A nanosecond timestamp, like every timestamp on the user.
+  const lastActive = convertTimestampToDate(user.last_active);
+  return lastActive ? `Last active ${lastActiveFormat.format(lastActive)}` : 'Offline';
+};
+
+/** A channel the user and the other person are both in, as a button that opens it. */
+const SharedChannel = ({ channel }: { channel: Channel }) => {
+  const { openChannel } = useWorkspaceNavigation();
+  const name = useChannelDisplayName(channel);
+
+  return (
+    <li>
+      <button
+        className='cookbook-user-details__channel'
+        onClick={(event) => openChannel(channel, { event })}
+        type='button'
+      >
+        <span aria-hidden='true'>#</span> {name}
+      </button>
+    </li>
+  );
+};
+
+/**
+ * The side panel's body for a profile: the person's name, avatar and presence, the named channels
+ * in the user's channel lists that both of them are in, and a Send message button that opens the
+ * user's direct conversation with them.
+ */
+export const UserDetailsPanel = ({ userId }: { userId: string }) => {
+  const { IconMessageBubble } = useComponentContextIcons();
+  const { channelManager, client } = useChatContext();
+  const { openChannel } = useWorkspaceNavigation();
+  const user = useUser(userId);
+  const listedChannels = useListedChannels();
+  const [isOpening, setIsOpening] = useState(false);
+  const [note, setNote] = useState<string>();
+
+  const name = user?.name ?? userId;
+  const isMe = userId === client.userId;
+  // Named channels both of them are in, from the channel lists: the direct conversation has no name.
+  const sharedChannels = listedChannels.filter(
+    (channel) =>
+      !!channel.state.members[userId] &&
+      !!client.userId &&
+      !!channel.state.members[client.userId] &&
+      'name' in (channel.data?.custom ?? {}),
+  );
+
+  const sendMessage = async () => {
+    setIsOpening(true);
+    setNote(undefined);
+    try {
+      const conversation = await findDirectConversation(client, userId);
+      if (!conversation) {
+        setNote(`No direct conversation with ${name} yet.`);
+        return;
+      }
+      channelManager.ingestChannel(conversation);
+      openChannel(conversation);
+    } catch {
+      setNote("Couldn't open the conversation. Try again.");
+    } finally {
+      setIsOpening(false);
+    }
+  };
+
+  return (
+    <div className='cookbook-user-details'>
+      <div className='cookbook-user-details__identity'>
+        {/* The name is written out below, so the avatar is decorative. */}
+        <Avatar
+          aria-hidden
+          imageUrl={user?.image}
+          isOnline={!!user?.online}
+          role='presentation'
+          size='2xl'
+          userName={name}
+        />
+        <p className='cookbook-user-details__name'>{name}</p>
+        {user && <p className='cookbook-user-details__presence'>{presenceText(user)}</p>}
+      </div>
+      {!isMe && (
+        <Button
+          appearance='solid'
+          disabled={isOpening}
+          onClick={sendMessage}
+          size='md'
+          variant='primary'
+        >
+          <IconMessageBubble />
+          Send message
+        </Button>
+      )}
+      {note && (
+        <p className='cookbook-user-details__note' role='status'>
+          {note}
+        </p>
+      )}
+      {!isMe && !!sharedChannels.length && (
+        <section className='cookbook-user-details__section'>
+          <h3 className='cookbook-side-panel__section-title'>Shared channels</h3>
+          <ul className='cookbook-user-details__channels'>
+            {sharedChannels.map((channel) => (
+              <SharedChannel channel={channel} key={channel.cid} />
+            ))}
+          </ul>
+        </section>
+      )}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/panels/user-details/default.recipe.tsx b/examples/cookbook/src/recipes/panels/user-details/default.recipe.tsx
new file mode 100644
index 0000000000..4df7d988e0
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/user-details/default.recipe.tsx
@@ -0,0 +1,17 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { SimulatePresence } from '../../channel-list/members-and-online-status/SimulatePresence';
+import { MessageListWithUserDetails } from './MessageListWithUserDetails';
+import { OpenProfileFromUrl } from './OpenProfileFromUrl';
+import { UserDetailsPanel } from './UserDetailsPanel';
+
+// A profile in the side panel, opened from an avatar or a mention in the channel or the thread.
+// SimulatePresence and OpenProfileFromUrl only serve the screenshots: they bring Bob online and
+// open his profile.
+const recipe: RecipeConfig = {
+  chatViewChildren: <OpenProfileFromUrl />,
+  MessageList: MessageListWithUserDetails,
+  sidePanelProps: { UserProfile: UserDetailsPanel },
+  Wrapper: SimulatePresence,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/panels/user-details/directConversation.ts b/examples/cookbook/src/recipes/panels/user-details/directConversation.ts
new file mode 100644
index 0000000000..dba8e9a5cd
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/user-details/directConversation.ts
@@ -0,0 +1,19 @@
+import type { StreamChat } from 'stream-chat';
+
+/**
+ * The user's direct conversation with another user, if they have one: a channel with only the two
+ * of them and no name of its own. The query only reads: it creates nothing, and it watches what it
+ * finds, so the conversation opens with its history and receives events.
+ */
+export const findDirectConversation = async (client: StreamChat, userId: string) => {
+  const channels = await client.queryChannelsAndHydrate({
+    // Exactly the two of them: both are members, and there are two members. The server doesn't
+    // take `$eq` on `members`.
+    filter_conditions: {
+      $and: [{ members: { $in: [client.userId ?? ''] } }, { members: { $in: [userId] } }],
+      member_count: 2,
+      type: 'messaging',
+    },
+  });
+  return channels.find((channel) => !('name' in (channel.data?.custom ?? {})));
+};
diff --git a/examples/cookbook/src/recipes/panels/user-details/shots.json b/examples/cookbook/src/recipes/panels/user-details/shots.json
new file mode 100644
index 0000000000..b9b94c7ecb
--- /dev/null
+++ b/examples/cookbook/src/recipes/panels/user-details/shots.json
@@ -0,0 +1,29 @@
+[
+  {
+    "file": "user-details-panel.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "online",
+      "online": "docs-v15-ck-bob",
+      "profile": "Bob"
+    },
+    "waitFor": ".cookbook-user-details__presence",
+    "settleMs": 1500
+  },
+  {
+    "file": "user-details-panel-with-thread.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "thread": "docs-v15-ck-design-4",
+      "simulate": "online",
+      "online": "docs-v15-ck-bob",
+      "profile": "Bob"
+    },
+    "waitFor": ".cookbook-user-details__presence",
+    "settleMs": 1500,
+    "viewport": {
+      "width": 1600,
+      "height": 720
+    }
+  }
+]
diff --git a/examples/cookbook/src/recipes/search/mentions-inbox/MentionsButton.css b/examples/cookbook/src/recipes/search/mentions-inbox/MentionsButton.css
new file mode 100644
index 0000000000..8f6885d248
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/mentions-inbox/MentionsButton.css
@@ -0,0 +1,19 @@
+@layer stream-overrides {
+  /* The default header and the button share a row. */
+  .cookbook-channel-list-header {
+    display: flex;
+    align-items: center;
+    padding-inline-end: var(--str-chat__spacing-md);
+  }
+
+  .cookbook-channel-list-header__title {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* While the mentions are open, the button looks pressed. */
+  .cookbook-mentions-button[aria-expanded='true'] {
+    background: var(--str-chat__background-utility-selected);
+    color: var(--str-chat__accent-primary);
+  }
+}
diff --git a/examples/cookbook/src/recipes/search/mentions-inbox/MentionsButton.tsx b/examples/cookbook/src/recipes/search/mentions-inbox/MentionsButton.tsx
new file mode 100644
index 0000000000..07b2e35a20
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/mentions-inbox/MentionsButton.tsx
@@ -0,0 +1,57 @@
+import type { PropsWithChildren } from 'react';
+import {
+  Button,
+  ChannelListHeader,
+  useComponentContextIcons,
+  WithComponents,
+} from 'stream-chat-react';
+import { useSidePanel } from '../../../base/SidePanel';
+import { MentionsInbox } from './MentionsInbox';
+import './MentionsButton.css';
+
+const MENTIONS_PANEL_ID = 'mentions';
+
+/** The default channel list header, with a button beside it that opens and closes the mentions. */
+const ChannelListHeaderWithMentions = () => {
+  const { IconBell } = useComponentContextIcons();
+  const { closeSidePanel, openId, openSidePanel } = useSidePanel();
+  const isOpen = openId === MENTIONS_PANEL_ID;
+
+  const toggle = () =>
+    isOpen
+      ? closeSidePanel()
+      : openSidePanel({
+          body: <MentionsInbox />,
+          id: MENTIONS_PANEL_ID,
+          title: 'Mentions',
+        });
+
+  return (
+    <div className='cookbook-channel-list-header'>
+      <div className='cookbook-channel-list-header__title'>
+        <ChannelListHeader />
+      </div>
+      <Button
+        appearance='ghost'
+        aria-controls={isOpen ? 'cookbook-side-panel' : undefined}
+        aria-expanded={isOpen}
+        aria-label='Mentions'
+        circular
+        className='cookbook-mentions-button'
+        onClick={toggle}
+        size='md'
+        variant='secondary'
+      >
+        <IconBell />
+      </Button>
+    </div>
+  );
+};
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { ChannelListHeader: ChannelListHeaderWithMentions };
+
+/** Adds the Mentions button to the channel list header. */
+export const WithMentionsButton = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/search/mentions-inbox/MentionsInbox.css b/examples/cookbook/src/recipes/search/mentions-inbox/MentionsInbox.css
new file mode 100644
index 0000000000..c53099ffde
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/mentions-inbox/MentionsInbox.css
@@ -0,0 +1,69 @@
+@layer stream-overrides {
+  .cookbook-mentions {
+    display: flex;
+    flex-direction: column;
+    padding-block-end: var(--str-chat__spacing-md);
+  }
+
+  .cookbook-mentions__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .cookbook-mention {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-xxs);
+    width: 100%;
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+    border: 0;
+    border-block-end: 1px solid var(--str-chat__border-core-subtle);
+    background: none;
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-default);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .cookbook-mention:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-mention:focus-visible {
+    outline: 2px solid var(--str-chat__accent-primary);
+    outline-offset: -2px;
+  }
+
+  .cookbook-mention__header {
+    display: flex;
+    align-items: baseline;
+    gap: var(--str-chat__spacing-xs);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-mention__author {
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-mention__time {
+    margin-inline-start: auto;
+  }
+
+  .cookbook-mentions__note {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--str-chat__spacing-sm);
+    margin: 0;
+    padding: var(--str-chat__spacing-md);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-mentions__note p {
+    margin: 0;
+  }
+}
diff --git a/examples/cookbook/src/recipes/search/mentions-inbox/MentionsInbox.tsx b/examples/cookbook/src/recipes/search/mentions-inbox/MentionsInbox.tsx
new file mode 100644
index 0000000000..b6442cf847
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/mentions-inbox/MentionsInbox.tsx
@@ -0,0 +1,185 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { MouseEvent } from 'react';
+import { formatMessage, MessageSearchSource } from 'stream-chat';
+import type { MessageResponse, SearchSourceState, StreamChat } from 'stream-chat';
+import {
+  Button,
+  getRenderTextMentionEntities,
+  LoadingIndicator,
+  LoadMoreButton,
+  MessageTimestamp,
+  renderText,
+  useChannelDisplayName,
+  useChatContext,
+  useStateStore,
+  useWorkspaceNavigation,
+} from 'stream-chat-react';
+import './MentionsInbox.css';
+
+/** The messages that mention the user, newest first, a few at a time. */
+const createMentionsSource = (client: StreamChat) =>
+  new MessageSearchSource(client, {
+    // There's no search text: the filter alone picks the messages.
+    allowEmptySearchString: true,
+    // Nothing is typed, so the source queries right away.
+    debounceMs: 0,
+    messageSearchFilters: {
+      'mentioned_users.id': { $contains: client.userId ?? '' },
+    },
+    pageSize: 3,
+  });
+
+const sourceSelector = ({
+  hasNext,
+  isLoading,
+  items,
+  lastQueryError,
+}: SearchSourceState<MessageResponse>) => ({
+  hasNext,
+  isLoading,
+  items,
+  lastQueryError,
+});
+
+type MentionsState = ReturnType<typeof sourceSelector>;
+
+/** The first page failed, so there is nothing to list. A failed later page keeps what loaded. */
+const failedToLoad = ({ items, lastQueryError }: MentionsState) =>
+  !!lastQueryError && !items?.length;
+
+/** The first page hasn't arrived yet: a source has no `items` before its first query ends. */
+const isFirstLoad = ({ items }: MentionsState) => !items;
+
+// Inline formatting, emoji and mentions only, and no links: the text sits inside the item's button.
+const allowedTagNames = ['em', 'strong', 'code', 'del', 'emoji', 'mention'];
+
+/** Opens the message's channel in the layout and scrolls to the message. */
+const useOpenMention = () => {
+  const { channelManager, client } = useChatContext();
+  const { openChannel } = useWorkspaceNavigation();
+
+  return (message: MessageResponse, event: MouseEvent) => {
+    // Message search stores every result's channel.
+    const channel = message.cid ? channelManager.get(message.cid) : undefined;
+    if (!channel || channel.pendingDisposal) return;
+    openChannel(channel, { event });
+    channelManager.ingestChannel(channel);
+    // Highlights the message, loading the page around it and watching the channel when needed.
+    channel.messagePaginator
+      .jumpToMessage(message.id, { watchChannel: true })
+      .catch((error: Error) =>
+        client.notifications.addError({
+          message: 'Failed to load the channel',
+          options: { originalError: error },
+          origin: { emitter: 'MentionsInbox' },
+        }),
+      );
+  };
+};
+
+type MentionProps = {
+  /** Takes focus when it renders, as the first item of a page Load more fetched. */
+  autoFocus?: boolean;
+  message: MessageResponse;
+};
+
+/** One mention: who wrote it, where and when, and the text with the mention highlighted. */
+const Mention = ({ autoFocus, message }: MentionProps) => {
+  const { channelManager } = useChatContext();
+  const openMention = useOpenMention();
+  const channel = message.cid ? channelManager.get(message.cid) : undefined;
+  const channelName = useChannelDisplayName(channel);
+  // Search returns the server's message; the SDK's components take the client's form of it.
+  const localMessage = useMemo(() => formatMessage(message), [message]);
+
+  return (
+    <li>
+      <button
+        autoFocus={autoFocus}
+        className='cookbook-mention'
+        data-message-id={message.id}
+        onClick={(event) => openMention(message, event)}
+        type='button'
+      >
+        <span className='cookbook-mention__header'>
+          <span className='cookbook-mention__author'>
+            {message.user?.name ?? message.user?.id}
+          </span>
+          <span className='cookbook-mention__channel'>{channelName}</span>
+          <MessageTimestamp
+            calendar
+            customClass='cookbook-mention__time'
+            message={localMessage}
+          />
+        </span>
+        <span className='cookbook-mention__text'>
+          {renderText(localMessage.text, undefined, {
+            allowedTagNames,
+            messageMentionEntities: getRenderTextMentionEntities(localMessage),
+          })}
+        </span>
+      </button>
+    </li>
+  );
+};
+
+/**
+ * The side panel's body: the messages that mention the user. It searches once when it opens, and
+ * Load more fetches the next page.
+ */
+export const MentionsInbox = () => {
+  const { client } = useChatContext();
+  const [source] = useState(() => createMentionsSource(client));
+  const state = useStateStore(source.state, sourceSelector);
+  // The index of the first item Load more fetches, which takes focus from the button it disables.
+  const [focusIndex, setFocusIndex] = useState<number>();
+
+  useEffect(() => {
+    source.activate();
+    void source.search('');
+    // Closing the panel drops a scheduled search and aborts the one in flight.
+    return () => {
+      source.cancelScheduledQuery();
+      source.deactivate();
+    };
+  }, [source]);
+
+  if (failedToLoad(state)) {
+    return (
+      <div className='cookbook-mentions__note' role='alert'>
+        <p>Couldn’t load your mentions.</p>
+        <Button
+          appearance='outline'
+          onClick={() => void source.search('')}
+          size='sm'
+          variant='secondary'
+        >
+          Try again
+        </Button>
+      </div>
+    );
+  }
+  if (isFirstLoad(state)) return <LoadingIndicator />;
+  if (!state.items?.length) {
+    return <p className='cookbook-mentions__note'>No one has mentioned you yet.</p>;
+  }
+
+  return (
+    <div className='cookbook-mentions'>
+      <ul className='cookbook-mentions__list'>
+        {state.items.map((message, index) => (
+          <Mention autoFocus={index === focusIndex} key={message.id} message={message} />
+        ))}
+      </ul>
+      {state.hasNext && (
+        <LoadMoreButton
+          isLoading={state.isLoading}
+          onClick={() => {
+            setFocusIndex(state.items?.length);
+            void source.search();
+          }}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/search/mentions-inbox/OpenMentionsFromUrl.tsx b/examples/cookbook/src/recipes/search/mentions-inbox/OpenMentionsFromUrl.tsx
new file mode 100644
index 0000000000..6963cc02e3
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/mentions-inbox/OpenMentionsFromUrl.tsx
@@ -0,0 +1,30 @@
+import { useClickInTurn } from '../../../base/useClickInTurn';
+import type { ClickStep } from '../../../base/useClickInTurn';
+
+const params = new URLSearchParams(window.location.search);
+const mentionId = params.get('mention');
+
+// `?mentions=open` clicks the Mentions button, and `&mention=<message id>` then clicks that
+// mention, as the user would.
+const steps: ClickStep[] =
+  params.get('mentions') === 'open'
+    ? [
+        { find: () => document.querySelector<HTMLElement>('.cookbook-mentions-button') },
+        ...(mentionId
+          ? [
+              {
+                find: () =>
+                  document.querySelector<HTMLElement>(
+                    `.cookbook-mention[data-message-id="${CSS.escape(mentionId)}"]`,
+                  ),
+              },
+            ]
+          : []),
+      ]
+    : [];
+
+/** For the screenshots only, not part of the recipe: opens the mentions from the URL. */
+export const OpenMentionsFromUrl = () => {
+  useClickInTurn(steps);
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/search/mentions-inbox/default.recipe.tsx b/examples/cookbook/src/recipes/search/mentions-inbox/default.recipe.tsx
new file mode 100644
index 0000000000..e312b63852
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/mentions-inbox/default.recipe.tsx
@@ -0,0 +1,12 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { WithMentionsButton } from './MentionsButton';
+import { OpenMentionsFromUrl } from './OpenMentionsFromUrl';
+
+// A Mentions button in the channel list header that opens the user's mentions in the side panel.
+// OpenMentionsFromUrl only serves the screenshots.
+const recipe: RecipeConfig = {
+  chatViewChildren: <OpenMentionsFromUrl />,
+  Wrapper: WithMentionsButton,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/search/mentions-inbox/demo-data.json b/examples/cookbook/src/recipes/search/mentions-inbox/demo-data.json
new file mode 100644
index 0000000000..fef6068a2c
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/mentions-inbox/demo-data.json
@@ -0,0 +1,74 @@
+{
+  "channels": [
+    {
+      "id": "docs-v15-cb-pottery",
+      "name": "Pottery class",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-bob", "docs-v15-ck-cara"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-pottery-1",
+          "user": "docs-v15-ck-cara",
+          "text": "@Cleo the kiln is free on Thursday evening, want a slot?",
+          "mentions": ["docs-v15-ck-cleo"]
+        },
+        {
+          "id": "docs-v15-ck-pottery-2",
+          "user": "docs-v15-ck-cleo",
+          "text": "Yes please, put me down for seven."
+        },
+        {
+          "id": "docs-v15-ck-pottery-3",
+          "user": "docs-v15-ck-bob",
+          "text": "@Cleo could you bring the glaze samples too?",
+          "mentions": ["docs-v15-ck-cleo"]
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-swim",
+      "name": "Swim team",
+      "members": ["docs-v15-ck-cleo", "docs-v15-ck-cara", "docs-v15-ck-dan"],
+      "messages": [
+        {
+          "id": "docs-v15-ck-swim-1",
+          "user": "docs-v15-ck-cara",
+          "text": "Practice moves to the outdoor pool next week."
+        },
+        {
+          "id": "docs-v15-ck-swim-2",
+          "user": "docs-v15-ck-dan",
+          "text": "Great lap times today, @Cleo! Same lane on Monday?",
+          "mentions": ["docs-v15-ck-cleo"]
+        }
+      ]
+    },
+    {
+      "id": "docs-v15-cb-quiz",
+      "name": "Quiz night",
+      "members": [
+        "docs-v15-ck-cleo",
+        "docs-v15-ck-bob",
+        "docs-v15-ck-cara",
+        "docs-v15-ck-dan"
+      ],
+      "messages": [
+        {
+          "id": "docs-v15-ck-quiz-1",
+          "user": "docs-v15-ck-bob",
+          "text": "I will book the usual table for Friday."
+        },
+        {
+          "id": "docs-v15-ck-quiz-2",
+          "user": "docs-v15-ck-cara",
+          "text": "@Cleo you were great on the music round. Want to lead it next time?",
+          "mentions": ["docs-v15-ck-cleo"]
+        },
+        {
+          "id": "docs-v15-ck-quiz-3",
+          "user": "docs-v15-ck-dan",
+          "text": "Count me in for Friday."
+        }
+      ]
+    }
+  ]
+}
diff --git a/examples/cookbook/src/recipes/search/mentions-inbox/shots.json b/examples/cookbook/src/recipes/search/mentions-inbox/shots.json
new file mode 100644
index 0000000000..17bf31a814
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/mentions-inbox/shots.json
@@ -0,0 +1,25 @@
+[
+  {
+    "file": "mentions-inbox.png",
+    "query": { "channel": "docs-v15-cb-general", "mentions": "open" },
+    "waitFor": ".cookbook-mention[data-message-id=\"docs-v15-ck-pottery-3\"]",
+    "settleMs": 1500
+  },
+  {
+    "file": "mentions-inbox-button.png",
+    "query": { "channel": "docs-v15-cb-general", "mentions": "open" },
+    "waitFor": ".cookbook-mention",
+    "clip": ".cookbook-channel-list-header",
+    "padding": 8
+  },
+  {
+    "file": "mentions-inbox-jump.png",
+    "query": {
+      "channel": "docs-v15-cb-general",
+      "mentions": "open",
+      "mention": "docs-v15-ck-swim-2"
+    },
+    "waitFor": ".str-chat__channel [data-message-id=\"docs-v15-ck-swim-2\"]",
+    "settleMs": 1500
+  }
+]
diff --git a/examples/cookbook/src/recipes/search/search-customization/CompactChannelResults.css b/examples/cookbook/src/recipes/search/search-customization/CompactChannelResults.css
new file mode 100644
index 0000000000..41988790cd
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-customization/CompactChannelResults.css
@@ -0,0 +1,30 @@
+@layer stream-overrides {
+  .cookbook-channel-result {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--str-chat__spacing-xs);
+    width: 100%;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md);
+    border: 0;
+    border-radius: var(--str-chat__radius-lg);
+    background: none;
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-default);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .cookbook-channel-result:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-channel-result__name {
+    font: var(--str-chat__font-body-emphasis);
+  }
+
+  .cookbook-channel-result__members {
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/search/search-customization/CompactChannelResults.tsx b/examples/cookbook/src/recipes/search/search-customization/CompactChannelResults.tsx
new file mode 100644
index 0000000000..f9ad9073a4
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-customization/CompactChannelResults.tsx
@@ -0,0 +1,61 @@
+import type { PropsWithChildren } from 'react';
+import type { Channel, ChannelStateData } from 'stream-chat';
+import {
+  DefaultSearchResultItems,
+  SearchSourceResultList,
+  useChannelDisplayName,
+  useChatContext,
+  useStateStore,
+  useWorkspaceNavigation,
+  WithComponents,
+} from 'stream-chat-react';
+import './CompactChannelResults.css';
+
+const memberCountSelector = ({ memberCount }: ChannelStateData) => ({
+  memberCount,
+});
+
+const CompactChannelResult = ({ item }: { item: Channel }) => {
+  const { channelManager, client } = useChatContext();
+  const { openChannel } = useWorkspaceNavigation();
+  const name = useChannelDisplayName(item);
+  const { memberCount } = useStateStore(item.state, memberCountSelector);
+
+  return (
+    <button
+      className='cookbook-channel-result'
+      onClick={(event) => {
+        openChannel(item, { event });
+        // Channel search doesn't watch its results, so watch the channel to receive its events.
+        item.watch().catch((error: Error) =>
+          client.notifications.addError({
+            message: 'Failed to load the channel',
+            options: { originalError: error },
+            origin: { emitter: 'CompactChannelResult' },
+          }),
+        );
+        // Add the channel to the channel lists whose filters it matches.
+        channelManager.ingestChannel(item);
+      }}
+      role='option'
+      type='button'
+    >
+      <span className='cookbook-channel-result__name'># {name}</span>
+      <span className='cookbook-channel-result__members'>{memberCount} members</span>
+    </button>
+  );
+};
+
+const searchResultItems = {
+  ...DefaultSearchResultItems,
+  channels: CompactChannelResult,
+};
+
+const ResultList = () => <SearchSourceResultList SearchResultItems={searchResultItems} />;
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { SearchSourceResultList: ResultList };
+
+export const WithCompactChannelResults = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/search/search-customization/SidebarSearch.tsx b/examples/cookbook/src/recipes/search/search-customization/SidebarSearch.tsx
new file mode 100644
index 0000000000..95910492a7
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-customization/SidebarSearch.tsx
@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from 'react';
+import { Search, WithComponents } from 'stream-chat-react';
+
+const SidebarSearch = () => (
+  <Search
+    directMessagingChannelType='team'
+    exitSearchOnInputBlur
+    placeholder='Search teammates, channels and messages'
+  />
+);
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { Search: SidebarSearch };
+
+export const WithSidebarSearch = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/search/search-customization/SimulateSearch.tsx b/examples/cookbook/src/recipes/search/search-customization/SimulateSearch.tsx
new file mode 100644
index 0000000000..b35c9152af
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-customization/SimulateSearch.tsx
@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { useChatContext } from 'stream-chat-react';
+
+/**
+ * `?simulate=search&q=<text>` runs a search for `text` once the app loads, as if the user had
+ * typed it into the search bar, for the screenshots of search results.
+ */
+export const SimulateSearch = () => {
+  const { searchController } = useChatContext();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const query = params.get('q');
+    // StrictMode runs effects twice; one search is enough.
+    if (params.get('simulate') !== 'search' || !query) return;
+    if (searchController.searchQuery === query) return;
+    searchController.activate();
+    void searchController.search(query);
+  }, [searchController]);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/search/search-customization/Workspace.css b/examples/cookbook/src/recipes/search/search-customization/Workspace.css
new file mode 100644
index 0000000000..8c3660f0ff
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-customization/Workspace.css
@@ -0,0 +1,49 @@
+@layer stream-overrides {
+  /* The top bar spans the view. The channel lists, the channel and the thread share the row below it. */
+  .cookbook-workspace {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .cookbook-workspace__top-bar {
+    position: relative;
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+    border-bottom: 1px solid var(--str-chat__border-core-default);
+    background: var(--str-chat__background-core-elevation-1);
+  }
+
+  .cookbook-workspace__body {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .cookbook-workspace__sidebar {
+    flex: 0 0 var(--str-chat__channel-list-width);
+    overflow-y: auto;
+    border-inline-end: 1px solid var(--str-chat__border-core-default);
+    background: var(--str-chat__background-core-elevation-1);
+  }
+
+  /* cookbook-allow-layout: the SDK has no variable for the width of a thread beside a channel. */
+  .cookbook-workspace__body > .str-chat__thread-container {
+    flex: 0 0 400px;
+  }
+
+  /* cookbook-allow-layout: the SDK renders the results in the flow under the search bar, with no
+     dropdown mode; this rule opens them over the content below it. */
+  .cookbook-workspace__top-bar .str-chat__search-results {
+    position: absolute;
+    z-index: 10;
+    top: 100%;
+    inset-inline: 0;
+    max-height: 60vh;
+    overflow-y: auto;
+    border-bottom: 1px solid var(--str-chat__border-core-default);
+    background: var(--str-chat__background-core-elevation-1);
+    box-shadow: var(--str-chat__box-shadow-2);
+  }
+}
diff --git a/examples/cookbook/src/recipes/search/search-customization/Workspace.tsx b/examples/cookbook/src/recipes/search/search-customization/Workspace.tsx
new file mode 100644
index 0000000000..4c0a68d8e6
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-customization/Workspace.tsx
@@ -0,0 +1,38 @@
+import {
+  ChannelHeader,
+  ChannelLists,
+  MessageComposer,
+  MessageList,
+  Search,
+  ThreadHeader,
+} from 'stream-chat-react';
+import { ChannelSlot, ThreadSlot } from 'stream-chat-react/slot-layout';
+import type { LayoutDescriptor } from 'stream-chat-react/slot-layout';
+import './Workspace.css';
+
+export const layouts: LayoutDescriptor[] = [
+  { id: 'channels', slots: ['channel', 'thread'] },
+];
+
+export const ChannelsView = () => (
+  <div className='cookbook-workspace'>
+    <header className='cookbook-workspace__top-bar'>
+      <Search placeholder='Search everything' />
+    </header>
+    <div className='cookbook-workspace__body'>
+      <aside className='cookbook-workspace__sidebar'>
+        <ChannelLists />
+      </aside>
+      <ChannelSlot slot='channel'>
+        <ChannelHeader />
+        <MessageList />
+        <MessageComposer />
+      </ChannelSlot>
+      <ThreadSlot slot='thread'>
+        <ThreadHeader />
+        <MessageList />
+        <MessageComposer />
+      </ThreadSlot>
+    </div>
+  </div>
+);
diff --git a/examples/cookbook/src/recipes/search/search-customization/compact-results.recipe.tsx b/examples/cookbook/src/recipes/search/search-customization/compact-results.recipe.tsx
new file mode 100644
index 0000000000..6b364e782e
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-customization/compact-results.recipe.tsx
@@ -0,0 +1,19 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { WithCompactChannelResults } from './CompactChannelResults';
+import { SimulateSearch } from './SimulateSearch';
+
+// "Customize search result items": channel results as compact rows. SimulateSearch only serves
+// the screenshot.
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithCompactChannelResults>
+    <SimulateSearch />
+    {children}
+  </WithCompactChannelResults>
+);
+
+const recipe: RecipeConfig = {
+  Wrapper,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/search/search-customization/search-props.recipe.tsx b/examples/cookbook/src/recipes/search/search-customization/search-props.recipe.tsx
new file mode 100644
index 0000000000..58d3edee38
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-customization/search-props.recipe.tsx
@@ -0,0 +1,7 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { WithSidebarSearch } from './SidebarSearch';
+
+// "Configure search through WithComponents": the sidebar's Search with props of its own.
+const recipe: RecipeConfig = { Wrapper: WithSidebarSearch };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/search/search-customization/shots.json b/examples/cookbook/src/recipes/search/search-customization/shots.json
new file mode 100644
index 0000000000..e278492a93
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-customization/shots.json
@@ -0,0 +1,16 @@
+[
+  {
+    "file": "search-compact-channel-results.png",
+    "variant": "compact-results",
+    "query": { "simulate": "search", "q": "g" },
+    "waitFor": ".cookbook-channel-result",
+    "clip": ".str-chat__channel-list",
+    "padding": 0
+  },
+  {
+    "file": "search-top-bar-results.png",
+    "variant": "top-bar",
+    "query": { "channel": "docs-v15-cb-design", "simulate": "search", "q": "g" },
+    "waitFor": ".str-chat__search-results .str-chat__search-result"
+  }
+]
diff --git a/examples/cookbook/src/recipes/search/search-customization/top-bar.recipe.tsx b/examples/cookbook/src/recipes/search/search-customization/top-bar.recipe.tsx
new file mode 100644
index 0000000000..6b7f471893
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-customization/top-bar.recipe.tsx
@@ -0,0 +1,20 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { SimulateSearch } from './SimulateSearch';
+import { ChannelsView, layouts } from './Workspace';
+
+// "Render search outside ChannelList": search in a top bar, the channel lists in the sidebar.
+// SimulateSearch only serves the screenshot.
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <>
+    <SimulateSearch />
+    {children}
+  </>
+);
+
+const recipe: RecipeConfig = {
+  chatViewProps: { layouts, views: { channels: <ChannelsView /> } },
+  Wrapper,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/search/search-dialog/SearchDialog.css b/examples/cookbook/src/recipes/search/search-dialog/SearchDialog.css
new file mode 100644
index 0000000000..0fae7bfd59
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-dialog/SearchDialog.css
@@ -0,0 +1,118 @@
+@layer stream-overrides {
+  .cookbook-search-dialog {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-sm);
+    width: 640px;
+    max-width: calc(100vw - 2 * var(--str-chat__spacing-md));
+    max-height: calc(100vh - 2 * var(--str-chat__spacing-xl));
+    padding: var(--str-chat__spacing-lg);
+    border-radius: var(--str-chat__radius-xl);
+    background: var(--str-chat__background-core-elevation-1);
+    box-shadow: var(--str-chat__box-shadow-4);
+    color: var(--str-chat__text-primary);
+  }
+
+  .cookbook-search-dialog__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .cookbook-search-dialog__title {
+    margin: 0;
+    font: var(--str-chat__font-heading-sm);
+  }
+
+  .cookbook-search-dialog__close {
+    padding: var(--str-chat__spacing-xxxs) var(--str-chat__spacing-xs);
+    border: 1px solid var(--str-chat__border-core-subtle);
+    border-radius: var(--str-chat__radius-sm);
+    background: none;
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+    cursor: pointer;
+  }
+
+  .cookbook-search-dialog__input {
+    width: 100%;
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-full);
+    background: var(--str-chat__background-core-surface-subtle);
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-body-default);
+  }
+
+  .cookbook-search-dialog__input:focus-visible {
+    border-color: var(--str-chat__accent-primary);
+    outline: none;
+  }
+
+  .cookbook-search-dialog__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm) var(--str-chat__spacing-lg);
+  }
+
+  .cookbook-search-dialog__options {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  /* A legend can't sit in a flex row, so it floats at its start. */
+  .cookbook-search-dialog__legend {
+    float: left;
+    margin-inline-end: var(--str-chat__spacing-xxs);
+    padding: 0;
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-search-dialog__chip {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xxs);
+    padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-sm);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-full);
+    font: var(--str-chat__font-caption-emphasis);
+    cursor: pointer;
+  }
+
+  .cookbook-search-dialog__chip:has(input:checked) {
+    border-color: var(--str-chat__accent-primary);
+    background: var(--str-chat__background-utility-selected);
+  }
+
+  .cookbook-search-dialog__chip input {
+    margin: 0;
+    accent-color: var(--str-chat__accent-primary);
+  }
+
+  .cookbook-search-dialog__filters-button {
+    margin-inline-start: auto;
+    padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-sm);
+    border: 0;
+    border-radius: var(--str-chat__radius-full);
+    background: none;
+    color: var(--str-chat__text-link);
+    font: var(--str-chat__font-caption-emphasis);
+    cursor: pointer;
+  }
+
+  .cookbook-search-dialog__filters-button[aria-expanded='true'] {
+    background: var(--str-chat__background-utility-selected);
+  }
+
+  .cookbook-search-dialog__hint {
+    margin: 0;
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/search/search-dialog/SearchDialog.tsx b/examples/cookbook/src/recipes/search/search-dialog/SearchDialog.tsx
new file mode 100644
index 0000000000..84ed2ca688
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-dialog/SearchDialog.tsx
@@ -0,0 +1,180 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import type { KeyboardEvent } from 'react';
+import type { SearchControllerState, SearchSource, SearchSourceState } from 'stream-chat';
+import { GlobalModal, useChatContext, useStateStore } from 'stream-chat-react';
+import { searchAgain } from './searchController';
+import { SearchFilters } from './SearchFilters';
+import { SearchResults } from './SearchResults';
+import type { ResultsLayout } from './SearchResults';
+import './SearchDialog.css';
+
+const sourceLabels: Record<string, string> = {
+  channels: 'Channels',
+  messages: 'Messages',
+  users: 'People',
+};
+
+const controllerSelector = ({ searchQuery, sources }: SearchControllerState) => ({
+  searchQuery,
+  sources,
+});
+
+const isActiveSelector = ({ isActive }: SearchSourceState) => ({ isActive });
+
+const SourceToggle = ({ source }: { source: SearchSource }) => {
+  const { searchController } = useChatContext();
+  const { isActive } = useStateStore(source.state, isActiveSelector);
+  // The last active source can't be turned off.
+  const isLastActive = isActive && searchController.activeSources.length === 1;
+
+  return (
+    <label className='cookbook-search-dialog__chip'>
+      <input
+        checked={isActive}
+        disabled={isLastActive}
+        onChange={(event) => {
+          if (event.target.checked) {
+            searchController.activateSource(source.type);
+            // Activating a source doesn't search it, so run the current text in it.
+            searchAgain(searchController, source);
+          } else {
+            searchController.deactivateSource(source.type);
+          }
+        }}
+        type='checkbox'
+      />
+      {sourceLabels[source.type] ?? source.type}
+    </label>
+  );
+};
+
+/** Moves the focus between the search input and the results with the arrow keys. */
+const moveFocus = (
+  event: KeyboardEvent<HTMLDivElement>,
+  input: HTMLInputElement | null,
+) => {
+  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+  const results = [
+    ...event.currentTarget.querySelectorAll<HTMLElement>('[data-search-result]'),
+  ];
+  const index = results.indexOf(event.target as HTMLElement);
+  if (!results.length || (index === -1 && event.target !== input)) return;
+  event.preventDefault();
+  const next =
+    event.key === 'ArrowDown' ? Math.min(index + 1, results.length - 1) : index - 1;
+  (next < 0 ? input : results[next])?.focus();
+};
+
+type SearchDialogProps = {
+  onClose: () => void;
+  open: boolean;
+};
+
+export const SearchDialog = ({ onClose, open }: SearchDialogProps) => {
+  const { searchController } = useChatContext();
+  const { searchQuery, sources } = useStateStore(
+    searchController.state,
+    controllerSelector,
+  );
+  const [layout, setLayout] = useState<ResultsLayout>('grouped');
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const id = useId();
+
+  // No source is active the first time the dialog opens, so it turns them all on. Later, the
+  // sources stay as the user left them: SearchController.exit() doesn't turn them off. The dialog
+  // doesn't call SearchController.activate(): that marks search as open, and ChannelNavigation
+  // would hide the channel lists behind the dialog.
+  useEffect(() => {
+    if (!open || searchController.activeSources.length) return;
+    searchController.sources.forEach((source) =>
+      searchController.activateSource(source.type),
+    );
+  }, [open, searchController]);
+
+  const close = () => {
+    // Empties the text and every source's results, and cancels the queries in flight.
+    searchController.exit();
+    onClose();
+  };
+
+  return (
+    <GlobalModal aria-labelledby={`${id}-title`} onClose={close} open={open}>
+      <div
+        className='cookbook-search-dialog'
+        onKeyDown={(event) => moveFocus(event, inputRef.current)}
+      >
+        <div className='cookbook-search-dialog__header'>
+          <h2 className='cookbook-search-dialog__title' id={`${id}-title`}>
+            Search
+          </h2>
+          <button
+            aria-keyshortcuts='Escape'
+            className='cookbook-search-dialog__close'
+            onClick={close}
+            type='button'
+          >
+            Close
+          </button>
+        </div>
+        {/* The dialog's content mounts a render after the modal opens, so the input takes the
+            focus itself. */}
+        <input
+          aria-label='Search channels, people and messages'
+          autoFocus
+          className='cookbook-search-dialog__input'
+          onChange={(event) => {
+            const text = event.target.value;
+            if (text) void searchController.search(text);
+            // An empty text doesn't search, so clear the results instead.
+            else searchController.exit();
+          }}
+          placeholder='Search channels, people and messages'
+          ref={inputRef}
+          type='search'
+          value={searchQuery ?? ''}
+        />
+        <div className='cookbook-search-dialog__toolbar'>
+          <fieldset className='cookbook-search-dialog__options'>
+            <legend className='cookbook-search-dialog__legend'>Search in</legend>
+            {sources.map((source) => (
+              <SourceToggle key={source.type} source={source} />
+            ))}
+          </fieldset>
+          <fieldset className='cookbook-search-dialog__options'>
+            <legend className='cookbook-search-dialog__legend'>Show</legend>
+            {(['grouped', 'mixed'] as const).map((value) => (
+              <label className='cookbook-search-dialog__chip' key={value}>
+                <input
+                  checked={layout === value}
+                  name={`${id}-layout`}
+                  onChange={() => setLayout(value)}
+                  type='radio'
+                  value={value}
+                />
+                {value === 'grouped' ? 'Grouped' : 'Mixed'}
+              </label>
+            ))}
+          </fieldset>
+          <button
+            aria-controls={`${id}-filters`}
+            aria-expanded={filtersOpen}
+            className='cookbook-search-dialog__filters-button'
+            onClick={() => setFiltersOpen((isOpen) => !isOpen)}
+            type='button'
+          >
+            Filters and sort
+          </button>
+        </div>
+        {filtersOpen && <SearchFilters id={`${id}-filters`} />}
+        {searchQuery ? (
+          <SearchResults close={close} layout={layout} />
+        ) : (
+          <p className='cookbook-search-dialog__hint'>
+            Type to search. ↑ and ↓ move between results, Enter opens one.
+          </p>
+        )}
+      </div>
+    </GlobalModal>
+  );
+};
diff --git a/examples/cookbook/src/recipes/search/search-dialog/SearchDialogButton.css b/examples/cookbook/src/recipes/search/search-dialog/SearchDialogButton.css
new file mode 100644
index 0000000000..458787eb2f
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-dialog/SearchDialogButton.css
@@ -0,0 +1,32 @@
+@layer stream-overrides {
+  .cookbook-search-trigger {
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md);
+  }
+
+  /* Looks like a search field, so it sits where the search bar was. */
+  .cookbook-search-trigger__button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-full);
+    background: var(--str-chat__background-core-elevation-1);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-body-default);
+    cursor: pointer;
+  }
+
+  .cookbook-search-trigger__button:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-search-trigger__shortcut {
+    padding: var(--str-chat__spacing-xxxs) var(--str-chat__spacing-xs);
+    border: 1px solid var(--str-chat__border-core-subtle);
+    border-radius: var(--str-chat__radius-sm);
+    color: var(--str-chat__text-tertiary);
+    font: var(--str-chat__font-caption-default);
+  }
+}
diff --git a/examples/cookbook/src/recipes/search/search-dialog/SearchDialogButton.tsx b/examples/cookbook/src/recipes/search/search-dialog/SearchDialogButton.tsx
new file mode 100644
index 0000000000..8f0b0d4aa9
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-dialog/SearchDialogButton.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import { WithComponents } from 'stream-chat-react';
+import { SearchDialog } from './SearchDialog';
+import './SearchDialogButton.css';
+
+const isMac = /Mac|iPhone|iPad/.test(navigator.userAgent);
+
+const SearchDialogButton = () => {
+  const [open, setOpen] = useState(false);
+
+  // ⌘K on a Mac, Ctrl+K elsewhere, opens the dialog from anywhere in the app.
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // `key` is missing on the keydown Chrome fires when it autofills a field.
+      if ((isMac ? event.metaKey : event.ctrlKey) && event.key?.toLowerCase() === 'k') {
+        event.preventDefault();
+        setOpen(true);
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  return (
+    <div className='cookbook-search-trigger'>
+      <button
+        aria-haspopup='dialog'
+        aria-keyshortcuts={isMac ? 'Meta+K' : 'Control+K'}
+        className='cookbook-search-trigger__button'
+        onClick={() => setOpen(true)}
+        type='button'
+      >
+        <span>Search</span>
+        <kbd className='cookbook-search-trigger__shortcut'>{isMac ? '⌘K' : 'Ctrl K'}</kbd>
+      </button>
+      <SearchDialog onClose={() => setOpen(false)} open={open} />
+    </div>
+  );
+};
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { Search: SearchDialogButton };
+
+/** Replaces the search above the channel list with a button that opens the search dialog. */
+export const WithSearchDialog = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/search/search-dialog/SearchFilters.css b/examples/cookbook/src/recipes/search/search-dialog/SearchFilters.css
new file mode 100644
index 0000000000..44f92304a0
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-dialog/SearchFilters.css
@@ -0,0 +1,60 @@
+@layer stream-overrides {
+  /* One row per source: its name, then its controls. */
+  .cookbook-search-filters {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-sm);
+    padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+    border-radius: var(--str-chat__radius-lg);
+    background: var(--str-chat__background-core-surface-subtle);
+  }
+
+  .cookbook-search-filters__group {
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  /* A legend can't be a flex item, so it floats, and the controls wrap beside it. */
+  .cookbook-search-filters__legend {
+    float: left;
+    width: 80px;
+    padding: 0;
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-search-filters__controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs) var(--str-chat__spacing-md);
+  }
+
+  .cookbook-search-filters__field,
+  .cookbook-search-filters__check {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xxs);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-search-filters__select,
+  .cookbook-search-filters__date {
+    padding: var(--str-chat__spacing-xxxs) var(--str-chat__spacing-xs);
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: var(--str-chat__radius-md);
+    background: var(--str-chat__background-core-elevation-1);
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-search-filters__check {
+    cursor: pointer;
+  }
+
+  .cookbook-search-filters__check input {
+    margin: 0;
+    accent-color: var(--str-chat__accent-primary);
+  }
+}
diff --git a/examples/cookbook/src/recipes/search/search-dialog/SearchFilters.tsx b/examples/cookbook/src/recipes/search/search-dialog/SearchFilters.tsx
new file mode 100644
index 0000000000..e32cb1226a
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-dialog/SearchFilters.tsx
@@ -0,0 +1,266 @@
+import { useMemo, useState } from 'react';
+import type { SearchSource, SortParamRequest } from 'stream-chat';
+import { useChatContext, useStateStore } from 'stream-chat-react';
+import {
+  channelSorts,
+  getDialogSources,
+  messageSorts,
+  searchAgain,
+  userSorts,
+} from './searchController';
+import type { MessageFilterContext } from './searchController';
+import './SearchFilters.css';
+
+type Generators = Record<string, { enabled: boolean }>;
+
+const enabledSelector = (config: Generators) => ({
+  groupsOnly: !!config.groupsOnly?.enabled,
+  hideArchived: !!config.hideArchived?.enabled,
+  withAttachments: !!config.withAttachments?.enabled,
+});
+
+const messageContextSelector = ({
+  authorId,
+  sentFrom,
+  sentTo,
+}: MessageFilterContext) => ({
+  authorId,
+  sentFrom,
+  sentTo,
+});
+
+/** The key of the sort a source uses, from one of the sort maps. */
+const sortKeyOf = <K extends string>(
+  sorts: Record<K, SortParamRequest[]>,
+  sort: SortParamRequest[] | undefined,
+) => (Object.keys(sorts) as K[]).find((key) => sorts[key] === sort);
+
+/** Everyone in the user's loaded channels, for the "From" select. */
+const usePeople = () => {
+  const { channelManager, client } = useChatContext();
+  return useMemo(() => {
+    const people = new Map<string, string>();
+    for (const channel of channelManager.values()) {
+      for (const member of Object.values(channel.state.members)) {
+        if (member.user && member.user.id !== client.userId) {
+          people.set(member.user.id, member.user.name ?? member.user.id);
+        }
+      }
+    }
+    return [...people].sort(([, a], [, b]) => a.localeCompare(b));
+  }, [channelManager, client]);
+};
+
+export const SearchFilters = ({ id }: { id: string }) => {
+  const { client, searchController } = useChatContext();
+  const { channels, messages, users } = getDialogSources(searchController);
+  const people = usePeople();
+
+  const channelFilters = useStateStore(
+    channels?.filterBuilder.filterConfig,
+    enabledSelector,
+  );
+  const messageFilters = useStateStore(
+    messages?.messageSearchFilterBuilder.filterConfig,
+    enabledSelector,
+  );
+  const messageContext = useStateStore(
+    messages?.messageSearchFilterBuilder.context,
+    messageContextSelector,
+  );
+
+  // A source's sort isn't in a store, so the selects keep their own copy, read from the source.
+  const [channelSort, setChannelSort] = useState<string>(
+    () => sortKeyOf(channelSorts, channels?.sort) ?? 'activity',
+  );
+  const [userSort, setUserSort] = useState<string>(
+    () => sortKeyOf(userSorts, users?.sort) ?? 'name',
+  );
+  const [messageSort, setMessageSort] = useState<string>(
+    () => sortKeyOf(messageSorts, messages?.messageSearchSort) ?? 'newest',
+  );
+
+  // Every change applies from the next query, so search again from the first page.
+  const change = (source: SearchSource, apply: () => void) => {
+    apply();
+    searchAgain(searchController, source);
+  };
+
+  return (
+    <div className='cookbook-search-filters' id={id}>
+      {channels && (
+        <fieldset className='cookbook-search-filters__group'>
+          <legend className='cookbook-search-filters__legend'>Channels</legend>
+          <div className='cookbook-search-filters__controls'>
+            <label className='cookbook-search-filters__field'>
+              Sort by
+              <select
+                className='cookbook-search-filters__select'
+                onChange={(event) => {
+                  const key = event.target.value as keyof typeof channelSorts;
+                  setChannelSort(event.target.value);
+                  change(channels, () => {
+                    channels.sort = channelSorts[key];
+                  });
+                }}
+                value={channelSort}
+              >
+                <option value='activity'>Recent activity</option>
+                <option value='newest'>Newest</option>
+                <option value='members'>Most members</option>
+              </select>
+            </label>
+            <label className='cookbook-search-filters__check'>
+              <input
+                checked={!channelFilters?.hideArchived}
+                onChange={(event) =>
+                  change(channels, () =>
+                    event.target.checked
+                      ? channels.filterBuilder.disableFilter('hideArchived')
+                      : channels.filterBuilder.enableFilter('hideArchived'),
+                  )
+                }
+                type='checkbox'
+              />
+              Include archived
+            </label>
+            <label className='cookbook-search-filters__check'>
+              <input
+                checked={!!channelFilters?.groupsOnly}
+                onChange={(event) =>
+                  change(channels, () =>
+                    event.target.checked
+                      ? channels.filterBuilder.enableFilter('groupsOnly')
+                      : channels.filterBuilder.disableFilter('groupsOnly'),
+                  )
+                }
+                type='checkbox'
+              />
+              Groups only
+            </label>
+          </div>
+        </fieldset>
+      )}
+
+      {users && (
+        <fieldset className='cookbook-search-filters__group'>
+          <legend className='cookbook-search-filters__legend'>People</legend>
+          <div className='cookbook-search-filters__controls'>
+            <label className='cookbook-search-filters__field'>
+              Sort by
+              <select
+                className='cookbook-search-filters__select'
+                onChange={(event) => {
+                  const key = event.target.value as keyof typeof userSorts;
+                  setUserSort(event.target.value);
+                  change(users, () => {
+                    users.sort = userSorts[key];
+                  });
+                }}
+                value={userSort}
+              >
+                <option value='name'>Name</option>
+                <option value='active'>Recently active</option>
+              </select>
+            </label>
+          </div>
+        </fieldset>
+      )}
+
+      {messages && (
+        <fieldset className='cookbook-search-filters__group'>
+          <legend className='cookbook-search-filters__legend'>Messages</legend>
+          <div className='cookbook-search-filters__controls'>
+            <label className='cookbook-search-filters__field'>
+              Order
+              <select
+                className='cookbook-search-filters__select'
+                onChange={(event) => {
+                  const key = event.target.value as keyof typeof messageSorts;
+                  setMessageSort(event.target.value);
+                  change(messages, () => {
+                    messages.messageSearchSort = messageSorts[key];
+                  });
+                }}
+                value={messageSort}
+              >
+                <option value='newest'>Newest first</option>
+                <option value='oldest'>Oldest first</option>
+              </select>
+            </label>
+            <label className='cookbook-search-filters__field'>
+              From
+              <select
+                className='cookbook-search-filters__select'
+                onChange={(event) =>
+                  change(messages, () =>
+                    messages.messageSearchFilterBuilder.updateContext({
+                      authorId: event.target.value || undefined,
+                    }),
+                  )
+                }
+                value={messageContext?.authorId ?? ''}
+              >
+                <option value=''>Anyone</option>
+                <option value={client.userId}>You</option>
+                {people.map(([userId, name]) => (
+                  <option key={userId} value={userId}>
+                    {name}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className='cookbook-search-filters__field'>
+              Sent from
+              <input
+                className='cookbook-search-filters__date'
+                onChange={(event) =>
+                  change(messages, () =>
+                    messages.messageSearchFilterBuilder.updateContext({
+                      sentFrom: event.target.value || undefined,
+                    }),
+                  )
+                }
+                type='date'
+                value={messageContext?.sentFrom ?? ''}
+              />
+            </label>
+            <label className='cookbook-search-filters__field'>
+              Sent until
+              <input
+                className='cookbook-search-filters__date'
+                onChange={(event) =>
+                  change(messages, () =>
+                    messages.messageSearchFilterBuilder.updateContext({
+                      sentTo: event.target.value || undefined,
+                    }),
+                  )
+                }
+                type='date'
+                value={messageContext?.sentTo ?? ''}
+              />
+            </label>
+            <label className='cookbook-search-filters__check'>
+              <input
+                checked={!!messageFilters?.withAttachments}
+                onChange={(event) =>
+                  change(messages, () =>
+                    event.target.checked
+                      ? messages.messageSearchFilterBuilder.enableFilter(
+                          'withAttachments',
+                        )
+                      : messages.messageSearchFilterBuilder.disableFilter(
+                          'withAttachments',
+                        ),
+                  )
+                }
+                type='checkbox'
+              />
+              With attachments
+            </label>
+          </div>
+        </fieldset>
+      )}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/search/search-dialog/SearchResults.css b/examples/cookbook/src/recipes/search/search-dialog/SearchResults.css
new file mode 100644
index 0000000000..57a70a5706
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-dialog/SearchResults.css
@@ -0,0 +1,120 @@
+@layer stream-overrides {
+  /* The results scroll; the input and the options above them stay in place. */
+  .cookbook-search-results {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  .cookbook-search-results__status {
+    margin: 0 0 var(--str-chat__spacing-xs);
+    color: var(--str-chat__text-tertiary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-search-results__group + .cookbook-search-results__group {
+    margin-top: var(--str-chat__spacing-sm);
+  }
+
+  .cookbook-search-results__heading {
+    margin: 0 0 var(--str-chat__spacing-xxs);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-emphasis);
+  }
+
+  .cookbook-search-results__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .cookbook-search-results__note {
+    margin: 0;
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    color: var(--str-chat__text-tertiary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-search-results__more {
+    padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-sm);
+    border: 0;
+    background: none;
+    color: var(--str-chat__text-link);
+    font: var(--str-chat__font-caption-emphasis);
+    cursor: pointer;
+  }
+
+  .cookbook-search-result {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+    border-radius: var(--str-chat__radius-lg);
+    color: var(--str-chat__text-primary);
+  }
+
+  .cookbook-search-result:hover {
+    background: var(--str-chat__background-utility-hover);
+  }
+
+  .cookbook-search-result__button {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: var(--str-chat__spacing-sm);
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  /* Covers the whole row, avatar included, so a click anywhere on it opens the result. */
+  .cookbook-search-result__button::after {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--str-chat__radius-lg);
+    content: '';
+  }
+
+  .cookbook-search-result__button:focus-visible {
+    outline: none;
+  }
+
+  .cookbook-search-result__button:focus-visible::after {
+    outline: 2px solid var(--str-chat__accent-primary);
+    outline-offset: -2px;
+  }
+
+  .cookbook-search-result__text {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .cookbook-search-result__title {
+    overflow: hidden;
+    font: var(--str-chat__font-body-emphasis);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .cookbook-search-result__detail {
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+  }
+
+  .cookbook-search-result__tag {
+    flex: 0 0 72px;
+    padding: var(--str-chat__spacing-xxxs) var(--str-chat__spacing-xs);
+    border-radius: var(--str-chat__radius-full);
+    background: var(--str-chat__background-utility-selected);
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-metadata-emphasis);
+    text-align: center;
+  }
+}
diff --git a/examples/cookbook/src/recipes/search/search-dialog/SearchResults.tsx b/examples/cookbook/src/recipes/search/search-dialog/SearchResults.tsx
new file mode 100644
index 0000000000..1b6e8de35a
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-dialog/SearchResults.tsx
@@ -0,0 +1,388 @@
+import { useId } from 'react';
+import type { MouseEvent, PropsWithChildren } from 'react';
+import { convertTimestampToDate } from 'stream-chat';
+import type {
+  Channel,
+  ChannelStateData,
+  MessageResponse,
+  SearchControllerState,
+  SearchSource,
+  SearchSourceState,
+  TimestampNS,
+  UserResponse,
+} from 'stream-chat';
+import {
+  Avatar,
+  useChannelDisplayName,
+  useChatContext,
+  useStateStore,
+  useWorkspaceNavigation,
+} from 'stream-chat-react';
+import { getDialogSources } from './searchController';
+import './SearchResults.css';
+
+export type ResultsLayout = 'grouped' | 'mixed';
+
+const sourceLabels: Record<string, string> = {
+  channels: 'Channels',
+  messages: 'Messages',
+  users: 'People',
+};
+
+const tagLabels: Record<string, string> = {
+  channels: 'Channel',
+  messages: 'Message',
+  users: 'Person',
+};
+
+type Result =
+  | { item: Channel; type: 'channels' }
+  | { item: MessageResponse; type: 'messages' }
+  | { item: UserResponse; type: 'users' };
+
+const resultKey = ({ item, type }: Result) =>
+  `${type}:${type === 'channels' ? item.cid : item.id}`;
+
+// The time a mixed list sorts by: a channel's last message, a person's last activity, a message's
+// creation. The SDK keeps timestamps as nanosecond numbers.
+const resultTime = (result: Result) => {
+  const timestamp =
+    result.type === 'channels'
+      ? result.item.data?.last_message_at
+      : result.type === 'users'
+        ? result.item.last_active
+        : result.item.created_at;
+  return convertTimestampToDate(timestamp)?.getTime() ?? 0;
+};
+
+const formatDate = (timestamp?: TimestampNS | null) =>
+  convertTimestampToDate(timestamp)?.toLocaleDateString(undefined, {
+    day: 'numeric',
+    month: 'short',
+  });
+
+// The avatar repeats the row's name, so it's hidden from assistive technology. Avatar renders
+// role="button" by default, which a result row mustn't announce.
+const decorative = { 'aria-hidden': true, role: 'presentation' } as const;
+
+const memberCountSelector = ({ memberCount }: ChannelStateData) => ({ memberCount });
+
+const sourceSelector = ({
+  hasNext,
+  isActive,
+  isLoading,
+  items,
+  lastQueryError,
+  searchQuery,
+}: SearchSourceState) => ({
+  hasNext,
+  isActive,
+  isLoading,
+  items,
+  lastQueryError,
+  searchQuery,
+});
+
+const searchQuerySelector = ({ searchQuery }: SearchControllerState) => ({
+  searchQuery,
+});
+
+/** Opens what a result points to, then closes the dialog. */
+const useOpenResult = (close: () => void) => {
+  const { channelManager, client } = useChatContext();
+  const { openChannel } = useWorkspaceNavigation();
+
+  const reportError = (error: Error) =>
+    client.notifications.addError({
+      message: 'Failed to load the channel',
+      options: { originalError: error },
+      origin: { emitter: 'SearchDialog' },
+    });
+
+  return async ({ item, type }: Result, event: MouseEvent) => {
+    close();
+    if (type === 'channels') {
+      openChannel(item, { event });
+      // Channel search doesn't watch its results, so watch the channel to receive its events.
+      item.watch().catch(reportError);
+      channelManager.ingestChannel(item);
+      return;
+    }
+    if (type === 'messages') {
+      // Message search stores every result's channel.
+      const channel = item.cid ? channelManager.get(item.cid) : undefined;
+      if (!channel) return;
+      openChannel(channel, { event });
+      channelManager.ingestChannel(channel);
+      // Loads the page around the message, scrolls to it and watches the channel.
+      channel.messagePaginator
+        .jumpToMessage(item.id, { watchChannel: true })
+        .catch(reportError);
+      return;
+    }
+    // A person opens the user's direct conversation with them, if there is one: a channel with only
+    // the two of them and no name of its own.
+    try {
+      const channels = await client.queryChannelsAndHydrate(
+        {
+          filter_conditions: {
+            $and: [
+              { members: { $in: [client.userId ?? ''] } },
+              { members: { $in: [item.id] } },
+            ],
+            member_count: 2,
+            type: 'messaging',
+          },
+        },
+        { withResponse: false },
+      );
+      const directMessage = channels.find(
+        (channel) => !('name' in (channel.data?.custom ?? {})),
+      );
+      if (!directMessage) {
+        client.notifications.addInfo({
+          message: `No conversation with ${item.name ?? item.id} yet`,
+          origin: { emitter: 'SearchDialog' },
+        });
+        return;
+      }
+      openChannel(directMessage, { event });
+      channelManager.ingestChannel(directMessage);
+    } catch (error) {
+      reportError(error as Error);
+    }
+  };
+};
+
+type ResultRowProps = {
+  onOpen: (result: Result, event: MouseEvent) => void;
+  result: Result;
+  showTag?: boolean;
+};
+
+/**
+ * Opens the result. The avatar sits beside the button, since a button can't contain the SDK's
+ * Avatar, a `div`; the button's `::after` covers the whole row, so a click on the avatar opens the
+ * result too.
+ */
+const ResultButton = ({
+  children,
+  onOpen,
+  result,
+  showTag,
+}: PropsWithChildren<ResultRowProps>) => (
+  <button
+    className='cookbook-search-result__button'
+    data-search-result
+    onClick={(event) => void onOpen(result, event)}
+    type='button'
+  >
+    <span className='cookbook-search-result__text'>{children}</span>
+    {showTag && (
+      <span className='cookbook-search-result__tag'>{tagLabels[result.type]}</span>
+    )}
+  </button>
+);
+
+const ChannelResult = ({ channel, ...row }: ResultRowProps & { channel: Channel }) => {
+  const name = useChannelDisplayName(channel) ?? channel.id ?? '';
+  const { memberCount } = useStateStore(channel.state, memberCountSelector);
+  return (
+    <>
+      <Avatar {...decorative} size='md' userName={name} />
+      <ResultButton {...row}>
+        <span className='cookbook-search-result__title'>{name}</span>
+        <span className='cookbook-search-result__detail'>{memberCount} members</span>
+      </ResultButton>
+    </>
+  );
+};
+
+const UserResult = ({ user, ...row }: ResultRowProps & { user: UserResponse }) => (
+  <>
+    <Avatar
+      {...decorative}
+      imageUrl={user.image}
+      size='md'
+      userName={user.name ?? user.id}
+    />
+    <ResultButton {...row}>
+      <span className='cookbook-search-result__title'>{user.name ?? user.id}</span>
+      <span className='cookbook-search-result__detail'>
+        {user.last_active ? `Active ${formatDate(user.last_active)}` : 'Person'}
+      </span>
+    </ResultButton>
+  </>
+);
+
+const MessageResult = ({
+  message,
+  ...row
+}: ResultRowProps & { message: MessageResponse }) => {
+  const { channelManager } = useChatContext();
+  const channel = message.cid ? channelManager.get(message.cid) : undefined;
+  const channelName = useChannelDisplayName(channel);
+  const author = message.user?.name ?? message.user?.id ?? '';
+  return (
+    <>
+      <Avatar
+        {...decorative}
+        imageUrl={message.user?.image}
+        size='md'
+        userName={author}
+      />
+      <ResultButton {...row}>
+        <span className='cookbook-search-result__title'>{message.text}</span>
+        <span className='cookbook-search-result__detail'>
+          {author}
+          {channelName && ` in ${channelName}`} · {formatDate(message.created_at)}
+        </span>
+      </ResultButton>
+    </>
+  );
+};
+
+const ResultRow = (props: ResultRowProps) => {
+  const { result } = props;
+  return (
+    <li className='cookbook-search-result'>
+      {result.type === 'channels' && <ChannelResult {...props} channel={result.item} />}
+      {result.type === 'users' && <UserResult {...props} user={result.item} />}
+      {result.type === 'messages' && <MessageResult {...props} message={result.item} />}
+    </li>
+  );
+};
+
+/**
+ * What one source has loaded, as results. A source waits for a pause in typing before it queries,
+ * so until its own `searchQuery` is the controller's, it's still searching.
+ */
+const useSourceResults = (source: SearchSource | undefined, searchQuery: string) => {
+  const state = useStateStore(source?.state, sourceSelector);
+  const results = (state?.items ?? []).map(
+    (item) => ({ item, type: source?.type }) as Result,
+  );
+  const isSearching = !!state && (state.isLoading || state.searchQuery !== searchQuery);
+  return { ...state, isSearching, results, source };
+};
+
+type SourceResults = ReturnType<typeof useSourceResults>;
+
+// Hidden while a source is searching, so it never loads the next page of the previous text.
+const hasMore = ({ hasNext, isSearching, items }: SourceResults) =>
+  !!items?.length && hasNext && !isSearching;
+
+const GroupedResults = ({
+  groups,
+  onOpen,
+}: {
+  groups: SourceResults[];
+  onOpen: ResultRowProps['onOpen'];
+}) => {
+  const headingId = useId();
+  return groups.map((group) => {
+    const type = group.source?.type ?? '';
+    return (
+      <section
+        aria-labelledby={`${headingId}-${type}`}
+        className='cookbook-search-results__group'
+        key={type}
+      >
+        <h3 className='cookbook-search-results__heading' id={`${headingId}-${type}`}>
+          {sourceLabels[type]}
+        </h3>
+        {group.lastQueryError ? (
+          <p className='cookbook-search-results__note'>This search failed.</p>
+        ) : group.results.length ? (
+          <ul className='cookbook-search-results__list'>
+            {group.results.map((result) => (
+              <ResultRow key={resultKey(result)} onOpen={onOpen} result={result} />
+            ))}
+          </ul>
+        ) : (
+          <p className='cookbook-search-results__note'>
+            {group.isSearching ? 'Searching…' : 'No results'}
+          </p>
+        )}
+        {hasMore(group) && (
+          <button
+            className='cookbook-search-results__more'
+            onClick={() => void group.source?.search()}
+            type='button'
+          >
+            Load more {sourceLabels[type].toLowerCase()}
+          </button>
+        )}
+      </section>
+    );
+  });
+};
+
+const MixedResults = ({
+  groups,
+  onOpen,
+}: {
+  groups: SourceResults[];
+  onOpen: ResultRowProps['onOpen'];
+}) => {
+  const results = groups
+    .flatMap((group) => group.results)
+    .sort((a, b) => resultTime(b) - resultTime(a));
+  const loadable = groups.filter(hasMore);
+  return (
+    <>
+      {results.length ? (
+        <ul aria-label='Results' className='cookbook-search-results__list'>
+          {results.map((result) => (
+            <ResultRow key={resultKey(result)} onOpen={onOpen} result={result} showTag />
+          ))}
+        </ul>
+      ) : (
+        <p className='cookbook-search-results__note'>
+          {groups.some((group) => group.isSearching) ? 'Searching…' : 'No results'}
+        </p>
+      )}
+      {!!loadable.length && (
+        <button
+          className='cookbook-search-results__more'
+          onClick={() => loadable.forEach((group) => void group.source?.search())}
+          type='button'
+        >
+          Load more
+        </button>
+      )}
+    </>
+  );
+};
+
+type SearchResultsProps = {
+  close: () => void;
+  layout: ResultsLayout;
+};
+
+export const SearchResults = ({ close, layout }: SearchResultsProps) => {
+  const { searchController } = useChatContext();
+  const { searchQuery = '' } = useStateStore(searchController.state, searchQuerySelector);
+  const sources = getDialogSources(searchController);
+  const groups = [
+    useSourceResults(sources.channels, searchQuery),
+    useSourceResults(sources.users, searchQuery),
+    useSourceResults(sources.messages, searchQuery),
+  ].filter((group) => group.isActive);
+  const onOpen = useOpenResult(close);
+  const resultCount = groups.reduce((count, group) => count + group.results.length, 0);
+  const isSearching = groups.some((group) => group.isSearching);
+
+  return (
+    <div className='cookbook-search-results'>
+      <p className='cookbook-search-results__status' role='status'>
+        {isSearching ? 'Searching…' : `${resultCount} results`}
+      </p>
+      {layout === 'grouped' ? (
+        <GroupedResults groups={groups} onOpen={onOpen} />
+      ) : (
+        <MixedResults groups={groups} onOpen={onOpen} />
+      )}
+    </div>
+  );
+};
diff --git a/examples/cookbook/src/recipes/search/search-dialog/SimulateSearchDialog.tsx b/examples/cookbook/src/recipes/search/search-dialog/SimulateSearchDialog.tsx
new file mode 100644
index 0000000000..e13001eaba
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-dialog/SimulateSearchDialog.tsx
@@ -0,0 +1,57 @@
+import { useEffect } from 'react';
+
+const waitFor = <T extends Element>(selector: string) =>
+  new Promise<T>((resolve) => {
+    const timer = setInterval(() => {
+      const element = document.querySelector<T>(selector);
+      if (!element) return;
+      clearInterval(timer);
+      resolve(element);
+    }, 100);
+  });
+
+/**
+ * `?simulate=search-dialog&q=<text>` opens the search dialog and types `text` into it, for the
+ * screenshots. `&layout=mixed` switches the results to the mixed list, and `&filters=open` opens the
+ * filters and sort panel.
+ */
+export const SimulateSearchDialog = () => {
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const query = params.get('q');
+    if (params.get('simulate') !== 'search-dialog' || !query) return;
+    let cancelled = false;
+
+    void (async () => {
+      // Waits for the channel list to load, so the client the dialog searches with is connected.
+      await waitFor('.str-chat__channel-list-item');
+      const button = await waitFor<HTMLButtonElement>('.cookbook-search-trigger__button');
+      if (cancelled || document.querySelector('.cookbook-search-dialog')) return;
+      button.click();
+      const input = await waitFor<HTMLInputElement>('.cookbook-search-dialog__input');
+      if (cancelled) return;
+      // Sets the value the way typing does, so React's onChange runs.
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(
+        input,
+        query,
+      );
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+      if (params.get('layout') === 'mixed') {
+        document
+          .querySelector<HTMLInputElement>('.cookbook-search-dialog input[value="mixed"]')
+          ?.click();
+      }
+      if (params.get('filters') === 'open') {
+        document
+          .querySelector<HTMLButtonElement>('.cookbook-search-dialog__filters-button')
+          ?.click();
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/search/search-dialog/default.recipe.tsx b/examples/cookbook/src/recipes/search/search-dialog/default.recipe.tsx
new file mode 100644
index 0000000000..17df2bd2d7
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-dialog/default.recipe.tsx
@@ -0,0 +1,38 @@
+import type { PropsWithChildren } from 'react';
+import { ChannelSearchSource, MessageSearchSource, UserSearchSource } from 'stream-chat';
+import { visibleChannelIds } from '../../../base/client';
+import demoData from '../../../base/demo-data.json';
+import type { RecipeConfig } from '../../../base/recipe';
+import { createSearchController } from './searchController';
+import { WithSearchDialog } from './SearchDialogButton';
+import { SimulateSearchDialog } from './SimulateSearchDialog';
+
+// A search button above the channel list that opens a search dialog. SimulateSearchDialog only
+// serves the screenshots.
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <WithSearchDialog>
+    <SimulateSearchDialog />
+    {children}
+  </WithSearchDialog>
+);
+
+const recipe: RecipeConfig = {
+  chatProps: (client) => {
+    const searchController = createSearchController(client);
+    // Keeps the search to the cookbook's own channels and cast, as the base app's controller does,
+    // so other data in the shared demo app never shows up.
+    for (const source of searchController.sources) {
+      if (source instanceof ChannelSearchSource) {
+        source.filters = { id: { $in: visibleChannelIds } };
+      } else if (source instanceof UserSearchSource) {
+        source.filters = { id: { $in: demoData.users.map((user) => user.id) } };
+      } else if (source instanceof MessageSearchSource) {
+        source.messageSearchChannelFilters = { id: { $in: visibleChannelIds } };
+      }
+    }
+    return { searchController };
+  },
+  Wrapper,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/search/search-dialog/searchController.ts b/examples/cookbook/src/recipes/search/search-dialog/searchController.ts
new file mode 100644
index 0000000000..aed2391b53
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-dialog/searchController.ts
@@ -0,0 +1,159 @@
+import {
+  ChannelSearchSource,
+  MessageSearchSource,
+  SearchController,
+  UserSearchSource,
+} from 'stream-chat';
+import type { SearchSource, SortParamRequest, StreamChat } from 'stream-chat';
+
+/**
+ * The values the message filters read: the author's id, and the first and last day, `YYYY-MM-DD`, as
+ * days in the user's time zone.
+ */
+export type MessageFilterContext = {
+  authorId?: string;
+  sentFrom?: string;
+  sentTo?: string;
+};
+
+export type DialogMessageSearchSource = MessageSearchSource<{
+  messageSearchContext: MessageFilterContext;
+}>;
+
+export const channelSorts = {
+  activity: [{ direction: -1, field: 'last_message_at' }],
+  members: [{ direction: -1, field: 'member_count' }],
+  newest: [{ direction: -1, field: 'created_at' }],
+} satisfies Record<string, SortParamRequest[]>;
+
+export const userSorts = {
+  active: [{ direction: -1, field: 'last_active' }],
+  name: [{ direction: 1, field: 'name' }],
+} satisfies Record<string, SortParamRequest[]>;
+
+export const messageSorts = {
+  newest: [{ direction: -1, field: 'created_at' }],
+  oldest: [{ direction: 1, field: 'created_at' }],
+} satisfies Record<string, SortParamRequest[]>;
+
+/** The first moment of a day in the user's time zone, `YYYY-MM-DD`, as an ISO date. */
+const startOfLocalDay = (day: string) => new Date(`${day}T00:00`).toISOString();
+
+/** The last moment of a day in the user's time zone, `YYYY-MM-DD`, as an ISO date. */
+const endOfLocalDay = (day: string) => {
+  const nextDay = new Date(`${day}T00:00`);
+  nextDay.setDate(nextDay.getDate() + 1);
+  return new Date(nextDay.getTime() - 1).toISOString();
+};
+
+// A few results per source; Load more fetches the next few.
+const pageSize = 3;
+
+export const createSearchController = (client: StreamChat) =>
+  new SearchController({
+    client,
+    // Every source the user turns on searches at once.
+    config: { keepSingleActiveSource: false },
+    sources: [
+      new ChannelSearchSource(
+        client,
+        { pageSize, sort: channelSorts.activity },
+        {
+          initialFilterConfig: {
+            // Replaces the built-in `name` generator: a channel matches by its name or a member's.
+            name: {
+              enabled: true,
+              generate: ({ searchQuery }) =>
+                searchQuery
+                  ? {
+                      $or: [
+                        { name: { $autocomplete: searchQuery } },
+                        { 'member.user.name': { $autocomplete: searchQuery } },
+                      ],
+                    }
+                  : null,
+            },
+            hideArchived: { enabled: true, generate: () => ({ archived: false }) },
+            groupsOnly: {
+              enabled: false,
+              generate: () => ({ member_count: { $gt: 2 } }),
+            },
+          },
+        },
+      ),
+      new UserSearchSource(client, { pageSize, sort: userSorts.name }),
+      new MessageSearchSource<{ messageSearchContext: MessageFilterContext }>(
+        client,
+        { messageSearchSort: messageSorts.newest, pageSize },
+        {
+          messageSearch: {
+            initialFilterConfig: {
+              // Replaces the built-in `text` generator: a message matches when a word in it starts
+              // with the search text.
+              text: {
+                enabled: true,
+                generate: ({ searchQuery }) =>
+                  searchQuery ? { text: { $autocomplete: searchQuery } } : null,
+              },
+              author: {
+                enabled: true,
+                generate: ({ authorId }) => (authorId ? { 'user.id': authorId } : null),
+              },
+              withAttachments: {
+                enabled: false,
+                generate: () => ({ attachments: { $exists: true } }),
+              },
+              // A field takes one operator per condition, so the two ends of the range are two
+              // conditions under `$and`.
+              sentBetween: {
+                enabled: true,
+                generate: ({ sentFrom, sentTo }) => {
+                  const range = [
+                    ...(sentFrom
+                      ? [{ created_at: { $gte: startOfLocalDay(sentFrom) } }]
+                      : []),
+                    ...(sentTo ? [{ created_at: { $lte: endOfLocalDay(sentTo) } }] : []),
+                  ];
+                  return range.length ? { $and: range } : null;
+                },
+              },
+            },
+          },
+        },
+      ),
+    ],
+  });
+
+/** The dialog's three sources, typed, from the controller `Chat` holds. */
+export const getDialogSources = (searchController: SearchController) => {
+  const find = <T extends SearchSource>(
+    type: string,
+    isType: (source: SearchSource) => source is T,
+  ) => {
+    const source = searchController.getSource(type);
+    return source && isType(source) ? source : undefined;
+  };
+  return {
+    channels: find(
+      'channels',
+      (source): source is ChannelSearchSource => source instanceof ChannelSearchSource,
+    ),
+    messages: find(
+      'messages',
+      (source): source is DialogMessageSearchSource =>
+        source instanceof MessageSearchSource,
+    ),
+    users: find(
+      'users',
+      (source): source is UserSearchSource => source instanceof UserSearchSource,
+    ),
+  };
+};
+
+/**
+ * Runs the current search text again in one source, from the first page. A new `sort` or filter
+ * applies from the next query, and the source doesn't query on its own when they change.
+ */
+export const searchAgain = (searchController: SearchController, source: SearchSource) => {
+  if (searchController.searchQuery) void source.search(searchController.searchQuery);
+};
diff --git a/examples/cookbook/src/recipes/search/search-dialog/shots.json b/examples/cookbook/src/recipes/search/search-dialog/shots.json
new file mode 100644
index 0000000000..3dfc174531
--- /dev/null
+++ b/examples/cookbook/src/recipes/search/search-dialog/shots.json
@@ -0,0 +1,47 @@
+[
+  {
+    "file": "search-dialog-grouped.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "search-dialog",
+      "q": "Cara"
+    },
+    "waitFor": ".cookbook-search-results__group .cookbook-search-result",
+    "clip": ".cookbook-search-dialog",
+    "padding": 16,
+    "settleMs": 1500
+  },
+  {
+    "file": "search-dialog-mixed.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "search-dialog",
+      "q": "Cara",
+      "layout": "mixed"
+    },
+    "waitFor": ".cookbook-search-result__tag",
+    "clip": ".cookbook-search-dialog",
+    "padding": 16,
+    "settleMs": 1500
+  },
+  {
+    "file": "search-dialog-filters.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "simulate": "search-dialog",
+      "q": "Cara",
+      "filters": "open"
+    },
+    "waitFor": ".cookbook-search-filters",
+    "clip": ".cookbook-search-dialog",
+    "padding": 16,
+    "settleMs": 1500
+  },
+  {
+    "file": "search-dialog-button.png",
+    "query": { "channel": "docs-v15-cb-design" },
+    "waitFor": ".cookbook-search-trigger__button",
+    "clip": ".str-chat__channel-list",
+    "padding": 0
+  }
+]
diff --git a/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/dark.recipe.tsx b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/dark.recipe.tsx
new file mode 100644
index 0000000000..296ef2ddac
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/dark.recipe.tsx
@@ -0,0 +1,10 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { loadFont } from './loadFont';
+import './theme.css';
+
+loadFont();
+
+// The dark theme, from the same theme.css.
+const recipe: RecipeConfig = { theme: 'str-chat__theme-dark' };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/default.recipe.tsx b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/default.recipe.tsx
new file mode 100644
index 0000000000..5a5c305914
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/default.recipe.tsx
@@ -0,0 +1,10 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { loadFont } from './loadFont';
+import './theme.css';
+
+loadFont();
+
+// The light theme, from theme.css.
+const recipe: RecipeConfig = {};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/loadFont.ts b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/loadFont.ts
new file mode 100644
index 0000000000..e48741b299
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/loadFont.ts
@@ -0,0 +1,11 @@
+// The theme's font, from Google Fonts. The SDK's stylesheet loads no font of its own.
+const FONT_URL =
+  'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap';
+
+export const loadFont = () => {
+  if (document.querySelector(`link[href="${FONT_URL}"]`)) return;
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = FONT_URL;
+  document.head.appendChild(link);
+};
diff --git a/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/rtl.css b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/rtl.css
new file mode 100644
index 0000000000..9ae8b9d44b
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/rtl.css
@@ -0,0 +1,5 @@
+@layer stream-overrides {
+  .cookbook-rtl {
+    height: 100%;
+  }
+}
diff --git a/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/rtl.recipe.tsx b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/rtl.recipe.tsx
new file mode 100644
index 0000000000..fa9dcb255f
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/rtl.recipe.tsx
@@ -0,0 +1,18 @@
+import type { PropsWithChildren } from 'react';
+import type { RecipeConfig } from '../../../base/recipe';
+import { loadFont } from './loadFont';
+import './theme.css';
+import './rtl.css';
+
+loadFont();
+
+// A right-to-left layout: `dir` on an element around the chat.
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <div className='cookbook-rtl' dir='rtl'>
+    {children}
+  </div>
+);
+
+const recipe: RecipeConfig = { Wrapper };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/sdk-dark.recipe.tsx b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/sdk-dark.recipe.tsx
new file mode 100644
index 0000000000..1bf8fda576
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/sdk-dark.recipe.tsx
@@ -0,0 +1,6 @@
+import type { RecipeConfig } from '../../../base/recipe';
+
+// The SDK's own dark theme, without this recipe's theme.css.
+const recipe: RecipeConfig = { theme: 'str-chat__theme-dark' };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/shots.json b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/shots.json
new file mode 100644
index 0000000000..6d8e3a1020
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/shots.json
@@ -0,0 +1,48 @@
+[
+  {
+    "file": "stream-chat-css-chat-ui-screenshot.png",
+    "recipe": "base",
+    "query": { "channel": "docs-v15-cb-design", "thread": "docs-v15-ck-design-4" },
+    "waitFor": ".str-chat__thread-container .str-chat__message-list",
+    "settleMs": 1500
+  },
+  {
+    "file": "stream-chat-css-chat-ui-theme-customization-screenshot.png",
+    "query": { "channel": "docs-v15-cb-design", "thread": "docs-v15-ck-design-4" },
+    "waitFor": ".str-chat__thread-container .str-chat__message-list",
+    "settleMs": 1500
+  },
+  {
+    "file": "stream-chat-css-custom-avatar-color-screenshot.png",
+    "query": { "channel": "docs-v15-cb-design" },
+    "clip": ".str-chat__channel-list",
+    "padding": 0,
+    "settleMs": 1500
+  },
+  {
+    "file": "stream-chat-css-dark-ui-screenshot.png",
+    "variant": "sdk-dark",
+    "query": { "channel": "docs-v15-cb-design", "thread": "docs-v15-ck-design-4" },
+    "waitFor": ".str-chat__thread-container .str-chat__message-list",
+    "settleMs": 1500
+  },
+  {
+    "file": "stream-chat-css-custom-dark-theme-screenshot.png",
+    "variant": "dark",
+    "query": { "channel": "docs-v15-cb-design", "thread": "docs-v15-ck-design-4" },
+    "waitFor": ".str-chat__thread-container .str-chat__message-list",
+    "settleMs": 1500
+  },
+  {
+    "file": "stream-chat-css-square-theme-screenshot.png",
+    "variant": "square",
+    "query": { "channel": "docs-v15-cb-design" },
+    "settleMs": 1500
+  },
+  {
+    "file": "stream-chat-css-rtl-layout-screenshot.png",
+    "variant": "rtl",
+    "query": { "channel": "docs-v15-cb-design" },
+    "settleMs": 1500
+  }
+]
diff --git a/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/square.css b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/square.css
new file mode 100644
index 0000000000..0e03b59e5e
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/square.css
@@ -0,0 +1,15 @@
+@layer stream-overrides {
+  /* Two themes of your own, set through Chat's `theme`: rounder or squarer corners. */
+  .str-chat__theme-round {
+    --str-chat__radius-max: 9999px;
+    --str-chat__button-radius-full: 9999px;
+  }
+
+  .str-chat__theme-square {
+    --str-chat__radius-max: 6px;
+    --str-chat__button-radius-full: 6px;
+    --str-chat__message-bubble-radius-group-top: 6px;
+    --str-chat__message-bubble-radius-group-middle: 6px;
+    --str-chat__message-bubble-radius-group-bottom: 6px;
+  }
+}
diff --git a/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/square.recipe.tsx b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/square.recipe.tsx
new file mode 100644
index 0000000000..30dc3b4ab6
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/square.recipe.tsx
@@ -0,0 +1,11 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { loadFont } from './loadFont';
+import './theme.css';
+import './square.css';
+
+loadFont();
+
+// A theme of your own on top of the brand theme: square corners.
+const recipe: RecipeConfig = { theme: 'messaging light str-chat__theme-square' };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/theme.css b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/theme.css
new file mode 100644
index 0000000000..ac532cfe43
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/brand-theme-and-dark-mode/theme.css
@@ -0,0 +1,146 @@
+@layer stream-overrides {
+  /* Light theme, and the shape, type and shadow tokens both themes share. */
+  .str-chat {
+    /* Brand: a green ramp in place of the SDK's blues. Both themes build the brand ramp from it. */
+    --str-chat__blue-50: #ecfdf5;
+    --str-chat__blue-100: #d1fae5;
+    --str-chat__blue-150: #bcf5da;
+    --str-chat__blue-200: #a7f3d0;
+    --str-chat__blue-300: #6ee7b7;
+    --str-chat__blue-400: #34d399;
+    --str-chat__blue-500: #10b981;
+    --str-chat__blue-600: #059669;
+    --str-chat__blue-700: #047857;
+    --str-chat__blue-800: #065f46;
+    --str-chat__blue-900: #064e3b;
+    /* The accent is a deeper step than the ramp's middle, so white text on a button reads. */
+    --str-chat__accent-primary: #047857;
+
+    /* Surfaces: a green-tinted page, white panels and incoming bubbles. */
+    --str-chat__background-core-app: #f3f8f5;
+    --str-chat__background-core-elevation-1: #ffffff;
+    --str-chat__background-core-highlight: #e6f6ee;
+    --str-chat__background-core-surface-subtle: #ecf4ef;
+    /* Interaction states are overlays painted on top of a control, so they stay translucent. */
+    --str-chat__background-utility-hover: rgb(4 120 87 / 0.06);
+    --str-chat__background-utility-pressed: rgb(4 120 87 / 0.1);
+    --str-chat__background-utility-selected: rgb(4 120 87 / 0.12);
+    --str-chat__border-core-default: #e0eae4;
+    --str-chat__border-core-subtle: #ecf2ee;
+    --str-chat__text-primary: #16231d;
+    --str-chat__text-secondary: #4d5c55;
+    --str-chat__text-tertiary: #5c6b63;
+    /* All three text levels, links, and the timestamps and names under messages read at 4.5:1 on
+       the page, the panels and a selected channel. */
+    --str-chat__text-link: #047857;
+    --str-chat__chat-text-timestamp: #4d5c55;
+
+    /* Bubbles: a solid green with white text for the user's own, white with a hairline for
+       everyone else's. Attachment cards inside the user's bubble, such as link previews,
+       locations and the Giphy preview, sit one step darker, so the card stands out from the
+       bubble around it. The bubble's border matches its fill. */
+    --str-chat__chat-bg-outgoing: #1a7f5a;
+    --str-chat__chat-bg-attachment-outgoing: #136c4c;
+    --str-chat__chat-border-outgoing: #1a7f5a;
+    --str-chat__chat-text-outgoing: #ffffff;
+    --str-chat__chat-reply-indicator-outgoing: #a7f3d0;
+    /* Borders on the user's own bubble, such as the poll's buttons and checkboxes: white. */
+    --str-chat__chat-border-on-chat-outgoing: #ffffff;
+    /* Poll vote bars on the user's own bubble: a white fill in a near-black green track. */
+    --str-chat__chat-poll-progress-fill-outgoing: #ffffff;
+    --str-chat__chat-poll-progress-track-outgoing: #021f18;
+    --str-chat__chat-bg-incoming: #ffffff;
+    --str-chat__chat-border-incoming: #e0eae4;
+    --str-chat__chat-text-incoming: #16231d;
+
+    --str-chat__avatar-bg-default: #d1fae5;
+    --str-chat__avatar-text-default: #047857;
+
+    /* Shape: softer, rounder bubbles and cards; buttons and inputs stay pill-shaped. */
+    --str-chat__message-bubble-radius-group-top: 20px;
+    --str-chat__message-bubble-radius-group-middle: 20px;
+    --str-chat__message-bubble-radius-group-bottom: 20px;
+    --str-chat__message-bubble-radius-tail: 6px;
+    --str-chat__radius-lg: 16px;
+    --str-chat__radius-xl: 20px;
+
+    /* Type: Plus Jakarta Sans, loaded from Google Fonts, with the system font as fallback. */
+    --str-chat__font-family:
+      'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
+
+    /* Shadows: soft and diffuse, tinted with the brand instead of black. */
+    --str-chat__light-elevation-1:
+      0 0 0 1px rgb(6 78 59 / 0.04), 0 1px 2px rgb(6 78 59 / 0.06),
+      0 4px 12px rgb(6 78 59 / 0.06);
+    --str-chat__light-elevation-2:
+      0 0 0 1px rgb(6 78 59 / 0.04), 0 2px 6px rgb(6 78 59 / 0.08),
+      0 10px 24px rgb(6 78 59 / 0.08);
+    --str-chat__light-elevation-3:
+      0 0 0 1px rgb(6 78 59 / 0.05), 0 4px 10px rgb(6 78 59 / 0.1),
+      0 16px 32px rgb(6 78 59 / 0.1);
+  }
+
+  /* Polls on the user's own bubble: white buttons, and white voter avatars with deep green
+     initials. A ticked checkbox has no border and keeps the SDK's white tick, so it fills with
+     #021f18, a green below the brand ramp that stands out from both the tick and the bubble.
+     Both themes share the bubble, so one rule serves both. */
+  .str-chat__message--me .str-chat__poll {
+    --str-chat__button-secondary-text: #ffffff;
+    --str-chat__avatar-bg-default: #ffffff;
+    --str-chat__avatar-text-default: #065f46;
+    --str-chat__control-radio-check-bg-selected: #021f18;
+  }
+
+  /* Action buttons on an attachment in the user's own bubble, such as the Giphy preview's Send,
+     Shuffle and Cancel: white, like the bubble's text. */
+  .str-chat__message--me .str-chat__message-attachment-actions {
+    --str-chat__accent-primary: #ffffff;
+    --str-chat__button-primary-text: #ffffff;
+    --str-chat__button-secondary-text: #ffffff;
+  }
+
+  /* Mentions and links in the user's own text: white, since the brand greens don't read on the
+     bubble. Mentions stay bold, and links get an underline so they differ from the text around
+     them. */
+  .str-chat__message--me .str-chat__message-text {
+    --str-chat__accent-primary: #ffffff;
+    --str-chat__chat-text-link: #ffffff;
+  }
+
+  .str-chat__message--me .str-chat__message-text a {
+    text-decoration: underline;
+  }
+
+  /* Dark theme: the same brand, on a deep green-black instead of grey. */
+  .str-chat__theme-dark {
+    --str-chat__accent-primary: #34d399;
+    --str-chat__background-core-app: #0d1512;
+    --str-chat__background-core-elevation-1: #131d19;
+    --str-chat__background-core-highlight: #16302a;
+    --str-chat__background-core-surface-subtle: #18241f;
+    --str-chat__background-utility-hover: rgb(52 211 153 / 0.1);
+    --str-chat__background-utility-pressed: rgb(52 211 153 / 0.16);
+    --str-chat__background-utility-selected: rgb(52 211 153 / 0.2);
+    --str-chat__border-core-default: #24332d;
+    --str-chat__border-core-subtle: #1c2924;
+    --str-chat__text-primary: #eef5f1;
+    --str-chat__text-secondary: #b0c2b9;
+    --str-chat__text-tertiary: #97aaa1;
+    --str-chat__text-link: #6ee7b7;
+    --str-chat__chat-text-timestamp: #b0c2b9;
+
+    --str-chat__chat-bg-outgoing: #1a7f5a;
+    --str-chat__chat-bg-attachment-outgoing: #136c4c;
+    --str-chat__chat-border-outgoing: #1a7f5a;
+    --str-chat__chat-text-outgoing: #ffffff;
+    --str-chat__chat-border-on-chat-outgoing: #ffffff;
+    --str-chat__chat-poll-progress-fill-outgoing: #ffffff;
+    --str-chat__chat-poll-progress-track-outgoing: #021f18;
+    --str-chat__chat-bg-incoming: #1c2924;
+    --str-chat__chat-border-incoming: #24332d;
+    --str-chat__chat-text-incoming: #eef5f1;
+
+    --str-chat__avatar-bg-default: #12392c;
+    --str-chat__avatar-text-default: #6ee7b7;
+  }
+}
diff --git a/examples/cookbook/src/recipes/theming/replacing-the-icon-set/LucideFileIcon.tsx b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/LucideFileIcon.tsx
new file mode 100644
index 0000000000..57b9f0c0b6
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/LucideFileIcon.tsx
@@ -0,0 +1,44 @@
+import {
+  File,
+  FileArchive,
+  FileHeadphone,
+  FileImage,
+  FileSpreadsheet,
+  FileText,
+  FileVideoCamera,
+  type LucideIcon,
+} from 'lucide-react';
+import type { FileIconProps } from 'stream-chat-react';
+
+// Spreadsheets first, so `text/csv` doesn't fall under `text/`.
+const iconForMimeType = (mimeType = ''): LucideIcon => {
+  if (/spreadsheet|excel|csv/.test(mimeType)) return FileSpreadsheet;
+  if (/zip|compressed|tar/.test(mimeType)) return FileArchive;
+  if (mimeType.startsWith('image/')) return FileImage;
+  if (mimeType.startsWith('audio/')) return FileHeadphone;
+  if (mimeType.startsWith('video/')) return FileVideoCamera;
+  if (mimeType.startsWith('text/') || mimeType === 'application/pdf') return FileText;
+  return File;
+};
+
+type FileIconSize = NonNullable<FileIconProps['size']>;
+
+// The heights of the SDK's file icon sizes, in px. Lucide's icons are square.
+const heightBySize: Record<FileIconSize, number> = { lg: 40, md: 32, sm: 24, xl: 48 };
+
+/** The file-type icon on a file attachment, picked from the file's MIME type. */
+export const LucideFileIcon = ({
+  className,
+  mimeType,
+  size = 'md',
+  sizeConfig,
+}: FileIconProps) => {
+  const Icon = iconForMimeType(mimeType);
+  return (
+    <Icon
+      aria-hidden
+      className={`${className ?? ''} cookbook-file-icon`}
+      size={sizeConfig?.[size]?.height ?? heightBySize[size]}
+    />
+  );
+};
diff --git a/examples/cookbook/src/recipes/theming/replacing-the-icon-set/OpenMenuFromUrl.tsx b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/OpenMenuFromUrl.tsx
new file mode 100644
index 0000000000..32a8f35393
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/OpenMenuFromUrl.tsx
@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+
+const params = new URLSearchParams(window.location.search);
+const messageId = params.get('menu');
+const openAttachMenu = params.has('attach');
+
+// What to open: a message's actions menu, or the channel composer's attachment menu.
+const toggleSelector = messageId
+  ? `.str-chat__channel [data-message-id='${messageId}'] [data-testid='message-actions-toggle-button']`
+  : openAttachMenu
+    ? ".str-chat__channel [data-testid='invoke-attachment-selector-button']"
+    : undefined;
+const openMenuSelector = messageId
+  ? '.str-chat__message-actions-box--open'
+  : "[data-testid='attachment-selector-actions-menu']";
+
+/**
+ * For the screenshots only, not part of the recipe: `?menu=<message id>` opens that message's
+ * actions menu, and `?attach` the composer's attachment menu, as a user would. It clicks the
+ * toggle again until the menu is open, since a click before the UI is ready does nothing.
+ */
+export const OpenMenuFromUrl = () => {
+  useEffect(() => {
+    if (!toggleSelector) return;
+    const timer = setInterval(() => {
+      if (document.querySelector(openMenuSelector)) {
+        clearInterval(timer);
+        return;
+      }
+      document.querySelector<HTMLElement>(toggleSelector)?.click();
+    }, 600);
+    return () => clearInterval(timer);
+  }, []);
+  return null;
+};
diff --git a/examples/cookbook/src/recipes/theming/replacing-the-icon-set/WithLucideIcons.tsx b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/WithLucideIcons.tsx
new file mode 100644
index 0000000000..79d21ec8f5
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/WithLucideIcons.tsx
@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from 'react';
+import { WithComponents } from 'stream-chat-react';
+import { LucideFileIcon } from './LucideFileIcon';
+import { lucideIcons } from './lucideIcons';
+import './lucide-icons.css';
+
+// Declared once, so WithComponents gets the same object on every render.
+const overrides = { AttachmentFileIcon: LucideFileIcon, icons: lucideIcons };
+
+export const WithLucideIcons = ({ children }: PropsWithChildren) => (
+  <WithComponents overrides={overrides}>{children}</WithComponents>
+);
diff --git a/examples/cookbook/src/recipes/theming/replacing-the-icon-set/before.recipe.tsx b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/before.recipe.tsx
new file mode 100644
index 0000000000..92db073c1a
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/before.recipe.tsx
@@ -0,0 +1,7 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { OpenMenuFromUrl } from './OpenMenuFromUrl';
+
+// For the "before" screenshot: the base app with the SDK's own icons and the same menu open.
+const recipe: RecipeConfig = { chatViewChildren: <OpenMenuFromUrl /> };
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/theming/replacing-the-icon-set/default.recipe.tsx b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/default.recipe.tsx
new file mode 100644
index 0000000000..ad876d15c6
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/default.recipe.tsx
@@ -0,0 +1,11 @@
+import type { RecipeConfig } from '../../../base/recipe';
+import { OpenMenuFromUrl } from './OpenMenuFromUrl';
+import { WithLucideIcons } from './WithLucideIcons';
+
+// Every SDK icon replaced with its Lucide counterpart. OpenMenuFromUrl only serves the screenshot.
+const recipe: RecipeConfig = {
+  chatViewChildren: <OpenMenuFromUrl />,
+  Wrapper: WithLucideIcons,
+};
+
+export default recipe;
diff --git a/examples/cookbook/src/recipes/theming/replacing-the-icon-set/lucide-icons.css b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/lucide-icons.css
new file mode 100644
index 0000000000..24c8062fdb
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/lucide-icons.css
@@ -0,0 +1,25 @@
+@layer stream-overrides {
+  /*
+   * Lucide draws outlines. A few SDK rules fill the svg or the paths inside an icon, for example
+   * the image placeholder's picture icon, so the outlines are kept hollow here.
+   */
+  .cookbook-lucide-outline,
+  .cookbook-lucide-outline * {
+    fill: none;
+  }
+
+  /*
+   * The SDK's Stop button has no icon: its stylesheet reads a variable it never defines. The
+   * recipe gives it one: Lucide's circle-stop becomes the button's mask, and the accent token
+   * fills the shape the mask lets through. Only the mask's shape counts, not its stroke color.
+   */
+  .str-chat__stop-ai-generation-button {
+    background-color: var(--str-chat__accent-primary);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3C/svg%3E")
+      center / contain no-repeat;
+  }
+
+  .cookbook-file-icon {
+    color: var(--str-chat__accent-primary);
+  }
+}
diff --git a/examples/cookbook/src/recipes/theming/replacing-the-icon-set/lucideIcons.tsx b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/lucideIcons.tsx
new file mode 100644
index 0000000000..2163738e36
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/lucideIcons.tsx
@@ -0,0 +1,212 @@
+import {
+  Archive,
+  ArrowDown,
+  ArrowLeft,
+  ArrowUp,
+  ArrowUpRight,
+  Ban,
+  Bell,
+  BellDot,
+  BellOff,
+  Bookmark,
+  BookmarkMinus,
+  Camera,
+  ChartBar,
+  Check,
+  CheckCheck,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  CircleAlert,
+  CircleArrowDown,
+  CircleMinus,
+  CircleX,
+  Clock,
+  Copy,
+  Download,
+  Ellipsis,
+  Eye,
+  FaceSlightlySmiling,
+  FaceSlightlySmilingPlus,
+  File,
+  FileQuestionMark,
+  Flag,
+  Folder,
+  GripVertical,
+  Image,
+  ImagePlay,
+  Info,
+  Languages,
+  Link,
+  LoaderCircle,
+  LogOut,
+  type LucideIcon,
+  MapPin,
+  Megaphone,
+  Menu,
+  MessageSquare,
+  MessageSquareReply,
+  MessagesSquare,
+  Mic,
+  Minus,
+  Paperclip,
+  Pause,
+  Pencil,
+  Pin,
+  PinOff,
+  Play,
+  Plus,
+  Quote,
+  RefreshCw,
+  Reply,
+  RotateCcw,
+  Search,
+  Send,
+  Shield,
+  SquareSlash,
+  Trash,
+  TriangleAlert,
+  Trophy,
+  Upload,
+  User,
+  UserCheck,
+  UserMinus,
+  UserPlus,
+  Users,
+  Video,
+  Volume2,
+  VolumeOff,
+  X,
+  Zap,
+} from 'lucide-react';
+import { createIcon, type IconComponent, type IconName } from 'stream-chat-react';
+
+type LucideOptions = {
+  /**
+   * Draws the shape solid. Lucide draws outlines by default. Only plain shapes are filled (play,
+   * pause, video, message bubble): a Lucide icon with marks inside, such as the eye's pupil, the
+   * alerts' exclamation mark or the thread's arrow, would lose them, so those `…Fill` icons stay
+   * outlines.
+   */
+  filled?: boolean;
+  /** Flips the icon in right-to-left layouts, as the SDK does for its arrows. */
+  mirrorInRtl?: boolean;
+};
+
+/**
+ * Wraps a Lucide icon in the SDK's icon. `createIcon` derives the SDK's classes from the name
+ * (`IconSend` → `str-chat__icon--send`), so the SDK's styles for that icon still apply. Lucide
+ * draws on a 24×24 grid, so the SDK's svg gets that viewBox and Lucide's svg fills it.
+ */
+const fromLucide = (
+  name: IconName,
+  Lucide: LucideIcon,
+  { filled = false, mirrorInRtl = false }: LucideOptions = {},
+) =>
+  createIcon(
+    name,
+    filled ? (
+      <Lucide fill='currentColor' />
+    ) : (
+      <Lucide className='cookbook-lucide-outline' />
+    ),
+    { viewBox: '0 0 24 24', ...(mirrorInRtl && { 'data-rtl-mirror': '' }) },
+  );
+
+// Every SDK icon, by name. The `Record<IconName, …>` type fails the build when one is missing.
+const lucideIconMap: Record<IconName, [LucideIcon, LucideOptions?]> = {
+  IconArchive: [Archive],
+  IconArrowDown: [ArrowDown],
+  IconArrowDownCircle: [CircleArrowDown],
+  IconArrowLeft: [ArrowLeft, { mirrorInRtl: true }],
+  IconArrowUp: [ArrowUp],
+  IconArrowUpRight: [ArrowUpRight, { mirrorInRtl: true }],
+  IconAttachment: [Paperclip],
+  IconAudio: [Volume2, { mirrorInRtl: true }],
+  IconBell: [Bell],
+  IconBellOff: [BellOff],
+  IconBolt: [Zap],
+  IconBookmark: [Bookmark],
+  IconBookmarkRemove: [BookmarkMinus],
+  IconCamera: [Camera],
+  IconCheckmark: [Check],
+  IconCheckmark1Small: [Check],
+  IconChecks: [CheckCheck],
+  IconChevronDown: [ChevronDown],
+  IconChevronLeft: [ChevronLeft, { mirrorInRtl: true }],
+  IconChevronRight: [ChevronRight, { mirrorInRtl: true }],
+  IconClock: [Clock],
+  IconCommand: [SquareSlash],
+  IconCopy: [Copy],
+  IconDelete: [Trash],
+  IconDownload: [Download],
+  IconEdit: [Pencil],
+  IconEmoji: [FaceSlightlySmiling],
+  IconEmojiAdd: [FaceSlightlySmilingPlus],
+  IconExclamationCircleFill: [CircleAlert],
+  IconExclamationMark: [CircleAlert],
+  IconExclamationMarkFill: [CircleAlert],
+  IconExclamationTriangleFill: [TriangleAlert],
+  IconEyeFill: [Eye],
+  IconFile: [File],
+  IconFlag: [Flag],
+  IconFolder: [Folder],
+  IconGiphy: [ImagePlay],
+  IconImage: [Image],
+  IconInfo: [Info],
+  IconLeave: [LogOut],
+  IconLink: [Link],
+  IconLoading: [LoaderCircle],
+  IconLocation: [MapPin],
+  IconMegaphone: [Megaphone],
+  IconMenu: [Menu],
+  IconMessageBubble: [MessageSquare],
+  IconMessageBubbleFill: [MessageSquare, { filled: true }],
+  IconMessageBubbles: [MessagesSquare],
+  IconMicrophoneSolid: [Mic],
+  IconMinus: [Minus],
+  IconMinusCircle: [CircleMinus],
+  IconMore: [Ellipsis],
+  IconMute: [VolumeOff, { mirrorInRtl: true }],
+  IconNoSign: [Ban],
+  IconNotification: [BellDot],
+  IconPauseFill: [Pause, { filled: true }],
+  IconPin: [Pin],
+  IconPlayFill: [Play, { filled: true }],
+  IconPlus: [Plus],
+  IconPlusSmall: [Plus],
+  IconPoll: [ChartBar],
+  IconQuote: [Quote],
+  IconRefresh: [RefreshCw],
+  IconReorder: [GripVertical],
+  IconReply: [Reply, { mirrorInRtl: true }],
+  IconRetry: [RotateCcw],
+  IconSearch: [Search, { mirrorInRtl: true }],
+  IconSend: [Send, { mirrorInRtl: true }],
+  IconShield: [Shield],
+  IconThread: [MessageSquareReply],
+  IconThreadFill: [MessageSquareReply],
+  IconTranslate: [Languages],
+  IconTrophy: [Trophy],
+  IconUnpin: [PinOff],
+  IconUnsupportedAttachment: [FileQuestionMark],
+  IconUpload: [Upload],
+  IconUser: [User],
+  IconUserAdd: [UserPlus],
+  IconUserCheck: [UserCheck],
+  IconUserRemove: [UserMinus],
+  IconUsers: [Users],
+  IconVideo: [Video, { mirrorInRtl: true }],
+  IconVideoFill: [Video, { filled: true, mirrorInRtl: true }],
+  IconVoice: [Mic],
+  IconXCircle: [CircleX],
+  IconXmark: [X],
+  IconXmarkSmall: [X],
+};
+
+export const lucideIcons = Object.fromEntries(
+  Object.entries(lucideIconMap).map(([name, [Lucide, options]]) => [
+    name,
+    fromLucide(name as IconName, Lucide, options),
+  ]),
+) as Record<IconName, IconComponent>;
diff --git a/examples/cookbook/src/recipes/theming/replacing-the-icon-set/shots.json b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/shots.json
new file mode 100644
index 0000000000..4135c6cd9d
--- /dev/null
+++ b/examples/cookbook/src/recipes/theming/replacing-the-icon-set/shots.json
@@ -0,0 +1,38 @@
+[
+  {
+    "file": "replacing-the-icon-set-before.png",
+    "variant": "before",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "thread": "docs-v15-ck-design-4",
+      "menu": "docs-v15-ck-design-3"
+    },
+    "waitFor": ".str-chat__message-actions-box--open",
+    "settleMs": 1500
+  },
+  {
+    "file": "replacing-the-icon-set.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "thread": "docs-v15-ck-design-4",
+      "menu": "docs-v15-ck-design-3"
+    },
+    "waitFor": ".str-chat__message-actions-box--open",
+    "settleMs": 1500
+  },
+  {
+    "file": "replacing-the-icon-set-composer.png",
+    "query": {
+      "channel": "docs-v15-cb-design",
+      "attach": "1"
+    },
+    "viewport": {
+      "width": 1280,
+      "height": 440
+    },
+    "waitFor": "[data-testid='attachment-selector-actions-menu']",
+    "clip": ".str-chat__channel",
+    "padding": 0,
+    "settleMs": 1500
+  }
+]
diff --git a/examples/cookbook/src/vite-env.d.ts b/examples/cookbook/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/examples/cookbook/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/cookbook/tsconfig.app.json b/examples/cookbook/tsconfig.app.json
new file mode 100644
index 0000000000..42a9ac9b65
--- /dev/null
+++ b/examples/cookbook/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "resolveJsonModule": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/cookbook/tsconfig.json b/examples/cookbook/tsconfig.json
new file mode 100644
index 0000000000..d32ff68200
--- /dev/null
+++ b/examples/cookbook/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/cookbook/tsconfig.node.json b/examples/cookbook/tsconfig.node.json
new file mode 100644
index 0000000000..9728af2d81
--- /dev/null
+++ b/examples/cookbook/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/cookbook/vite.config.ts b/examples/cookbook/vite.config.ts
new file mode 100644
index 0000000000..d9e728778b
--- /dev/null
+++ b/examples/cookbook/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  // `stream-chat-react` is consumed as a workspace dependency, so Vite serves
+  // its built output from outside this app's root and resolves that copy's
+  // `react` import separately from the app's. Without deduping, the SDK and the
+  // app end up on two React instances and every hook call throws.
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+  },
+});
diff --git a/examples/vite/src/NewConversation/createConversation.ts b/examples/vite/src/NewConversation/createConversation.ts
index b603c106d3..399490fcd1 100644
--- a/examples/vite/src/NewConversation/createConversation.ts
+++ b/examples/vite/src/NewConversation/createConversation.ts
@@ -94,8 +94,10 @@ export const openOneToOne = async (
     : await client.queryChannelsAndHydrate(
         {
           filter_conditions: {
+            // Exactly the two of them: both are members, and there are two members. The server
+            // refuses `$eq` on `members`.
+            $and: memberIds.map((id) => ({ members: { $in: [id] } })),
             member_count: 2,
-            members: { $eq: memberIds },
             type: CHANNEL_TYPE,
           },
           limit: 10,
diff --git a/package.json b/package.json
index 15e9cc119f..68247b71b1 100644
--- a/package.json
+++ b/package.json
@@ -235,6 +235,7 @@
     "start:css": "node scripts/watch-styling.mjs",
     "start:ai-chatbot": "yarn workspace @stream-io/stream-chat-react-ai-chatbot dev",
     "start:tutorial": "yarn workspace @stream-io/stream-chat-react-tutorial dev",
+    "start:cookbook": "yarn workspace @stream-io/stream-chat-react-cookbook dev",
     "start:vite": "yarn workspace @stream-io/stream-chat-react-vite dev",
     "postinstall": "node -e \"require('fs').existsSync('scripts/install-husky.mjs') && import('./scripts/install-husky.mjs')\"",
     "test": "vitest run",
diff --git a/yarn.lock b/yarn.lock
index 9b9a40cdbe..a40107d54c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1757,6 +1757,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-leaflet/core@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@react-leaflet/core@npm:3.0.0"
+  peerDependencies:
+    leaflet: ^1.9.0
+    react: ^19.0.0
+    react-dom: ^19.0.0
+  checksum: 10c0/1e20f92ea99d378121d7ba57b9571ca3a67a86247729d8cd5726ded26105fcbffbbdf727da34b2ad5976438979819a38c93b94389313abb3ff80ca81632609a6
+  languageName: node
+  linkType: hard
+
 "@react-types/shared@npm:^3.34.0":
   version: 3.34.0
   resolution: "@react-types/shared@npm:3.34.0"
@@ -2192,6 +2203,29 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@stream-io/stream-chat-react-cookbook@workspace:examples/cookbook":
+  version: 0.0.0-use.local
+  resolution: "@stream-io/stream-chat-react-cookbook@workspace:examples/cookbook"
+  dependencies:
+    "@playwright/test": "npm:^1.60.0"
+    "@stream-io/state-store": "npm:^1.1.6"
+    "@types/leaflet": "npm:^1.9.20"
+    "@types/react": "npm:^19.2.15"
+    "@types/react-dom": "npm:^19.2.3"
+    "@vitejs/plugin-react": "npm:^6.0.3"
+    leaflet: "npm:^1.9.4"
+    lucide-react: "npm:^1.61.0"
+    modern-normalize: "npm:^3.0.1"
+    react: "npm:^19.2.6"
+    react-dom: "npm:^19.2.6"
+    react-leaflet: "npm:^5.0.0"
+    stream-chat: "npm:10.0.0-rc.25"
+    stream-chat-react: "workspace:^"
+    typescript: "npm:^6.0.3"
+    vite: "npm:^8.1.3"
+  languageName: unknown
+  linkType: soft
+
 "@stream-io/stream-chat-react-tutorial@workspace:examples/tutorial":
   version: 0.0.0-use.local
   resolution: "@stream-io/stream-chat-react-tutorial@workspace:examples/tutorial"
@@ -2551,6 +2585,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/geojson@npm:*":
+  version: 7946.0.16
+  resolution: "@types/geojson@npm:7946.0.16"
+  checksum: 10c0/1ff24a288bd5860b766b073ead337d31d73bdc715e5b50a2cee5cb0af57a1ed02cc04ef295f5fa68dc40fe3e4f104dd31282b2b818a5ba3231bc1001ba084e3c
+  languageName: node
+  linkType: hard
+
 "@types/hast@npm:^3.0.0, @types/hast@npm:^3.0.4":
   version: 3.0.4
   resolution: "@types/hast@npm:3.0.4"
@@ -2586,6 +2627,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/leaflet@npm:^1.9.20":
+  version: 1.9.22
+  resolution: "@types/leaflet@npm:1.9.22"
+  dependencies:
+    "@types/geojson": "npm:*"
+  checksum: 10c0/ce2e09d0f208244478c6103ba64726b33a474f89f303860c7b0494ca1bb44f1744285d93c90093c95669497c7dbdc7c206495af0b741fe6e251bf106b0415593
+  languageName: node
+  linkType: hard
+
 "@types/linkifyjs@npm:^2.1.7":
   version: 2.1.7
   resolution: "@types/linkifyjs@npm:2.1.7"
@@ -6625,6 +6675,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"leaflet@npm:^1.9.4":
+  version: 1.9.4
+  resolution: "leaflet@npm:1.9.4"
+  checksum: 10c0/f639441dbb7eb9ae3fcd29ffd7d3508f6c6106892441634b0232fafb9ffb1588b05a8244ec7085de2c98b5ed703894df246898477836cfd0ce5b96d4717b5ca1
+  languageName: node
+  linkType: hard
+
 "levn@npm:^0.4.1":
   version: 0.4.1
   resolution: "levn@npm:0.4.1"
@@ -7111,6 +7168,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react@npm:^1.61.0":
+  version: 1.61.0
+  resolution: "lucide-react@npm:1.61.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/85576d32aef43d5dccf5a1fac06b67c2ccbb70eb33b996123f49aab108111fffa6bdd517c7d406db67a14432c45924279c2ec7212a166864d3355ce68b361494
+  languageName: node
+  linkType: hard
+
 "lz-string@npm:^1.5.0":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
@@ -9170,6 +9240,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-leaflet@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "react-leaflet@npm:5.0.0"
+  dependencies:
+    "@react-leaflet/core": "npm:^3.0.0"
+  peerDependencies:
+    leaflet: ^1.9.0
+    react: ^19.0.0
+    react-dom: ^19.0.0
+  checksum: 10c0/f0b6fb797cc2d81bc8cbb54e0cb32aefa689d35ca5f52d203ce3c5a1d14668e51244f10844bd2c88d5cb4aca5eb05bc280794e6d1652727ff9da2358e89d1b86
+  languageName: node
+  linkType: hard
+
 "react-markdown@npm:^9.1.0":
   version: 9.1.0
   resolution: "react-markdown@npm:9.1.0"