Integrate Siteplay.ai Code Into Your Existing Projects

Info

Manual integration is ideal when you want to port specific visual pages, blocks or components generated by the Siteplay.ai visual builder into an already established Next.js, Nuxt.js, Astro-react, Astro-vue, React, Vue applications without using a full starter template export.

You should have an existing shadcn project to integrate below steps.

React

Prerequisites Install below packages

npm

 npm install clsx tailwind-merge motion axios

pnpm

pnpm i clsx tailwind-merge motion axios

Yarn

yarn i clsx tailwind-merge motion axios

1. download .zip folder and copy common folder to components directory
2. Copy utils.ts file to directory in /src
3. Copy constants.ts file to directory in /src

Vue

Prerequisites Install below packages

npm

 npm install clsx tailwind-merge motion-v axios

pnpm

pnpm i clsx tailwind-merge motion-v axios

Yarn

yarn i clsx tailwind-merge motion-v axios

1. download .zip folder and copy common folder to components directory
2. Copy utils.ts file to directory in /src
3. Copy constants.ts file to directory in /src

Important

While integrating siteplay.ai’s sections into your existing code you should also ensure to install necessary packages from shadcn cli.

For example for faqs section you have to install accordion components.