# 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.](@chat-sdk/ios/v4/_assets/whatsapp-header.png)

### Custom Message Composer

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

![Screenshot of the message composer.](@chat-sdk/ios/v4/_assets/apple-composer.png)

### 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.](@chat-sdk/ios/v4/_assets/bottom-reactions.png)

### 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.](@chat-sdk/ios/v4/_assets/swiftui-left-aligned.png)

### Custom Channel List

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

![Screenshot of the custom channel list.](@chat-sdk/ios/v4/_assets/custom-channel-list.png)

### Custom Message List

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

![Screenshot of the custom message list.](@chat-sdk/ios/v4/_assets/custom-message-list.png)

### 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.](@chat-sdk/ios/v4/_assets/creating-channels.png)


---

This page was last updated at 2026-04-17T17:33:37.572Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/ios/v4/swiftui/swiftui-cookbook/overview/](https://getstream.io/chat/docs/sdk/ios/v4/swiftui/swiftui-cookbook/overview/).