Code components will let you add code snippets to your documentation. This can help with shell commands, code examples, and API References.  

You can embed custom React in Umbria to show your users your product's unique features with the Inline React Component.

This component comes with both a Code tab where you will insert your inline React and a Preview tab where you and your users can preview your custom component.  

The code tab is where you will create your React component. It is divided into two sections: Custom Dependencies and the React Component Code section.

The Custom Dependencies section is where you specify any third-party imports required for your component.

The React Component Code is divided into two editors when editing the component. The top editor "Add Imports Below" is where you specify import statements that will be placed on top of your React component code when the page is previewed. The bottom editor "Add Component Code Below" is where you actually add the custom code for your in-line React component.

This section allows you to specify external modules that you would like to use in your code.

Each entry must include:

• module name of the module to import

Each entry may optionally include:

• defaultImport name for the default module (optional)

• namedImports array of named imports you'd like to import

This block is divided into two editors when editing the component, but the contents of these editors is combined when previewing the page.

The editor underneath the badge Add Imports Below is where you insert import statements that you'd like added above your component code when previewing the page. Note: these import statements have no effect on the code and are simply to inform your users of imports that may be needed.

The editor underneath the badge Add Component Code Below is where you insert the code for your React component. Do not include import statements in this code block. Imports are automatically loaded and parsed through the dependencies specified in Custom Dependencies 

The "Preview" tab will be used by your end user to preview your custom component.

You can resize the height of your in-line code component in the editor by hovering over the bottom edge of the bounding box and dragging.

API Component is designed specifically for API References and comes with endpoint tags, path, query, and body parameters, and response code segments. 

To change the endpoint tag (displaying the type of endpoint; get, post, delete, etc.) select the API Component and navigate to the "API Endpoint Type" settings in the right sidebar of the editor. There, select the type of endpoint from the dropdown. 

In the right sidebar for the API Component you are also able to show or hide different sections of the API component as well as customize the code editors it contains.