Get started

OnlyWin UI is a set of packages: the tokens, the icons, one stylesheet and the components for Svelte 5 and for React 19. The components of both frameworks share one API and one stylesheet, so you can move a screen from one to the other without changing how it looks.

1. The packages

The packages are not on a public package registry yet. A Svelte app uses @onlywin/ui-svelte, a React app @onlywin/ui-react (with React 19); both use @onlywin/ui-styles, and each brings the tokens, icons and core helpers with it. The steps below show how an app uses them.

2. Load the stylesheet and the fonts

Import the styles once at the root of the app. They are plain CSS files with no inline styles, so a strict Content Security Policy (style-src 'self') needs nothing extra. The fonts are Inter Tight and JetBrains Mono with Latin and Cyrillic.

main.ts

import '@onlywin/ui-styles';
import '@onlywin/ui-styles/fonts';

Give the page surface the ow-app class, so the background, text colour and font come from the tokens.

index.html

<body class="ow-app">

3. Set the language

The provider gives every component its language and time zone: labels, announcements, numbers, money and dates follow it. Without it the components speak English in UTC.

App.svelte

<script lang="ts">
  import { Button, Money, UiProvider } from '@onlywin/ui-svelte';
</script>

<UiProvider locale="ru" timeZone="Europe/Berlin">
  <Money currency="EUR" minor={124_000} />
  <Button variant="primary">Играть</Button>
</UiProvider>

App.tsx

import { Button, Money, UiProvider } from '@onlywin/ui-react';

export function App() {
  return (
    <UiProvider locale="ru" timeZone="Europe/Berlin">
      <Money currency="EUR" minor={124_000} />
      <Button variant="primary">Играть</Button>
    </UiProvider>
  );
}

4. Theme

Dark is the default; light follows the system unless the page sets data-theme on the root element. The ThemeSwitch component stores the reader’s choice and applies it. To avoid a flash on load, apply the stored choice before the first paint:

theme-boot.js

try {
  const theme = localStorage.getItem('ow-ui-theme');
  if (theme === 'dark' || theme === 'light') document.documentElement.setAttribute('data-theme', theme);
} catch {}

5. The brand layer (marketing pages only)

Pages that players and partners see first can add the brand layer: the low-poly flame on its pedestal, floating toys that follow the pointer, and the green, yellow and pink accents. Consoles and documentation never load it. Its motion stops for prefers-reduced-motion and on touch screens.

landing.ts

import { startUiBrandParallax } from '@onlywin/ui-styles/brand';

startUiBrandParallax();

Rules worth knowing

Money is integer minor units, as a number or a string of digits: minor={124_000} is €1,240.00.
RTP is the certified decimal string, such as '0.9650'; it is never rounded on the way.
Every bindable Svelte prop is controlled in React with value and onValueChange, or uncontrolled with defaultValue.
Icons are named, not imported one by one: iconStart="play".