> ## Documentation Index
> Fetch the complete documentation index at: https://docs.noclick.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom components

> Run fully custom React components in your app with the HTML / React block.

The **HTML / React** block renders your own code inside the interface. It has two modes:

* **HTML**: raw HTML rendered as-is.
* **JSX / React**: a full React component. JSX is transpiled automatically, Tailwind CSS classes work out of the box, and npm packages resolve via esm.sh imports.

Components run in a sandboxed iframe with the `@noclick/sdk` available, so they can execute the workflow, read node outputs, and react to run results. This is how dashboards, custom forms, and complete app frontends are built on NoClick; the AI builder typically writes these components for you when you describe the app you want.

<Frame caption="A custom React component rendered fullscreen in the Interface tab">
  <img src="https://mintcdn.com/noclickinc/M99Xyd8Ho6Jf17gu/images/apps/custom-components-1.png?fit=max&auto=format&n=M99Xyd8Ho6Jf17gu&q=85&s=ed183a7891d36c96e13db4bab8a65b83" alt="Custom React component running as a fullscreen interface block" width="2690" height="1522" data-path="images/apps/custom-components-1.png" />
</Frame>

Custom components are fullscreen by default; set the block's **Fullscreen** option to **No** to place it on the grid alongside other blocks.

For the full component API, including SDK calls, imports, and working examples, see the [custom components SDK guide](/sdk/custom-components). To put a component on the public web, see [Publishing apps](/apps/publishing).