Xsolla UI Kit

An enterprise-class UI design language and React-based implementation.

During development, you may need to compile and debug JSX and ES2015 code, and even proxy some of the requests to mock data or other external services. All of these can be done with quick feedback provided through hot reloading of changes.

Such features, together with packaging the production version, are covered in this work flow.

1. Installation

yarn add @xsolla/uikit

2. Use Xsolla UI Kit components

import {React} from 'react';
import {Button, ImagePicker, Switch} from '@xsolla/uikit';

export default () => (
  <div>
    <h1>This is button!</h1>
    <Button type="button">Button</Button>
  </div>
);

3. Import on Demand

If you see logs like below screenshot, you might be importing all components by writing import {Button} from '@xsolla/uikit';. This will affect your app's network performance.

We strongly recommend using babel-plugin-import, which can convert the following code to the '@xsolla/uikit/lib/xxx' way:

import {Button} from '@xsolla/uikit';