# What UI Frameworks and Libraries Does Stremio-Web Use? A Complete Technical Breakdown

> Discover the UI frameworks and libraries powering Stremio-Web. Explore React 18.3.1, classnames, react-i18next, and more for efficient web development.

- Repository: [Stremio/stremio-web](https://github.com/Stremio/stremio-web)
- Tags: deep-dive
- Published: 2026-05-23

---

**Stremio-web is built on React 18.3.1 and composes its interface using lightweight, specialized libraries including classnames for conditional styling, @stremio/stremio-icons for vector graphics, react-i18next for translations, and @stremio/stremio-video for media playback, rather than relying on heavyweight component frameworks.**

Stremio-web serves as the browser-based interface for the Stremio streaming platform, handling everything from video playback to settings dialogs. Understanding what UI frameworks and libraries stremio-web uses reveals a deliberate architectural choice favoring modularity over monolithic frameworks. The codebase, located in the `Stremio/stremio-web` repository, combines React 18 with a curated set of utility libraries to deliver a responsive, TV-friendly interface while keeping bundle sizes manageable.

## Core Framework: React 18

At the foundation of stremio-web sits **React 18.3.1** alongside **react-dom 18.3.1**, serving as the core rendering engine. All UI code resides in the `src/` directory and utilizes JSX for declarative component composition, managing state and lifecycle hooks throughout the player, navigation, and dialog components. This version of React provides the concurrent features and automatic batching necessary for smooth video player interactions and responsive UI updates.

## Styling and Class Management

Rather than adopting a comprehensive CSS-in-JS framework, stremio-web relies on **classnames 2.5.1** for conditional CSS class composition. This lightweight utility toggles UI states by combining base classes with dynamic conditional logic. The project uses **Less** for stylesheet preprocessing, compiled through webpack with css-loader, mini-css-extract-plugin, and postcss-loader.

In [`src/routes/Player/ControlBar/ControlBar.js`](https://github.com/Stremio/stremio-web/blob/main/src/routes/Player/ControlBar/ControlBar.js), the implementation uses classnames to handle interactive states:

```javascript
import classnames from 'classnames';
import styles from './ControlBar.module.less';

function ControlBar({ className, paused }) {
  return (
    <div
      className={classnames(className, styles['control-bar-container'])}
    >
      <Button
        className={classnames(styles['control-bar-button'], {
          disabled: typeof paused !== 'boolean',
        })}
        title={paused ? t('PLAYER_PLAY') : t('PLAYER_PAUSE')}
      />
    </div>
  );
}

```

## Stremio-Specific UI Packages

The project maintains several internal libraries that provide consistent branding and functionality:

- **@stremio/stremio-icons 5.10.0**: Vector-based icon set matching Stremio’s brand identity. Imported as `const { default: Icon } = require('@stremio/stremio-icons/react')` and used throughout components like [`src/routes/Player/VolumeChangeIndicator/VolumeChangeIndicator.js`](https://github.com/Stremio/stremio-web/blob/main/src/routes/Player/VolumeChangeIndicator/VolumeChangeIndicator.js):

```javascript
const { default: Icon } = require('@stremio/stremio-icons/react');

function VolumeChangeIndicator({ volume }) {
  return (
    <div className={styles.indicator}>
      <Icon name={volume > 0 ? 'volume-up' : 'volume-mute'} />
    </div>
  );
}

```

- **@stremio/stremio-colors 5.2.0**: Centralized color definitions imported across style modules to maintain consistency.
- **@stremio/stremio-video 0.0.79**: Custom wrapper around HTML5 video providing Stremio-specific controls, integrated in [`src/routes/Player/Video/Video.js`](https://github.com/Stremio/stremio-web/blob/main/src/routes/Player/Video/Video.js) and [`src/components/Video/Video.js`](https://github.com/Stremio/stremio-web/blob/main/src/components/Video/Video.js).

## Internationalization Stack

For runtime translation and localization, stremio-web implements **react-i18next ^15.7.4** paired with **i18next ^24.2.3**. The `useTranslation` hook and `<Trans>` component drive all user-facing text, as seen in [`src/components/SearchBar/SearchBar.js`](https://github.com/Stremio/stremio-web/blob/main/src/components/SearchBar/SearchBar.js):

```javascript
import { useTranslation } from 'react-i18next';

function SearchBar() {
  const { t } = useTranslation();
  return (
    <input
      placeholder={t('SEARCH_PLACEHOLDER')}
      aria-label={t('SEARCH_LABEL')}
    />
  );
}

```

## Accessibility and Interaction Utilities

The interface incorporates several focused utility libraries for specific interaction patterns:

- **react-focus-lock 2.13.7**: Traps keyboard focus within modal dialogs for accessibility compliance. Implemented in [`src/components/ModalDialog/ModalDialog.js`](https://github.com/Stremio/stremio-web/blob/main/src/components/ModalDialog/ModalDialog.js):

```javascript
import FocusLock from 'react-focus-lock';
import ModalDialog from '../ModalDialog';

function SettingsModal({ isOpen, onClose }) {
  return (
    <ModalDialog isOpen={isOpen} onRequestClose={onClose}>
      <FocusLock>
        {/* modal content */}
      </FocusLock>
    </ModalDialog>
  );
}

```

- **a-color-picker 1.2.1**: Powers color selection dialogs in settings.
- **use-long-press ^3.3.0**: Handles long-press gestures for TV-style interactions.
- **filter-invalid-dom-props**: Sanitizes props passed to DOM elements to prevent invalid attribute injection.

## Browser Detection and TV Navigation

To support diverse environments from desktop browsers to smart TVs, stremio-web includes **bowser 2.14.1** for user-agent capability detection. For TV-style keyboard navigation, it implements **spatial-navigation-polyfill** (sourced from `github:Stremio/spatial-navigation`), enabling directional pad navigation through `src/components/NavBar/` and other focusable regions.

## Summary

- **React 18.3.1** provides the foundational component architecture and rendering lifecycle.
- **classnames 2.5.1** handles dynamic CSS class composition without the overhead of a full CSS-in-JS solution.
- **@stremio/stremio-icons**, **@stremio/stremio-colors**, and **@stremio/stremio-video** deliver branded, consistent UI elements specific to the Stremio ecosystem.
- **react-i18next** and **i18next** manage all internationalization requirements.
- **react-focus-lock**, **use-long-press**, and **spatial-navigation-polyfill** ensure accessibility and TV-remote compatibility.
- **bowser** enables runtime feature detection for cross-browser compatibility.

## Frequently Asked Questions

### Does stremio-web use Material-UI or Bootstrap?

No. Stremio-web deliberately avoids heavyweight component frameworks like Material-UI or Bootstrap. According to the source code analysis, it relies on **classnames** for styling logic combined with custom Less stylesheets, keeping the bundle size minimal while maintaining full control over the component appearance.

### What video player library does stremio-web use?

Stremio-web uses **@stremio/stremio-video 0.0.79**, a custom wrapper around HTML5 video elements that provides Stremio-specific controls and styling. This package is integrated in [`src/components/Video/Video.js`](https://github.com/Stremio/stremio-web/blob/main/src/components/Video/Video.js) and the player route components, rather than using generic video libraries like Video.js or Plyr.

### How does stremio-web support TV remote navigation?

The application implements **spatial-navigation-polyfill** sourced from the Stremio GitHub organization, alongside **bowser 2.14.1** for device detection. This combination enables directional pad navigation through the interface in `src/components/NavBar/` and other focus-managed areas, making the web app functional on smart TVs and streaming devices.

### What i18n library does stremio-web use for translations?

Stremio-web uses **react-i18next ^15.7.4** with **i18next ^24.2.3** for internationalization. Components like [`src/components/SearchBar/SearchBar.js`](https://github.com/Stremio/stremio-web/blob/main/src/components/SearchBar/SearchBar.js) import the `useTranslation` hook to access translated strings for placeholders, labels, and button titles at runtime.