{(chatUser || chatGroup) && (
<>
***
## Layout & Sizing
The UI Kit components are `height: 100%` / flex-fill — they **fill their parent** rather than sizing to their content. If the host layout doesn't give them room, they collapse to a sliver or overflow. The bare `height: 100vh` in the example above is the minimum; keep these rules in mind:
* **Give the container a content-independent height *and* width.** Use `height: 100dvh` (or `100vh`) on the outer wrapper — not `min-height` or `auto`, which collapse to \~0px because the components have no intrinsic height.
* **Constrain flex children so they scroll instead of growing.** Add `min-height: 0` (and `overflow: hidden`) to flex columns that hold a message list; without it, a long list pushes the whole layout taller instead of scrolling internally.
* **Reset any app scaffold that caps `#root`.** A fresh Vite/CRA `#root` is often `max-width`-capped, centered, and padded (from the starter's `index.css`/`App.css`) — which renders the chat gutter-boxed. Clear those:
```css title="src/index.css" theme={null}
#root {
max-width: none;
margin: 0;
padding: 0;
width: 100%;
height: 100dvh;
}
```
* **Don't put `transform` or `filter` on an ancestor.** Either property creates a new containing block that clips the kit's `position: fixed` overlays — context menus, the emoji keyboard, and the call screen.
### Responsive layout
The two-panel example is a fixed side-by-side layout, which squashes on a phone. On narrow viewports, show **one pane at a time** — the conversation list, then the message view with a back button. Drive it off a breakpoint:
```tsx theme={null}
import { useEffect, useState } from "react";
function useIsMobile(breakpoint = 768) {
const [isMobile, setIsMobile] = useState(
() => window.matchMedia(`(max-width: ${breakpoint}px)`).matches
);
useEffect(() => {
const media = window.matchMedia(`(max-width: ${breakpoint}px)`);
const onChange = () => setIsMobile(media.matches);
media.addEventListener("change", onChange);
return () => media.removeEventListener("change", onChange);
}, [breakpoint]);
return isMobile;
}
```
On mobile, render **either** the list **or** the message pane based on `isMobile` and whether a conversation is selected, and use `CometChatMessageHeader`'s built-in back button (it renders by default; wire `onBack` to clear the selection, or set `hideBackButton` to control it) to return to the list:
```tsx theme={null}
// Inside App, with `chatUser`/`chatGroup` state from the example above:
const isMobile = useIsMobile();
const hasSelection = Boolean(chatUser || chatGroup);
if (isMobile) {
return (
{!hasSelection ? (
{
setChatUser(undefined);
setChatGroup(undefined);
}}
/>
)}
***
### One-to-One / Group Chat
Single chat window — no sidebar. Good for support chat or embedded widgets.
***
### Tab-Based Chat
Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs.
***
## Build Your Own Chat Experience
Need full control over the UI? Use individual components, customize themes, and wire up your own layouts.
* [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v7/sample-app) — Working reference app to compare against
* [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options
* [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities
* [Theming](/ui-kit/react/theming) — Colors, fonts, dark mode, and custom styling
* [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK
***
## iFrame Embedding
If your React app runs inside an `