# Entry points and CSS files
> **Info:** This is release candidate documentation for **Stream Chat React SDK v15**. For the latest stable version, see the [latest version (v14)](https://getstream.io/chat/docs/sdk/react/).
An app that shows a channel list and a channel imports its components from `stream-chat-react` and loads `index.css`. If it adds the emoji picker, it also imports `EmojiPicker` from `stream-chat-react/emojis`, installs `emoji-mart` and `@emoji-mart/data`, and loads `emoji-picker.css`.
This page lists every entry point of the package: what it exports, which stylesheet it needs and which packages you install for it. The [Installation](https://getstream.io/chat/docs/sdk/react/v15/getting-started/installation/#entry-points-and-css-files) page has the short version.
| Entry point | What it's for | Stylesheet | Packages you install |
| ---------------------------------- | ------------------------------------------------------------ | ----------------------- | ----------------------------------- |
| `stream-chat-react` | Components, contexts and hooks | `index.css` | none |
| `stream-chat-react/slot-layout` | Layout: `ChatView` and its slots | included in `index.css` | none |
| `stream-chat-react/slot-geometry` | Slot geometry: which layout slots are collapsed or covered | none | none |
| `stream-chat-react/channel-detail` | Channel details: members, media, files, pinned messages | `channel-detail.css` | none |
| `stream-chat-react/emojis` | Emoji picker and emoji suggestions in the composer | `emoji-picker.css` | `emoji-mart` and `@emoji-mart/data` |
| `stream-chat-react/mp3-encoder` | MP3 encoding for voice recordings | none | `@breezystack/lamejs` |
| `stream-chat-react/ai-components` | AI components: streaming messages, Markdown, the AI composer | `ai-components.css` | none |
Every optional part is its own entry point, so an app that never imports it doesn't bundle it. The main entry point never imports from the others. Each entry point ships ES modules, CommonJS and TypeScript types.
## `stream-chat-react`
The core UI. It needs `stream-chat`, `react` and `react-dom`, which you install with it, and the `index.css` stylesheet.
It doesn't re-export `stream-chat`. Import the client and the state classes, such as `StreamChat` and `ChannelPaginator`, from `stream-chat` itself.
The main exports by area:
| Area | Main exports | Explained in |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| Setup | `Chat`, `useCreateChatClient`, `useChatContext`, `Streami18n`, `useTranslationContext` | [Chat](https://getstream.io/chat/docs/sdk/react/v15/component-reference/chat/chat/) |
| Reading state | `useStateStore`, `useChannel`, `useChannelInstanceContext`, `useMessagePaginator`, `useMessageContext` | [Reading state in components](https://getstream.io/chat/docs/sdk/react/v15/ui/reading-state-in-components/) |
| Channel list | `ChannelList`, `ChannelLists`, `ChannelNavigation`, `ChannelListHeader`, `ChannelListItem`, `useChannelPaginatorState` | [Channel list UI](https://getstream.io/chat/docs/sdk/react/v15/ui/components/channel-list-ui/) |
| Channel | `Channel`, `ChannelPlaceholder`, `ChannelHeader`, `TypingIndicator`, `useChannelCapabilities` | [Channel UI](https://getstream.io/chat/docs/sdk/react/v15/ui/components/channel-ui/) |
| Message list | `MessageList`, `VirtualizedMessageList`, `Message`, `MessageUI`, `MessageActions`, `MessageReactions`, `ReactionSelector`, `Attachment`, `Poll`, `Avatar` | [Message list UI](https://getstream.io/chat/docs/sdk/react/v15/ui/components/message-list-ui/) |
| Message composer | `MessageComposer`, `TextareaComposer`, `AttachmentSelector`, `AttachmentPreviewList`, `SendButton`, `WithDragAndDropUpload`, `useMessageComposerController` | [Message composer UI](https://getstream.io/chat/docs/sdk/react/v15/ui/components/message-composer-ui/) |
| Threads | `Thread`, `ThreadHeader`, `ThreadList`, `ThreadListItem`, `useThreadContext`, `useThreadList` | [Thread UI](https://getstream.io/chat/docs/sdk/react/v15/ui/components/thread-ui/) |
| Search | `Search`, `SearchBar`, `SearchResults`, `useSearchContext` | [Search](https://getstream.io/chat/docs/sdk/react/v15/features/channels/search/) |
| Overriding components | `WithComponents`, `ComponentProvider`, `useComponentContext`, `createIcon` and the `Icon*` components | [Overriding components](https://getstream.io/chat/docs/sdk/react/v15/ui/customizing/overriding-components/) |
| Actions | `defaultMessageActionSet`, `useBaseMessageActionSetFilter`, `defaultAttachmentSelectorActionSet` | [Actions](https://getstream.io/chat/docs/sdk/react/v15/ui/customizing/actions/) |
| Notifications | `NotificationList`, `useNotifications`, `useNotificationApi`, `useSystemNotifications` | [Displaying notifications](https://getstream.io/chat/docs/sdk/react/v15/ui/customizing/displaying-notifications/) |
| Dialogs and menus | `ContextMenu`, `DialogManagerProvider`, `useDialog`, `GlobalModal` | [Dialogs](https://getstream.io/chat/docs/sdk/react/v15/ui/customizing/dialogs/) |
| Navigation | `useWorkspaceNavigation`, `WorkspaceNavigationProvider`, `WorkspaceNavigationBackButton`, `WorkspaceNavigationCloseButton` | [Navigation](https://getstream.io/chat/docs/sdk/react/v15/ui/layout/navigation/) |
| Connection | `useNetworkConnectionState`, `useWSConnectionState` | [Connection status](https://getstream.io/chat/docs/sdk/react/v15/features/app-experience/connection-status/) |
| Voice and audio | `AudioRecorder`, `VoiceRecording`, `useAudioPlayer` | [Voice recordings and audio playback](https://getstream.io/chat/docs/sdk/react/v15/features/rich-content/voice-recordings-and-audio-playback/) |
| AI state and streaming | `AIStateIndicator`, `useAIState`, `StreamedMessageText`, `useMessageTextStreaming` | [SDK integration](https://getstream.io/chat/docs/sdk/react/v15/features/ai/sdk-integration/) |
| Accessibility | `AriaLiveAnnouncerProvider`, `useAriaLiveAnnouncer`, `SkipNavigation`, `VisuallyHidden` | [Accessibility](https://getstream.io/chat/docs/sdk/react/v15/features/app-experience/accessibility/) |
Reference → Hooks lists the hooks by state area, starting with [State and entity hooks](https://getstream.io/chat/docs/sdk/react/v15/reference/hooks/state-and-entity-hooks/). Every component's props are in the Component reference, starting with [Chat](https://getstream.io/chat/docs/sdk/react/v15/component-reference/chat/chat/).
## `stream-chat-react/slot-layout`
The optional layout: `ChatView` decides where a channel or a thread opens. Its styles are part of `index.css`, and it needs no other package.
- **Components:** `ChatView`, `ChannelSlot`, `ThreadSlot`, `ThreadListSlot`, `Slot`, `WorkspaceLayout`, `ChatViewSelectorButton`, `ChatViewChannelsSelectorButton`, `ChatViewThreadsSelectorButton`, `ChatViewEmptyPlaceholder` and `DisposedChannelRelease`.
- **Hooks:** `useChatViewContext`, `useChatViewNavigation`, `useLayoutViewState`, `useActiveThread`, `useSlotChannel`, `useSlotChannels`, `useSlotThread`, `useSlotThreads`, `useSlotEntity`, `useSlotEntities`, `useSlotTopLayerEntity`, `useSlotForKey` and `useSlotForKind`.
- **Saving and restoring:** `serializeLayoutState` and `restoreLayoutState`.
- **Types:** `ChatViewProps`, `ChatViewSlotRenderers`, `DeriveWorkspaceNavigation` and `LayoutController`. `LayoutController` is a type only; reach the instance through `useChatViewContext().layoutController`.
The navigation interface itself, `useWorkspaceNavigation()`, comes from `stream-chat-react`. `ChatView` provides it. Without a layout, it does nothing until you provide your own `WorkspaceNavigationProvider`.
See [Workspace with ChatView](https://getstream.io/chat/docs/sdk/react/v15/ui/layout/workspace-with-chatview/) and the [ChatView components](https://getstream.io/chat/docs/sdk/react/v15/component-reference/layout/chatview-components/) reference.
## `stream-chat-react/slot-geometry`
Detects which layout slots the user can't see: slots collapsed to nothing, or covered by another slot. It only reports; your app decides what to do, for example closing the slot that covers another. It has no stylesheet and needs no other package.
- `SlotGeometryProvider` measures the slots registered inside it.
- `useRegisterSlotGeometry(slot)` returns a callback ref for the element that backs a slot.
- `useSlotGeometry()` returns `coverage` (which slots are obscured), `isObscured(slot)`, and `requestReveal`, `revealSlot` and `clearReveal` for revealing a slot after navigation.
- `resolveRevealAction(revealSlot, coverage)` tells you whether to wait, reveal the slot (`'act'`) or clear the request.
Slot ids are plain strings, so it works with any layout, not only `ChatView`. See [Responsive layouts](https://getstream.io/chat/docs/sdk/react/v15/ui/layout/responsive-layouts/) and the [Slot geometry](https://getstream.io/chat/docs/sdk/react/v15/component-reference/layout/slot-geometry/) reference.
## `stream-chat-react/channel-detail`
The channel details views. Load `channel-detail.css` after `index.css`. It needs no other package.
- **Components:** `ChannelDetail`, `AvatarWithChannelDetail`, `ChannelDetailProvider` and `SectionNavigator`, with the views `ChannelMembersView`, `ChannelMemberDetail`, `ChannelMediaView`, `ChannelFilesView`, `PinnedMessagesView` and `ChannelManagementView`, and nav buttons that open them.
- **Sections:** `defaultChannelDetailSections`.
- **Action sets:** `defaultChannelManagementActionSet`, `defaultChannelMemberActionSet` and `defaultChannelMembersHeaderActionSet`, with their filter hooks `useBaseChannelManagementActionSetFilter`, `useBaseChannelMemberActionSetFilter` and `useBaseChannelMembersHeaderActionSetFilter`.
- **Hooks:** `useChannelDetailContext`, `useSectionNavigatorContext`, `useChannelMembersSearch`, `useChannelMediaSearch`, `useChannelFilesSearch` and `usePinnedMessagesSearch`.
See [Channel details and members](https://getstream.io/chat/docs/sdk/react/v15/features/channels/channel-details-and-members/) and the [Channel Detail](https://getstream.io/chat/docs/sdk/react/v15/component-reference/channel-detail/channel-detail/) reference.
## `stream-chat-react/emojis`
The emoji picker and emoji suggestions in the composer. Load `emoji-picker.css` after `index.css`, and install two packages:
```bash
npm install emoji-mart @emoji-mart/data
```
- `EmojiPicker` is the picker button and popover. Register it as the `EmojiPicker` component override. It loads `@emoji-mart/data` the first time the picker opens. You don't need `@emoji-mart/react`: the SDK wraps the emoji-mart picker itself.
- `createTextComposerEmojiMiddleware(emojiSearchIndex, options?)` creates the text composer middleware that suggests emojis when the user types `:` followed by part of an emoji name. Pass emoji-mart's `SearchIndex`, after calling emoji-mart's `init({ data })`.
```tsx
import type { PropsWithChildren } from "react";
import { WithComponents } from "stream-chat-react";
import { EmojiPicker } from "stream-chat-react/emojis";
import "stream-chat-react/dist/css/index.css";
import "stream-chat-react/dist/css/emoji-picker.css";
export const WithEmojiPicker = ({ children }: PropsWithChildren) => (
{children}
);
```
See [Emoji](https://getstream.io/chat/docs/sdk/react/v15/features/rich-content/emoji/) for the suggestions setup, and the [Emoji Picker](https://getstream.io/chat/docs/sdk/react/v15/component-reference/message-composer/emoji-picker/) reference.
## `stream-chat-react/mp3-encoder`
Encodes voice recordings as MP3. By default the SDK converts recordings to WAV, except on browsers that record `audio/mp4`, such as Safari, whose recordings it keeps as they are. With this encoder it converts those recordings to MP3 instead; `audio/mp4` recordings still stay as they are. It has no stylesheet. Install the encoder package:
```bash
npm install @breezystack/lamejs
```
It exports one function, `encodeToMp3(file: File, sampleRate: number): Promise`. It loads `@breezystack/lamejs` when it encodes the first recording. Pass it as the encoder of the composer's audio recordings:
```tsx
import { MessageComposer } from "stream-chat-react";
import { encodeToMp3 } from "stream-chat-react/mp3-encoder";
export const VoiceMessageComposer = () => (
);
```
See [Voice recordings and audio playback](https://getstream.io/chat/docs/sdk/react/v15/features/rich-content/voice-recordings-and-audio-playback/).
## `stream-chat-react/ai-components`
Components for AI chat. Load `ai-components.css` after `index.css`. The packages these components use, such as `react-markdown`, `react-syntax-highlighter` and `chart.js`, come with `stream-chat-react`, so there's nothing else to install. The Chart.js renderer loads only when a message contains a chart.
- `AIMessageComposer`: a composer with attachments, speech to text and model selection. Its parts are `AIMessageComposer.FileInput`, `.TextInput`, `.SpeechToTextButton`, `.SubmitButton`, `.ModelSelect` and `.AttachmentPreview`.
- `AIMarkdown`: renders Markdown with syntax highlighting and charts.
- `StreamingMessage`: shows text as it streams in, with a typewriter effect.
- `AIStateIndicator`: an animated "thinking" indicator with an optional `text`.
- Hooks: `useAIMessageComposerContext`, `useAttachments`, `useText`, `useIsDisabled` and `useSpeechToText`.
Two components share a name. `AIStateIndicator` from `stream-chat-react` shows the AI state of a channel. `AIStateIndicator` from `stream-chat-react/ai-components` is the presentational indicator above. `useMessageTextStreaming` is exported from `stream-chat-react`, not from here.
See the [AI integrations overview](https://getstream.io/chat/docs/sdk/react/v15/features/ai/ai-integrations-overview/) and the [AI hooks](https://getstream.io/chat/docs/sdk/react/v15/reference/hooks/ai-hooks/) reference.
## CSS files
The package ships compiled CSS only, no SCSS sources. Every file is in `stream-chat-react/dist/css/`. The same files are also exported as `stream-chat-react/css/`.
| File | Contains | Load it |
| ----------------------- | -------------------------------------------------------------------------------- | ----------------------------------------------- |
| `index.css` | The theme variables, base styles, every core component and the `ChatView` layout | Always, once, before the others |
| `channel-detail.css` | The channel details views and the section navigator | When you use `stream-chat-react/channel-detail` |
| `emoji-picker.css` | The emoji picker popover | When you use `EmojiPicker` |
| `ai-components.css` | The AI composer, Markdown, streaming message and state indicator | When you use `stream-chat-react/ai-components` |
| `emoji-replacement.css` | A color font for country flag emoji, which Windows shows as two letters | With `useImageFlagEmojisOnWindows` on `Chat` |
For example, an app with channel details and the emoji picker loads:
```ts
import "stream-chat-react/dist/css/index.css";
import "stream-chat-react/dist/css/channel-detail.css";
import "stream-chat-react/dist/css/emoji-picker.css";
```
A few details:
- **The flag font.** `emoji-replacement.css` loads its fonts from `dist/css/assets/`, next to it. The class it needs is added to each `Channel` and to `ChannelNavigation`'s root, so the font applies inside them, and only on Windows when `useImageFlagEmojisOnWindows` is set.
- **Variables.** `index.css` declares the [theming variables](https://getstream.io/chat/docs/sdk/react/v15/reference/theming-variables/global-variables/) the other stylesheets use. `ai-components.css` also works outside `.str-chat`, with fixed fallback colors.
- **Tree-shaking.** The package marks `*.css` files as side effects, so bundlers keep your stylesheet imports.
## CSS layers and import order
The SDK's stylesheets are unlayered, with one exception: `index.css` puts its small reset (box sizing and form control fonts inside `.str-chat`) in a layer named `minimal-normalize`. For a full reset, load `modern-normalize`, an optional peer of the package, in its own layer.
Load `index.css` first, then the stylesheets of the optional parts, then your overrides. To keep your overrides winning without `!important`, import the SDK's stylesheets into layers and declare the order once:
```css
@layer modern-normalize, stream, stream-plugins, stream-overrides;
@import "modern-normalize" layer(modern-normalize);
@import "stream-chat-react/dist/css/index.css" layer(stream);
@import "stream-chat-react/dist/css/channel-detail.css" layer(stream-plugins);
@import "stream-chat-react/dist/css/emoji-picker.css" layer(stream-plugins);
@layer stream-overrides {
.str-chat {
--str-chat__accent-primary: #6d28d9;
}
}
```
Unlayered CSS beats every layer. If you import the SDK's stylesheets without a layer, a layered override loses to them; put your overrides unlayered too, after the imports. See [Theming](https://getstream.io/chat/docs/sdk/react/v15/ui/customizing/theming/) for more.
## Optional packages
`stream-chat-react` needs `stream-chat` 10.0.0-rc.20 or later, and React and React DOM 17, 18 or 19. These packages are optional peers. Install one only if you use the part that needs it.
| Package | Version | Needed by |
| --------------------- | -------- | ------------------------------------------------------------------------------- |
| `emoji-mart` | `^5.4.0` | `stream-chat-react/emojis`: the picker, and `SearchIndex` for emoji suggestions |
| `@emoji-mart/data` | `^1.1.0` | `stream-chat-react/emojis`: the emoji data, loaded when the picker opens |
| `@breezystack/lamejs` | `^1.2.7` | `stream-chat-react/mp3-encoder`: loaded when the first recording is encoded |
| `modern-normalize` | `^3.0.1` | Nothing in the SDK imports it. Load it yourself for a full CSS reset |
---
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v15/reference/entry-points-and-css-files/](https://getstream.io/chat/docs/sdk/react/v15/reference/entry-points-and-css-files/).