React Guide To Create AI Websites

Info

To use the generated React project, you have to export the code from the siteplay.ai visual builder first.

Introduction

If you’ve chosen the React + TypeScript export, you’re looking at a lean, Vite-powered single-page application (SPA). This guide is designed to help you navigate the generated source code, understand how we handle client-side routing, and show you where to drop in your own custom hooks or components.

The project uses:

• React + TypeScript for generated pages and components.
• Vite for local development, HMR, and production builds.
• React Router for page routing.
• Tailwind CSS v4 for styling.
• Shadcn-style React primitives for interactive UI elements.
• SVG files and Lucide React for icons.
• Motion for generated animations.
• React Helmet Async for page metadata.

Directory structure

A freshly exported Siteplay.ai React project follows this structure:

• Directory

  public

  • Directoryimages/ ------------------- all images here

    • …
• Directory

  src/

  • Directoryassets/

    • …
  • Directorycomponents/

    • Directorycommon/

      • …
    • Directorysections/ ------------ all sections here

      • Directoryglobal/

        • Navbar.tsx
        • Footer.tsx
        • …
      • Directoryhome/

        • Hero.tsx
        • …
    • Directoryui/

      • Directoryicons/

        • …
      • button.tsx
      • …
  • Directoryhooks/

    • …
  • Directorylayouts/

    • FullPageLayout.tsx --- shared page layout here
  • Directorypages/ ---------------- all pages here

    • Faqs.tsx
    • Features.tsx
    • Index.tsx
    • Pricing.tsx
    • Testimonials.tsx
  • Directorytypes/

    • …
  • constants.ts ---------- all site defaults here
  • main.tsx -------------- app entry here
  • router.tsx ------------ all routes here
  • style.css ------------- global styles here
  • theme.css ------------- design system tokens here
  • utils.ts
  • vite-env.d.ts

• .gitignore

• .prettierignore

• .prettierrc

• components.json

• eslint.config.js

• index.html

• package.json

• README.md

• tailwind.config.ts

• tsconfig.app.json

• tsconfig.json

• tsconfig.node.json

• vite.config.ts

Your downloaded project may include more generated files in src/components/sections and src/pages than this starter structure.

Important files

main.tsx

File: /src/main.tsx

This is the React app entry point. It creates the React root, wraps the app in the theme provider, and renders the generated router.

Use this file when you want to:

• Add app-level providers.
• Change the global loading fallback.
• Add wrappers around the router.
• Connect global analytics or monitoring libraries.

Most site-level page layout work should still happen in layouts/FullPageLayout.tsx, not directly in main.tsx.

router.tsx

File: /src/router.tsx

This file defines the client-side routes generated from your Siteplay.ai sitemap. Generated page components are imported here and connected to URL paths through React Router.

Use this file when you want to:

• Add, rename, or remove client-side routes.
• Connect a generated page to a different path.
• Add route-level wrappers or error boundaries.
• Add custom routes that were not generated by Siteplay.ai.

FullPageLayout.tsx

File: /src/layouts/FullPageLayout.tsx

This is the shared layout used by generated Siteplay pages. It imports global styles, applies default language and text direction, and uses React Helmet Async to manage document metadata.

Use this file when you want to:

• Add scripts or analytics.
• Change the root language or text direction.
• Add layout-level wrappers.
• Adjust page metadata behavior.
• Change global theme behavior.

Page files

