UI Overrides

UI overrides are the middle path: keep the productive prebuilt flow, but replace targeted UI surfaces that matter to your product.

Best for

• Branding and layout changes without rewriting the whole experience.
• Replacing selected controls, cards, modals, or display surfaces.
• Teams that want to preserve MediaSFU behavior while customizing appearance and interaction details.

Override ladder

Level	Use when	Primary hooks
Targeted visual changes	You want branding/layout changes without replacing the full experience	customVideoCard, customAudioCard, customMiniCard
Structured surface replacement	You want to replace modals, cards, menus, prejoin, or helper functions selectively	uiOverrides
Full workspace replacement	Targeted overrides are no longer enough	customComponent

Override surface by framework

Framework	Targeted override hook	Full replacement hook	Notes
ReactJS	uiOverrides	customComponent	Richest reference examples and override map.
Angular	[uiOverrides]	[customComponent]	Good fit when the surrounding app shell is already Angular-native.
React Native	uiOverrides	customComponent	Validate media/device flows after overriding interaction-heavy surfaces.
React Native Expo	uiOverrides	customComponent	Pair with the playbook-style reference app for fast experimentation.
Vue	uiOverrides	customComponent	Good fit for composition-friendly wrappers and branded shells.

Across the UI SDKs, the common pattern is consistent: keep the MediaSFU runtime contract intact, override presentation first, then touch functions only when you need to intercept or extend behavior.

Recommended approach

1. Start from the framework SDK page and identify the built-in surface you want to replace.
2. Start with card or modal overrides before reaching for customComponent.
3. Keep the business-logic contract intact while swapping the component layer.
4. If the override touches translation, boards, or receive-flow behavior, validate it with real users, permissions, and device conditions before launch.

Practical notes

• The SDK docs already expose playbook-style examples where toggles switch between prebuilt UI, headless logic, and full custom workspaces. Use those examples as the fastest validation surface before moving changes into production.
• uiOverrides is the safest place to extend behavior because it lets you intercept or replace specific surfaces without rewriting the entry flow.
• Modal families are usually better restyled through uiOverrides than rebuilt from raw helper buttons alone. Recording is the clearest example: keep the MediaSFU recording logic, and override recordingModal when you want branded UI around it.
• If your override plan starts replacing navigation, meeting shell, or multiple modal families at once, you are usually in custom component replacement territory.

Visual UI demos

The ReactJS package now has a package-local Storybook covering generated modern surfaces, classic display components, control bars, and whiteboard flows.

Use Storybook visual preview as the stable entry point for how Storybook fits into the docs system, where to find the UI Overrides guide, and how to launch the local visual preview surface.

Reference material

• MediaSFU ReactJS
• MediaSFU Angular
• MediaSFU React Native
• MediaSFU React Native Expo
• MediaSFU Vue

More detailed component-by-component override maps will be promoted here as the usage fragments are extracted from the SDK pages.