3D Visualisation SDK
React
Embed the Reliefs 3D product viewer in a React app with @v1/reliefs-react.
Make sure you've read the Prerequisites first — you'll need
your public key (pk_) and a product UUID.
Use the @v1/reliefs-react package to
initialize the SDK once and render 3D buttons as React components.
Install the package
bun add @v1/reliefs-react
# or
npm install @v1/reliefs-reactWrap your app with ReliefsProvider
Once, at the top of your tree (layout or App). The provider loads the SDK script and
initializes it with your key.
import { ReliefsProvider } from '@v1/reliefs-react';
export default function RootLayout({ children }) {
return (
<html>
<body>
<ReliefsProvider apiKey="pk_live_your_key" baseUrl="https://api.reliefsapp.com">
{children}
</ReliefsProvider>
</body>
</html>
);
}Render a 3D button
Use ReliefsButton anywhere inside the provider, passing the product UUID.
import { ReliefsButton } from '@v1/reliefs-react';
export default function ProductPage() {
return (
<div>
<h1>My product</h1>
<ReliefsButton productUuid="PRODUCT_UUID" className="w-full" />
</div>
);
}Allowlist your origin
Add your site's origin to Allowed origins on the key.