Cookbooks Overview

Each UI cookbook is a complete, working example of one customization: the components, the styles, and what happens when the code runs. UI cookbooks apply the mechanisms the UI section explains, such as Overriding components, Actions, Theming and Navigation, 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, sizes and fonts come from the theme: semantic tokens such as accentPrimary, and a style for each part of each component. See 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 ComponentsContext, which you replace through WithComponents. Replace the smallest part that makes the change, such as one row of the channel list rather than the whole list.
  3. Compose. Besides the attachment picker, Channel and Thread render only the children you give them. Leave parts out, add your own, such as a header, or change their order.
  4. Change behavior 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.

A replaced part has to handle every case the default handles. Test it with the kinds of data your app has, on iOS and on Android, and again after you update the SDK.

Theming

  • Replacing the icon set: the SDK's icons replaced with Lucide, except the brand logos and two shapes Lucide has no counterpart for, with the colors and sizes the SDK passes, directional icons flipped in right-to-left layouts, and the file-type icons.
  • Incoming and outgoing styles: different colors for the user's own messages, with semantic tokens and myMessageTheme.

Channel list

  • Preview UI: a channel-list row of your own, with the avatar, title, time, unread badge and message line the SDK computes for it, and a "Load more" button instead of infinite scroll.
  • Members and online status: the members of the open channel in a row above the messages, with an online dot that follows presence as members come and go.
  • Channel backgrounds: an image behind a channel's messages that the user picks for each channel, and behind the channel list.
  • Starting a conversation: a screen that picks people from a search and opens the user's existing direct conversation or a new one that is created when its first message is sent, opened from a button above the channel list.
  • Empty and loading states: placeholder rows while the first page loads, an error with a Retry button, and an empty list with a New conversation button.
  • Pinned and archived channels: pin and archive buttons on every row, with an inbox that keeps pinned channels on top and an archive to switch to.
  • Channel invites: an Invitations section above the channel list, with the channel, who invited the user, and Accept and Decline buttons, and new invitations shown as they arrive.

Search

  • Search screen: one input that searches channels, people and messages, with a filter and a sort for each source, results grouped or mixed, and a tap that opens the channel, the message or the conversation.
  • Mentions inbox: a screen that lists the messages that mention the user, newest first, with a Load more button, and opens a mention in its channel at its message.

Message list

  • Custom message: a message view built step by step from the SDK's parts, and the default view decorated or wrapped in a gesture.
  • System message: messages that report a channel event, such as a member joining, restyled and replaced with a card of your own.
  • Pin indicator: the "Pinned by" line and the highlight of a pinned message restyled, and replaced with a chip that shows who pinned it, when, and an Unpin button.
  • Pinned-messages bar: a bar under the channel header that shows the channel's pinned messages one at a time and jumps to each in the message list.
  • Unread and scroll controls: the unread separator, the unread notification and the scroll-to-bottom button restyled with the theme and replaced with controls of your own.
  • Read-receipt avatars: member avatars under each member's last read message, which move down as the members read on.
  • Image gallery: the grid of a message's images and videos restyled and replaced with a row of tiles with a "+N" count, and the viewer's footer replaced with a caption and a strip of thumbnails.
  • Giphy preview: the /giphy preview that only the user sees, with its search term and its Send, Shuffle and Cancel buttons replaced.
  • Status indicators: the sent, delivered and read marks on the user's own messages changed or hidden, and a sheet that lists who received and who read a message.
  • Date separators: when the date separators show, their text and look, and days that hold only system messages.
  • Livestream message list: a busy chat next to a video, with the events and the rendering tuned for a large audience.

Message actions

  • Custom message actions: an action of your own in the message menu, default actions removed and reordered, and items that render differently.
  • Custom reactions: a reaction set of your own drawn as images, with its own picker and list of who reacted.
  • Editing a poll: an Edit Poll item in the message menu and a sheet filled from the poll, where the user changes the question, the options and two settings.

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: the previews above the input replaced one kind at a time, with square thumbnails, the upload progress as a percentage and compact voice recordings.
  • Custom suggestions: how the suggestion list and its rows look while the user types a mention, a command or an emoji, and a list for a trigger of your own.
  • Inline message editing: a message edited where it sits in the list, with an editor card in its place and Cancel and Save buttons, while the composer at the bottom keeps its text.
  • GIF picker: a GIF button in the attachment picker's bar that opens a sheet with search and trending GIFs, and sends the picked GIF as a giphy attachment.
  • Poll with text and attachments: a creation sheet that adds the poll to the composer, a card above the input, and one message with the poll, the text and the attachments.
  • Commands UI: a bar above the input that shows the picked command and its arguments, with a button that cancels it.
  • Emoji suggestions: emoji suggested as the user types : and a few letters, including emoji of your app's own.
  • File compression: photos and videos made smaller before they're uploaded, to Stream's CDN or to your own storage.

Custom attachments

  • Product card: an attachment type of your own, added by the composer and rendered as a card in the message list.
  • Location sharing: a location tab in the attachment picker that shares the user's position once or live, and a full-screen map that follows it.

Headers

  • Channel header: a channel header of your own, with a back button that counts the unread messages elsewhere, the channel's name and avatar, and who is typing or the connection status.
  • Thread header: a thread header of your own, with the participants' avatars, and the channel name and reply count or who is typing a reply.

Screens and sheets

  • Hide history for new members: a modal that sets how much of the channel's history members see when you add them.
  • User details: a bottom sheet with a person's status, a Send message button, Mute and Block, and the group channels they share, opened from an avatar or a mention.
  • Message info: a screen from the message menu that lists who has read the user's message and who has only received it, with times, and stays current while it is open.
  • Threads view: a Threads tab with rows of your own, the unread thread count, and a thread screen.
  • Custom poll flow: a poll's results, comments and creation form as screens of your navigation instead of modals.

Channel details

  • Custom navigation: the screens channel details opens, such as the member list and the media, as screens of your navigator.
  • Custom channel actions: actions added to, hidden from or replaced in the actions section of channel details.
  • Custom navigation items: a row of your own in the navigation section of channel details, rows hidden, and the rows reordered.
  • Custom member actions: an action of your own in a member's sheet, such as sending them a direct message, and actions hidden.
  • Custom member roles: role badges of your own next to members' names, and one badge styled differently.

Notifications

  • System notification banner: a bar at the top of the app for notifications about the whole app, such as a lost connection, published by your app.
  • Custom snackbars: the in-app notification snackbar restyled, replaced with a card of your own, and moved to the top of the list as a banner.

AI

  • AI chat widget: a round launcher on a screen that opens the user's conversation with the assistant in a full screen modal, with the message list, the AI state indicator and the composer.
  • Streamed answers with a stop button: the assistant's answer typed out as it is written, a status line for every AI state, and a Stop button of your own in place of the send button.
  • Voice agent visuals: a voice panel above the assistant's channel with a glow that follows the assistant's voice, a wave that follows the user's microphone, a status line and an End button.