Overview

UI Cookbook

This cookbook aims to show you how to build your own chat UI elements.

Custom Channel Header

In this part, we will build a custom channel header, similar to the one in WhatsApp.

Screenshot of the channel header.

Custom Message Composer

In this section, we will re-create Apple’s composer, introduced in iOS 17.

Screenshot of the message composer.

Reactions reordering

Here we will show you how to move the reactions to the bottom of the message, instead of the default top.

Screenshot of the bottom reactions.

Left alignment of messages

This example will show you how to always align the messages to the left.

Screenshot of the left aligned message list.

Custom Channel List

We will build a channel list using the low-level client state in this section.

Screenshot of the custom channel list.

Custom Message List

We will build a message list using the low-level client state in this section.

Screenshot of the custom message list.

Creating Channels Flow

In this section, we will build a view that allows you to create new chats.

Screenshot of the view for creating chats.

© Getstream.io, Inc. All Rights Reserved.