ModalSlot

An overlay modal for feature gates, trial expirations, and high-impact upgrade prompts. Supports optional (dismissible) and blocking modes.

Content fields: header, body, cta_label, secondary_cta_label, image_url, style (blocking)

Usage

A live, editable example. The user below is not entitled, so the gate renders the configured upgrade modal in place of the children — edit the code (or switch to an entitled demo user) and the preview re-runs:

import { Gate } from "@revturbine/sdk";
import { DemoApp } from "./DemoApp";

// Dan lacks the data_export entitlement, so the gate renders the configured
// upgrade modal. Switch to user="user_alice" (entitled) to see the children.
export default function App() {
  return (
    <DemoApp user="user_dan">
      <Gate
        id="editor_export_action"
        surfaceTemplateIds={["modal_overlay"]}
        can="data_export"
      >
        <div style={{ padding: 16, background: "#e8f5e9", borderRadius: 8 }}>
          Export panel — visible only when entitled
        </div>
      </Gate>
    </DemoApp>
  );
}

Opens a live, editable sandbox with the published SDK.

The ModalSlot renders automatically when the decision engine selects a modal_overlay template. Blocking modals have no dismiss option — the user must take action. Optional modals include a secondary CTA or close button.