Builder Guide

Support for React

Use Tailwind, ordinary CSS, CSS Modules, inline styles, component libraries, or CSS-in-JS with your React frontend.

BuildWithHQ uses React for its tenant frontend. You can style a developer-owned React application with any of the approaches below while continuing to use the secured Developer API. Styling does not change authentication, scopes, record permissions, or concurrency rules.

First choose where your React code runs

• Hosted SaaS pages: compose registered components in the page editor and use the app theme and App Assets → Custom CSS for supported overrides. Page JSON is configuration, not an arbitrary JavaScript, JSX, or npm execution environment.
• Your own React frontend: install compatible dependencies in your project, build your application, and deploy its compiled output. You control its styling pipeline, providers, routing, and security headers.
• A new hosted renderer component: adding a package or component requires reviewed source integration, component registration, testing, and a runtime deployment. Uploading a file does not register a React component.

The examples are small source-code illustrations, not executable page JSON. Third-party package compatibility must be verified in your actual project; this page does not claim those packages are preinstalled or certified in the hosted runtime.

1. React with Tailwind

Use utility classes in JSX, with Tailwind configured in your React build. Compile the CSS before deployment. The current hosted runtime uses a TailAdmin-derived visual system; that does not mean it runs a Tailwind compiler on uploaded text.

export function Panel() {
  return <section className="rounded-xl border border-slate-200 bg-white p-6">
    <h2 className="text-xl font-semibold text-slate-900">Customers</h2>
  </section>;
}

Ensure Tailwind scans all relevant component sources. Classes generated only in database page JSON may be absent from the build; include them using your Tailwind version's supported source configuration. Avoid constructing incomplete class strings such as bg-${color}-500; map choices to complete class names. See Tailwind's source-detection guide.

For hosted pages, publish the resulting CSS through the validated stylesheet workflow and use class properties supported by the selected component. A CSS file cannot add missing JSX or behavior. Check framework resets against existing shell and form styles.

2. React with ordinary CSS files

Import a CSS file into your own React bundle, or load a stylesheet in the host document. Prefix app-specific selectors to avoid changing unrelated pages. React uses className for CSS classes; see React's styling introduction.

// CustomerPanel.jsx
import './customer-panel.css';
export function CustomerPanel() {
  return <section className="acme-customer-panel">Customers</section>;
}

/* customer-panel.css — a separate file */
.acme-customer-panel {
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

For an existing hosted SaaS, use Assets → Custom CSS → Preview CSS → Publish CSS. Paste CSS only, without style tags or script. Upload design files explicitly as public only when they need unauthenticated delivery, and use the returned app-scoped asset URLs. See SaaS CSS and design assets for validation and URL rules.

3. React with CSS Modules

CSS Modules give imported class names a build-generated scope. In a Vite project, use a .module.css file and import its class mapping. See Vite's CSS Modules documentation.

// CustomerPanel.jsx
import styles from './CustomerPanel.module.css';
export function CustomerPanel() {
  return <section className={styles.panel}>Customers</section>;
}

/* CustomerPanel.module.css — a separate file */
.panel { padding: 1.5rem; border-radius: 0.75rem; }

Deploy the compiled JavaScript and CSS together. Pasting .panel into the hosted CSS editor does not create the generated class mapping. Modules isolate class names, but inherited styles and global rules can still affect a component.

4. React with inline styles

Use React's style object for values calculated at render time. Property names use camelCase. Inline style objects are not a replacement for stylesheet media queries, hover/focus selectors, or a consistent design system.

export function Progress({ percent }) {
  const width = Math.max(0, Math.min(100, percent));
  return <div role="progressbar" aria-valuemin={0} aria-valuemax={100}
    aria-valuenow={width} aria-label="Progress"
    style={{ width: `${width}%`, minHeight: 8, backgroundColor: '#465fff' }} />;
}

This works in React source; a hosted page block accepts only its registered styling properties. Check your host's Content Security Policy (CSP), since some policies restrict inline styles. Do not weaken security headers just to make a styling example work.

5. React with component libraries

You can integrate a React component library in your own frontend, subject to its React version, license, accessibility, and build requirements. Follow the library's installation instructions, add required theme providers once near the application root, and import its required styles. A UI library does not provide BuildWithHQ authorization or automatically connect its controls to API routes.

Use one primary visual system. Check dialogs and dropdown portals, stacking order, keyboard navigation, mobile layouts, dark mode, and CSS reset collisions. Keep CRUD actions wired to the documented secured clients, including validation and stale-write handling. Hosted runtime integration still requires registered components and a reviewed build.

6. React with styled-components or similar CSS-in-JS tools

Install the chosen package in your own React project and include it in the production build. For example, with styled-components installed:

import styled from 'styled-components';

const Panel = styled.section`
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
`;

export function CustomerPanel() {
  return <Panel>Customers</Panel>;
}

See the styled-components basics. Emotion and other tools have their own setup. Runtime style injection must satisfy the host's CSP; server-rendered apps also need the library's supported style extraction and hydration setup. Do not interpolate untrusted user CSS. The hosted CSS editor accepts CSS, not tagged-template JavaScript or package imports.

Before publishing

1. Choose the host and styling approach. For existing hosted pages, start with theme settings and validated CSS overrides.
2. Build and test using your project's scripts; do not use a development server as the public production server.
3. Check desktop and mobile, keyboard focus, contrast, loading, empty, validation, permission-denied, and stale-write states.
4. Verify CSS, fonts, images, and lazy-loaded chunks load under the deployed security policy. Keep privileged app credentials on the backend, never in CSS or browser bundles.
5. Publish through the relevant page/asset or frontend deployment workflow, then retest the served application.

Continue with TailAdmin template design and React customization, the headless application guide, or the React component catalog.

Capability review: 2026-09-14. For exact current technical availability, use the generated API Map and first-class module inventory.