Layout

Convenience meta-package that re-exports every structural layout component from the toolkit. Install one package instead of many; refer to each component's own page for detailed API and accessibility notes.

Installation

npm install @xsolla/xui-layout

Imports

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

Quick start

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

export default function Example() {
  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" />
      </Modal>
    </>
  );
}

Re-exported packages

| Component(s) | Source package | | :----------- | :------------- | | FieldGroup | @xsolla/xui-field-group | | List | @xsolla/xui-list | | Modal | @xsolla/xui-modal |

See each component's dedicated page for props, examples, and accessibility details.