File: /src/pages/*.tsx

Siteplay.ai creates React page files from the pages in your sitemap. Each page usually loads a page object, imports generated sections, and renders those sections inside the shared layout and page wrapper.

Use generated page files when you want to:

• Adjust page-level copy, data, or metadata.
• Add custom page logic.
• Connect a page to dynamic data.
• Change route-specific behavior.
• Reorder or insert generated sections manually.

Section files

File: /src/components/sections/[page]/*.tsx

This folder contains the section components generated from the Siteplay.ai editor. A hero, pricing block, feature grid, testimonial section, contact form, footer, or FAQ section will typically live here.

Section files are organized based on the pages in the sitemap. Example: /src/components/sections/home/Hero.tsx

Use this folder when you want to customize one specific visual section without changing the rest of the site.

Global section files

File: /src/components/sections/global/*.tsx

Global sections are shared across pages. Navigation bars, footers, announcement bars, and other repeated sections usually live here.

Use this folder when you want one edit to update every page that uses the same global section.

Common component files

File: /src/components/common/*.tsx

This folder contains shared wrappers and elements used across generated pages and sections, such as page wrappers, theme providers, buttons, images, links, rich content, and background rendering helpers.

Use this folder when you want a change to apply consistently across many generated sections.

UI component primitives

File: /src/components/ui/*.tsx

This folder is reserved for lower-level UI primitives. Siteplay.ai uses these for interactive components such as accordions, dialogs, selects, navigation menus, form controls, and other reusable building blocks.

Most users should customize sections and common components first, and only edit UI primitives when changing the behavior of a shared control.

Hooks

File: /src/hooks/*.ts

This folder contains reusable React hooks. Use it for shared state, form helpers, animation helpers, responsive behavior, or site-specific behavior that is needed by multiple components.

utils.ts

File: /src/utils.ts

This file contains shared helper functions used by generated components. Common examples include:

• cn() for merging Tailwind class names.
• Form submission helpers.
• Animation helpers.
• Color shade utilities.
• Small formatting helpers such as kebab-case conversion.

Use this file for reusable logic that should stay framework-local and shared across components.

constants.ts

File: /src/constants.ts

This file serves as the central configuration layer for the application. It defines shared defaults, reusable UI settings, and predefined animation presets that are used throughout the project.

By keeping these values in a single location, the application maintains consistency across themes, components, layouts, pages, sections, and motion behaviors while making customization significantly easier.

This file primarily handles:

• Default application settings.
• Shared component styling classes.
• Localization and layout defaults.
• Animation configuration and reusable presets.
• Background and visual configuration.

The animation system included in this file is highly extensible and supports multiple motion styles such as slide, fade, zoom, flip, reveal, and micro-interactions. These presets help developers create consistent, production-ready UI animations without rewriting configuration objects repeatedly.

Overall, this file acts as the foundation for maintaining a scalable and configurable design system across the entire React application.

Tailwind css styling

Files: /src/style.css and /src/theme.css

style.css contains global app styles and Tailwind entry styles. theme.css contains design tokens and CSS variables generated from the Siteplay.ai design system.

Use these files when you want to make site-level visual changes that should apply across multiple pages and sections.

vite.config.ts

File: /vite.config.ts

This is the main Vite configuration file. It controls React support, local development behavior, path aliases, Tailwind integration, and build settings.

Use this file when you want to:

• Add Vite plugins.
• Change build behavior.
• Adjust aliases or dev server settings.
• Configure framework-level tooling.

Public folder

File: /public/*

Static assets live in public. Files placed here are served from the site root. For example, public/images/p.svg is available at /images/p.svg.

Use this folder for images, downloadable files, icons, robots.txt, and other static assets.

How Siteplay maps to React

The exported project follows the same mental model as the Siteplay.ai builder:

Siteplay.ai concept	React output
Site	A complete Vite React project
Page	A component under src/pages and a route in src/router.tsx
Sitemap	The generated React Router route list
Section	A React component under src/components/sections
Global section	A reused component under src/components/sections/global
Design system	Tailwind classes, CSS variables, theme constants, and layouts
SEO settings	React Helmet metadata from layout and page components
Images and uploads	Static assets in public or imported assets in src/assets

This makes it easier to move between the visual builder and the exported code. If you know where something lived in Siteplay.ai, you can usually find the matching code by looking for the page, section label, or component name.

Run the project locally

1. Install dependencies

   npm

   npm install

   pnpm

   pnpm i

   Yarn

   yarn

2. Run the code in local development

   npm

   npm run dev

   pnpm

   pnpm dev

   Yarn

   yarn dev

3. Build for production

   npm

   npm run build

   pnpm

   pnpm build

   Yarn

   yarn build

4. Preview production in local

   npm

   npm run preview

   pnpm

   pnpm preview

   Yarn

   yarn preview

Styling with Tailwind CSS

Files: src/style.css and src/theme.css

Use src/style.css and src/theme.css to make site-level changes. Siteplay.ai generates Tailwind v4 based components. Most visual changes can be made by editing class names directly in the generated page and section React components.

Start with these areas:

• Section-level layout and spacing in src/components/sections.
• Shared element styling in src/components/common.
• Project-wide Tailwind settings in tailwind.config.ts.
• Global styles in src/style.css.
• Design tokens and CSS variables in src/theme.css.

Because the editor already applies a design system, keep broad changes in shared components or theme files. Use section files for one-off edits.

SEO metadata

Files: src/layouts/FullPageLayout.tsx and src/pages/*.tsx

Siteplay.ai page SEO settings can be exported into React page data and applied through React Helmet Async. The shared layout owns the document-level Helmet setup, while generated pages can provide page-specific metadata.

const page = {
  seo: {
    title: "About Us Page",
    description: "lorem ipsum dolor sit...",
  },
} as Page;

After export, review:

• Page title and description.
• Open Graph or social metadata if included.
• Canonical URLs after you know the final production domain.
• Any static files such as public/robots.txt.

Forms

Generated forms use the form settings configured in Siteplay.ai. The React export includes helpers and generated form components that submit payloads with the configured method and action.

After export, check:

• The form action URL.
• The HTTP method.
• Required fields and validation behavior.
• Whether you want to handle submissions through a third-party form backend, a serverless endpoint, or your own API.

Images and assets

Images used by the generated site are referenced from the exported project.

Use:

• public for files that should be served directly from the site root.
• src/assets for assets that should be processed by the Vite pipeline.

When replacing images:

• Keep filenames stable if you do not want to update component references.
• Add useful alt text in the generated image components.
• Optimize large images before deploying.

Deployment

The exported React project produces a static Vite build that can be deployed to platforms such as Vercel, Netlify, Cloudflare Pages, GitHub Pages, S3, or any static hosting provider.

Before deploying:

• Run npm run build.
• Confirm environment variables in .env.local, .env.production, or your host settings.
• Review final SEO metadata and domain-specific URLs.
• Test key forms and links.
• Check light and dark mode if both are enabled.

Customization checklist

Use this checklist after downloading a React project from Siteplay.ai:

• Run the project locally.
• Review every generated route.
• Replace placeholder images and copy.
• Check page titles and descriptions.
• Verify buttons, links, and forms.
• Update theme, colors, and typography if needed.
• Remove unused generated sections or components.
• Run a production build before deployment.

Troubleshooting

The site does not start

Run npm install, then npm run dev again. If the issue continues, confirm you are using a Node.js version supported by the exported Vite and React versions.

Tailwind styles are missing

Check that src/style.css is imported by the generated layout or app entry. Also confirm the generated components are inside paths covered by Tailwind.

Routes show a blank page

Check src/router.tsx and confirm the generated page is imported and included in the React Router route list.

Images are broken

Make sure referenced files exist in public or src/assets, and check whether the component expects a root URL such as /images/example.webp or an imported asset.

A form submits but nothing happens

Check the generated form action, method, and any required environment variables. If you want server-side handling, connect the form to your API or form backend.

Build works locally but fails in deployment

Compare the deployed environment variables with your local .env.local and .env.production, then run npm run build locally before pushing again.