Fully typed, production-ready ReScript bindings for @juspay/blend-design-system.

This package bridges the Blend Design System (authored in React/TS) and your ReScript codebase by exposing strict, type-safe interfaces for the components. The bindings are generated deterministically from Blend's shipped TypeScript declarations by @juspay/rescript-bindgen — no hand-editing, no AI, no guesswork.

📦 Installation

npm install @juspay/rescript-blend

@juspay/blend-design-system ships as a bundled runtime dependency — you don't install or manage it directly; the matching version comes in automatically (see 1:1 versioning below). You only need to provide the ReScript toolchain to compile the bindings — the ReScript compiler (rescript >= 12.0.0), @rescript/react, and rescript-webapi — plus react / react-dom at runtime. These stay peer dependencies so your app controls the single copy.

1:1 Versioning @juspay/rescript-blend@X ships the bindings for @juspay/blend-design-system@X — the version numbers match exactly. To find the right Blend version for a release, just read this package's version. A binding-only re-release for an unchanged Blend version (e.g. a generator upgrade) uses a -N suffix: 0.0.36 → 0.0.36-1.

Note: This package ships ReScript source files (.res/.resi) only. The matching .js is emitted by your own ReScript build.

⚙️ Configuration

In your project's rescript.json, add @juspay/rescript-blend to dependencies:

{
  "dependencies": [
    "@rescript/react",
    "rescript-webapi",
    "@juspay/rescript-blend"
  ]
}

rescript-webapi is required because some component props are typed with Webapi.* (e.g. File / FileList).

🚀 Usage

All modules are namespaced under RescriptBlend. Access them with qualified names or open the module. Components come in two shapes depending on their upstream signature:

• Record props (components that extend HTML attributes, e.g. Button) — props are a record type spread from HtmlAttrs.
• Labeled args (e.g. Accordion, Alert) — props are labeled arguments.

Both are written the same way in JSX: