Installation

Marketplace widgets (React template)#

1. Expose webpack React on the window before init:

import React from "react";
import * as ReactDOM from "react-dom";
import { createRoot } from "react-dom/client";

window.React = React;
window.ReactDOM = { ...ReactDOM, createRoot };

2. Call await rliSdk.init({}) — the SDK loads rl-ui.js from the CDN. CSS is auto-injected.

3. Import components through the template bridge:

import { Button, Dialog, Page, Text } from "@/rl-ui";

export function MyWidget() {
  return (
    <Page className="p-5">
      <Text variant="heading-03">Ready</Text>
      <Button variant="primary">Save</Button>
    </Page>
  );
}

HTML / vanilla#

Load React UMD, then rl-ui.js, then mount with createRoot:

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://rli-sdk.s3.us-east-1.amazonaws.com/rl-ui.js"></script>
<script>
  window.rliSdk.init({}).then(() => {
    const root = ReactDOM.createRoot(document.getElementById("root"));
    const { Page, Text, Button } = window.RocketlaneRlUi;
    root.render(
      React.createElement(
        Page,
        { className: "p-5" },
        React.createElement(Text, { variant: "heading-03" }, "Ready"),
        React.createElement(Button, { variant: "primary" }, "Save")
      )
    );
  });
</script>

Docs previews use the same IIFE and mount components with createRoot.