C3 AI Documentation Home

Pros and cons of adding C3 AI Types to your UI components

The UI Framework includes a built-in component library. You can create your own reusable components using libraries from the npm ecosystem.

You have two options for implementing components:

  • Use standard React.
  • Use React with Type definitions.

This topic explains the benefits and tradeoffs of each approach.

Standard React

Write components as React .tsx files and render them with JSX:

TypeScript
import MyComponent from './MyComponent';

const MyPage = () => {
  return <MyComponent />;
};

export default MyPage;
  • Import the component from a local path
  • Return the component inside JSX
  • Export the page so it can be routed or composed elsewhere

When to use this approach

Use standard React when:

  • You want to define components without platform-specific configuration
  • You will only use the component inside React pages
  • You prefer to follow familiar React patterns without constraints

This method gives you full control over props, logic, composition, and rendering.

React with C3 Type definitions

Use C3 Type definitions to expose React components for JSON-based configuration. This approach supports declarative usage and API documentation across the platform.

Benefits

  • Enable JSON and TypeScript (.tsx) instantiation of UI components.
  • Generate API reference documentation automatically from the Type definition.
  • Define a consistent contract for component usage and behavior.

Tradeoffs

  • Maintain a separate .c3typ file alongside each component.
  • Update both the Type and the implementation when changing the API.
  • Avoid direct use of props unless declared explicitly in the Type.

Use this approach when you want to support JSON-based instantiation or generate reference documentation from the component API. Use standard React components without a Type definition when your use case does not require JSON integration or strict API documentation.

Considerations for using Type definitions

Exposing a React component through a Type enables JSON-based usage and introduces both benefits and tradeoffs:

ConsiderationDescription
UI component documentationC3 AI Types define an API that surfaces in reference documentation, helping application developers understand how to use the component.
JSON instantiationDevelopers can instantiate the component using either JSON or TSX, enabling a declarative pattern when needed.
More files to maintainYou must manage the API definition separately from the component implementation. This separation can improve clarity or increase overhead depending on your team's workflow.

Use C3 Type definitions when you want to expose components in both JSON and TSX. For purely programmatic use, prefer standard React.

Was this page helpful?