@xsolla/xui-layout

Convenience re-export of structural layout components: FieldGroup, List, and Modal.

Installation

yarn add @xsolla/xui-layout

Usage

import { List, Modal, FieldGroup } from '@xsolla/xui-layout';

function SettingsScreen() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <List>
        <List.Title>Account</List.Title>
        <List.Row hoverable onClick={() => setOpen(true)}>
          Edit profile
        </List.Row>
      </List>

      <Modal open={open} onClose={() => setOpen(false)}>
        <FieldGroup label="Username">
          <TextInput />
        </FieldGroup>
      </Modal>
    </>
  );
}

Components

• List — Structured list with interactive rows and section titles
• Modal — Overlay dialog container
• FieldGroup — Labelled field wrapper for form layouts