One UI kit, six platforms

A movie tile looks exactly the same on an Apple TV, on a Samsung television and in your browser. This is not three components kept in sync by hand: it is the same component. Here is how.

Written once, against React Native

The @kroma/ui kit is written against React Native. On native targets (Apple TV, Android TV, iPhone, Android) it renders natively; on the web, Tizen and webOS televisions, the Tauri desktop app and the web client, it goes through react-native-web. The same file, two rendering engines.

The design tokens, colors, typography, elevations, focus, also live once, in TypeScript, and generate the CSS variables the web targets consume:

import { colors, type } from '@kroma/ui/tokens';
 
colors.accent; // #F4B642, the one warm amber
colors.bg;     // #0A0A0C, the deep charcoal
type.hero;     // 66px / 700, Bricolage Grotesque

This site is the simplest proof of it: it redefines no color. It imports the kit's Tailwind v4 theme, and therefore renders in exactly the same charcoal and the same amber as the application.

Focus, the only real fracture

What actually differs between a television and a browser is not the appearance, it is the navigation. A remote has no cursor.

• On native, the OS focus engine handles directional moves (UIFocusEngine on tvOS, nextFocus resolution on Android TV).
• On the web, there is no focus engine: movement is geometric, the next focusable in the pressed direction, with lateral drift penalized so that neighbors in a straight line win.

That fracture is isolated in a few .web.ts files, and nothing else in the kit has to know it exists.

Why it matters

Because "multi-platform" does not mean "rewritten N times." Every screen KROMA touches speaks the same visual language because it literally shares the same code, and one design improvement benefits every platform at once, the same day.

The components and the tokens exist once. The rest is just a shell per platform.