@xsolla/xui-core

Design system foundation providing theming, context, design tokens, and shared utilities for the XUI toolkit.

Installation

yarn add @xsolla/xui-core

Usage

import { XUIProvider, useDesignSystem } from '@xsolla/xui-core';

function App() {
  return (
    <XUIProvider initialMode="dark">
      <MyApp />
    </XUIProvider>
  );
}

function MyComponent() {
  const { theme, mode, setMode } = useDesignSystem();
  return <div style={{ color: theme.colors.content.primary }}>Hello</div>;
}

Available Theme Modes

| Mode | Theme | |------|-------| | "light" | Pentagram Light (default) | | "dark" | Pentagram Dark (default) | | "xsollaLight" | Xsolla Light | | "xsollaDark" | Xsolla Dark | | "ltg-dark" | LTG Dark |

Aliases: "pentagram-light", "pentagram-dark", "xsolla-light", "xsolla-dark"

Exports

• XUIProvider — Root context provider; accepts initialMode (see theme modes above)
• useDesignSystem — Hook returning { theme, mode, setMode }; falls back to dark theme if no provider
• themeConfig — Function returning the full theme object for a given ThemeMode
• useId — Stable unique ID hook; polyfills React.useId for React < 18
• ModalIdContext — Context holding the current modal's ID for portal-based components
• useModalId — Hook returning the current modal ID, or null if outside a modal
• ThemeMode — Type: "dark" | "light" | "xsollaLight" | "xsollaDark" | "ltg-dark" | aliases
• ThemeColors — Type of the colour token object
• colors — Raw colour tokens for all themes
• spacing — Spacing scale (xs, s, m, l, xl)
• radius — Border-radius tokens (button, card, input, tag, avatar variants)
• shadow — Shadow tokens
• fonts — Font-family definitions
• isWeb / isNative / isIOS / isAndroid — Platform detection booleans