# Overview

The Stream Chat React Native SDK includes a set of foundational UI primitives located in `components/ui`. These components form the building blocks used throughout higher-level chat components such as [`ChannelList`](/chat/docs/sdk/react-native/core-components/channel-list/), [`MessageList`](/chat/docs/sdk/react-native/ui-components/message-list/), and [`MessageComposer`](/chat/docs/sdk/react-native/ui-components/message-composer/).

Unlike the higher-level chat components, these base UI components are **not tied to any chat context or data**. They are pure presentational primitives that accept props and render UI. This makes them ideal for building custom UIs or extending the SDK with your own layouts.

## Available Components

| Category   | Components                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Avatar** | [`Avatar`](/chat/docs/sdk/react-native/ui-components/base-ui/avatar/), [`UserAvatar`](/chat/docs/sdk/react-native/ui-components/base-ui/user-avatar/), [`ChannelAvatar`](/chat/docs/sdk/react-native/ui-components/base-ui/channel-avatar/), [`AvatarGroup`](/chat/docs/sdk/react-native/ui-components/base-ui/avatar-group/), [`AvatarStack`](/chat/docs/sdk/react-native/ui-components/base-ui/avatar-stack/)                                                                                                        |
| **Badge**  | [`BadgeCount`](/chat/docs/sdk/react-native/ui-components/base-ui/badge-count/), [`BadgeNotification`](/chat/docs/sdk/react-native/ui-components/base-ui/badge-notification/), [`OnlineIndicator`](/chat/docs/sdk/react-native/ui-components/base-ui/online-indicator/), [`ErrorBadge`](/chat/docs/sdk/react-native/ui-components/base-ui/error-badge/), [`GiphyBadge`](/chat/docs/sdk/react-native/ui-components/base-ui/giphy-badge/), [`ImgurBadge`](/chat/docs/sdk/react-native/ui-components/base-ui/imgur-badge/) |
| **Button** | [`Button`](/chat/docs/sdk/react-native/ui-components/base-ui/button/)                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **Input**  | [`Input`](/chat/docs/sdk/react-native/ui-components/base-ui/input/)                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Media**  | [`VideoPlayIndicator`](/chat/docs/sdk/react-native/ui-components/base-ui/video-play-indicator/), [`SpeedSettingsButton`](/chat/docs/sdk/react-native/ui-components/base-ui/speed-settings-button/), [`GiphyChip`](/chat/docs/sdk/react-native/ui-components/base-ui/giphy-chip/)                                                                                                                                                                                                                                       |

## Theming

All base UI components are theme-aware. They consume the theme via the `useTheme` hook from the [`ThemeContext`](/chat/docs/sdk/react-native/contexts/theme-context/), making them automatically adapt to light and dark mode. Colors, spacing, border radii, and typography values are sourced from the SDK's design token system (`primitives` and `semantics`).


---

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

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/overview/](https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/overview/).