Skip to main content

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.

Did you find this page helpful?