@dressapp/react-widget

React components for DressApp partner storefronts: the same floating try-on widget Shopify merchants use.

Install

npm install @dressapp/react-widget

Peer dependencies: react and react-dom ≥ 18.

Recommended: PartnerStudioDock

Mounts the full floating panel (FAB, 3 tabs, inline model create, try-on history, peek zoom). Wires locale, merchant color scheme, size-filter, and boot states automatically.

import { PartnerStudioDock } from "@dressapp/react-widget";

export function AppShell() {
  return (
    <>
      {children}
      <PartnerStudioDock
        publishableKey={import.meta.env.VITE_DRESSAPP_PUBLISHABLE_KEY}
        apiBase={import.meta.env.VITE_DRESSAPP_API_URL}
        getAccessToken={async () => {
          const r = await fetch("/api/dressapp-session", { credentials: "include" });
          const j = await r.json();
          return j.access_token as string;
        }}
        productId={currentProductId}
      />
    </>
  );
}

• productId: optional. On a PDP, enables size/color pickers and Generate try-on.
• Model create: full flow inside the panel (photos, measurements, ready preview).
• Try-on: async job flow with front+back by default; override via tryOnSelection.
• Settings: loaded from GET /partner/v1/embed-config (scheme, language, OOS rules, size filter).

Script tag (no React)

Serve dressapp-partner-widget.js from your DressApp app host. See docs/partner/studio-dock-embed.md.

Advanced: DressAppStudioDock

Lower-level component when you need full control over labels and props. PartnerStudioDock wraps it.

Deprecated: DressAppWidget

Still exported but now renders PartnerStudioDock. Use PartnerStudioDock in new code.

Backend

Your server implements POST /partner/v1/sessions and exposes the JWT to the browser. See DressApp partner docs.