Guides
React integration
Add inline screens, an upgrade button and auto placements to a React or Next.js app.
Install both packages.
npm install @ui-kit/web @ui-kit/reactConfigure once, in a client module that loads on every page.
'use client';
import { configure } from '@ui-kit/web';
configure({ apiKey: 'pk_...' });Add an inline screen on your pricing page.
import { Paywall } from '@ui-kit/react';
export function Pricing({ products }) {
return <Paywall paywall={{ placement: 'pricing' }} products={products} onPurchase={({ packageId }) => checkout(packageId)} />;
}Add an upgrade button that opens the screen over the page.
const present = usePaywall({ products });
const result = await present({ paywall: { placement: 'upgrade_button' }, onPurchase });If any placement has a trigger, render this once in your root layout.
export function AutoPlacements() {
useAutoPlacements({ products, onPurchase });
return null;
}All three are safe to server-render. Keep full JSON sources in state; placement keys can be written inline.