C3 AI Documentation Home

Implement your first React component

There are two ways to define UI components on the C3 AI Platform — one uses declarative JSON, and the other uses programmatic tools like React. This topic provides an end-to-end example of how to create a new React component that leverages an open-source npm library.

The platform supports two approaches for building React components:

  • React component instances – These React components do not accept any props, and you can use them directly in routes or JSON components. This topic focuses on this pattern.
  • React reusable components – These accept props and let developers create multiple instances with different configurations. You cannot use them directly in routes or JSON components, but you can embed them inside component instances.

Build your first page component

Start by creating a complete, working page that renders a layout, some text, and a styled button. This example shows how to:

  • Import and display third-party components (like Material UI’s Button)
  • Organize page-level logic using React and JSX

Add a route that points to the file

Update your UiRoute.csv to point to the .tsx file. Define these routes in the {package}/metadata/UiSdlRoute/UiSdlRoute.csv file:

CSV
targetModuleName,targetPageName,name,urlPath
examplePackage,MyComponent,/component,/component

When users visit /component, the platform renders examplePackage.MyComponent.tsx.

Install any required NPM libraries

This example uses Material UI’s @mui/material library. You must install and configure any third-party libraries before using them in your project. We recommend editing your ImplLanguage.Runtime file directly in VS Code.

For full details and setup instructions, see Use npm libraries in your C3 UI application

Write the component

The code below builds the page layout using platform primitives and Material UI’s Button component.

The folder name customInstances and its path ({package}/ui/c3/src/customInstances) must match exactly. The platform uses this path to locate page-level .tsx files and render them based on route configuration. For more on directory structure and naming conventions, see Create an application package.

TypeScript
// {package}/ui/c3/src/customInstances/examplePackage.MyComponent.tsx

// Import the React library
import React from 'react';

// Import a button from the Material UI library
import Button from '@mui/material/Button';

// This component controls an entire page — it receives no props
const MyComponent = () => {
  return (
    <div>
      {/* Main page content */}
      <div style={{ padding: 24 }}>
        {/* Render a heading */}
        <h2>Welcome to your custom page</h2>

        {/* Add supporting text */}
        <p>This page uses React and Material UI.</p>

        {/* Add a styled button */}
        <Button variant="contained" color="primary">
          Click Me
        </Button>
      </div>
    </div>
  );
};

// Export the component so the platform can render it
export default MyComponent;

Validate your changes

To test your new component:

  1. Start the UI bundler using the C3 AI Console.
  2. Wait until the bundler finishes building your application.
  3. Open a browser and visit the route you configured in UiRoute.csv
  4. You should see your React component with the heading and Material UI button.

When to use a page-level component

Use a page-level component when you want to:

  • Own all layout, rendering logic, and interactions
  • Avoid defining a Type or props
  • Render the component in isolation, tied only to a specific route
Was this page helpful?