Using Prebuilt Components

In this tutorial we will use the Commure React components to easily build interfaces that give healthcare providers a great user experience.

In the sections below we will explore only a small fraction of available components. For a complete list, see the component showcase.


The Commure React component library makes several foundational components available. These components are based on the Blueprint component library, but we recommend exporting from @commure/components-foundation, as these components may be enhanced for the Commure Platform.

For example, there are components for buttons, progress bars, and switches:

Hide code

See the foundational component page for detailed documentation and many more examples.


To provide a consistent application layout for users, the Commure React component library includes the AppHeader, Panel, and LeftPanelLayout layout components. Every application must use the AppHeader component, and we recommend using one of the panel layouts as well.

An example application layout is show below.


Awesome App


šŸ“ Form components here


In most cases, we want to our applications to load some data and display it the user, or capture some data from the user and post it to the Commure Platform, or both. To accomplish this, we use the Commure data components.

To connect our application to the Commure Platform APIs, we need to use theĀ <CommureSmartApp />Ā component. See theĀ Build a New ApplicationĀ page for a detailed walk-through.


All clinical data in the Commure Platform is made available using FHIR. The FHIR data standard is very flexible, so data may be represented in several different ways. The Commure React components take care of handling these complexities so you don't have to.

FHIR Data Types

FHIR resources consist of fields that each have a specific data type. The Commure React component library provides components for all of the FHIR data types. Some these data types are very simple, such at the decimal type.

The following example demonstrates how to use the <FhirDecimal/> component.

Hide code

At first it may seem like overkill to use a dedicated component to display a simple numeric value, but there are several advantages to this approach. For example, if some future version of the FHIR standard changes the rules for a certain data type, it will only be necessary to update your version of the Commure React component library and your application will automatically be updated to handle the change. Using the FHIR data type components also allows your application to be globally styled according to user or organizational preferences.

Perhaps more importantly, the FHIR standard also includes complex data types, which can be much more complicated than primitive numbers or strings. For example, the Patient resource has a name field that is an array of elements of type HumanName. All HumanName attributes are optional, and the FHIR standard makes some suggestions on how to use these fields, but there no strict rules that hold in all cases.

So, instead of trying manage all of these rules, which may be different between FHIR versions, we provide the <FhirHumanName/> component. An example usage is shown below.

Mrs. Homenick Clyde
Hide code

See also the reference documentation for the FHIR Data Type components.

Composite Components

In addition to FHIR data type components, the Commure React component library provides components that are useful in some common healthcare scenarios. For example, to display basic information about the patient, the <PatientCard/> component can be used:

Alex Gilmour
73 yoGender:MaleDOB:9/22/48MRN:09272017