All components provided by Frigade are fully customizable. You can change the look and feel of any component by passing in a custom style object.

​
Customizing Frigade appearances

The appearance attribute is available on all Frigade components allows you to customize the look and feel of any component.

​
Styling the base theme

The base theme of Frigade can be styled by passing in the theme in the defaultAppearance prop to the config object in the FrigadeProvider component. The following properties are available:

PropertyDescription
colorPrimaryThe primary color — used on buttons, links, etc.
colorBackgroundThe background color to apply on components.
colorTextThe color to apply to text.
colorTextOnPrimaryBackgroundThe color to apply to text on top of the primary background color.
colorTextSecondaryThe color to apply to secondary text (typically used in subheaders).
fontSizeThe font size to apply to text.
fontSmoothingThe font smoothing to apply to text.
fontWeightThe font weight to apply to text.
borderRadiusThe border radius to apply to components.

Example:

    <FrigadeProvider
      publicApiKey='my-api-key'
      config={{
        defaultAppearance: {
          theme: {
            colorText: '#3d3d3d',
            colorTextSecondary: '#494949',
            colorTextOnPrimaryBackground: '#fff',
            colorPrimary: '#2956B5',
            colorBorder: '#E2E2E2',
          },
          styleOverrides: {
            checklistTitle: {
              fontSize: '1.5rem',
              fontWeight: 'bold',
            }
          }
        },
      }}
    >
      // Your app goes here
    </FrigadeProvider>

To style individual components, you can pass in the appearance prop with the same syntax as the defaultAppearance prop on any Frigade component.

​
Overriding styles on individual components

All Frigade components contain unique class names and can be targeted individually using CSS selectors.

Additionally, the styleOverrides prop in the appearance attribute allows you to override the styles of individual components programmatically. It can be used conveniently with frameworks such as Tailwind CSS to quickly customize the look and feel of Frigade components.

All components that can be targeted are prefixed with fr- in front of their primary class name. You can find an individual class by inspecting the DOM of the component you wish to target.

For instance, if you wish to apply the class bg-red to make the primary buttons in Frigade red, you can target the fr-button in the following way:

1

Inspect the DOM

Inspect the DOM of the element you wish to target. Below is an example using Google Chrome’s Inspector:

2

Target the Frigade element

In the inspector, you can see that the primary button has the class fr-button. You can now target this element by adding the following to your component:

appearance={{
  styleOverrides: {
    'button': 'bg-red'
  },
}}

​
Additional Options

​
Global CSS

Alternatively, you can simply target a Frigade CSS class using your own global CSS file.

.fr-tooltipContainerWrapper .fr-tooltipContainer .fr-smallSubtitle {
    font-size: 14px;
    color: #c6cbd2;
    border-color: #4e5765;
    letter-spacing: 0.01em;
}

​
Inline CSS

If you want to apply inline styles, you can do so by passing in a CSSProperty object to a Frigade component:

appearance={{
  styleOverrides: {
    'button': {
      backgroundColor: 'red'
    }
  }
}}
SDK OverviewNavigation