# Recipes overview > **Info:** This is release candidate documentation for **Stream Chat React SDK v15**. For the latest stable version, see the [latest version (v14)](https://getstream.io/chat/docs/sdk/react/). Each recipe is a complete, working example of one customization: the components, the CSS, and what happens when the code runs. Recipes apply the mechanisms the [UI](https://getstream.io/chat/docs/sdk/react/v15/ui/how-components-connect-to-state/) section explains, such as [Overriding components](https://getstream.io/chat/docs/sdk/react/v15/ui/customizing/overriding-components/), [Actions](https://getstream.io/chat/docs/sdk/react/v15/ui/customizing/actions/) and [Workspace with ChatView](https://getstream.io/chat/docs/sdk/react/v15/ui/layout/workspace-with-chatview/), and link to them instead of explaining them again. ## Choosing where to start Make the smallest change that gets you there, in this order: 1. **Restyle.** Colors, spacing and shapes come from design tokens and CSS classes; see [Theming](https://getstream.io/chat/docs/sdk/react/v15/ui/customizing/theming/). It's the change most likely to keep working when the SDK updates its components. 2. **Replace one part.** Most parts have a key in `ComponentContext`. Replace the smallest part that makes the change, such as one row of the channel list rather than the whole list. 3. **Compose.** `Channel`, `Thread` and the layout's slots render only the children you give them. Leave parts out, add your own, or change their order. 4. **Change behaviour in the state layer.** What a send does, what a list loads or what a search finds is configured on the state objects, not in components; see [How the SDK is built](https://getstream.io/chat/docs/sdk/react/v15/getting-started/how-the-sdk-is-built/). A replaced part has to handle every case the default handles. Test it with the kinds of data your app has, and again after you update the SDK. ## Channel list - [Preview UI](https://getstream.io/chat/docs/sdk/react/v15/recipes/channel-list/preview-ui/): a channel-list row of your own, with the avatar, title, time, unread badge and last message the SDK computes for it. - [Members and online status](https://getstream.io/chat/docs/sdk/react/v15/recipes/channel-list/members-and-online-status/): a list of the open channel's members that shows who is online and updates as they come and go. - [Search customization](https://getstream.io/chat/docs/sdk/react/v15/recipes/channel-list/search-customization/): the search bar's settings, compact channel results, and search moved into a top bar. ## Message - [Custom message](https://getstream.io/chat/docs/sdk/react/v15/recipes/message/custom-message/): a message UI built step by step, with avatars, formatted text, metadata, actions and reactions. - [Pin indicator](https://getstream.io/chat/docs/sdk/react/v15/recipes/message/pin-indicator/): the "Pinned by" line restyled with CSS, or replaced with one that shows the pin's date and an Unpin button. - [System message](https://getstream.io/chat/docs/sdk/react/v15/recipes/message/system-message/): system messages with the event, its time and the user who triggered it. - [Custom message actions](https://getstream.io/chat/docs/sdk/react/v15/recipes/message/custom-message-actions/): a menu item and a quick button added to the message actions, and default actions removed. ## Composer - [Custom composer](https://getstream.io/chat/docs/sdk/react/v15/recipes/composer/custom-composer/): a composer with a layout of its own, built from the SDK's composer parts, so sending, uploads, suggestions and drafts keep working. - [Attachment previews](https://getstream.io/chat/docs/sdk/react/v15/recipes/composer/attachment-previews/): the previews above the input, such as attachments with their upload progress and voice recordings, replaced one kind at a time. - [Attachment actions](https://getstream.io/chat/docs/sdk/react/v15/recipes/composer/attachment-actions/): "Love" and "Loathe" buttons under every image a user sends, added by composer middleware and turned into reactions in the message list. - [Custom suggestions](https://getstream.io/chat/docs/sdk/react/v15/recipes/composer/custom-suggestions/): how the suggestion list and its rows look while the user types a mention, a command or an emoji, including rows for a trigger of your own. ## Headers - [Channel header](https://getstream.io/chat/docs/sdk/react/v15/recipes/headers/channel-header/): a channel header of your own, with the channel's title, image and who is typing. - [Thread header](https://getstream.io/chat/docs/sdk/react/v15/recipes/headers/thread-header/): a compact thread header with a title and subtitle of your own. ## App - [Search menu](https://getstream.io/chat/docs/sdk/react/v15/recipes/app/search-menu/): an app menu next to the search bar, with items such as the profile and signing out. - [Collapsible sidebar](https://getstream.io/chat/docs/sdk/react/v15/recipes/app/collapsible-sidebar/): a channel-list sidebar the user can hide and show, with the toggle in the headers. - [Hide history for new members](https://getstream.io/chat/docs/sdk/react/v15/recipes/app/hide-history-for-new-members/): a dialog that sets how much of the channel's history a member sees when you add them. - [System notification banner](https://getstream.io/chat/docs/sdk/react/v15/recipes/app/system-notification-banner/): a banner that shows while the client can't reach Stream, from the system notification `Chat` publishes. ## Layout - [Channel and thread side by side](https://getstream.io/chat/docs/sdk/react/v15/recipes/layout/channel-and-thread-side-by-side/): the open channel with its thread in a column beside it, and the space given back when the thread closes. - [⌘/ctrl-click opens beside](https://getstream.io/chat/docs/sdk/react/v15/recipes/layout/ctrl-click-opens-beside/): a ⌘-click or ctrl-click on a channel in the list opens it beside the open channel, while a plain click still replaces it. - [Single-pane mobile with back button](https://getstream.io/chat/docs/sdk/react/v15/recipes/layout/single-pane-mobile-with-back-button/): on a phone, the channel list, a channel and a thread one at a time at full width, with the header's back button and the browser's back going back one step. - [Saving and restoring the layout](https://getstream.io/chat/docs/sdk/react/v15/recipes/layout/saving-and-restoring-the-layout/): a reload that puts the user back in the view and channel they had open, and the open channel kept in the URL. --- For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v15/recipes/overview/](https://getstream.io/chat/docs/sdk/react/v15/recipes/overview/).