Gatsby

Locking packages

If you lock the React components to a particular version, you should also install and lock the corresponding web components package.

Step one

In the root of your project:

// using npm
npm install @ukic/react @ukic/fonts

// using yarn
rm package-lock.json
yarn add @ukic/react @ukic/fonts

Step Two

Install thegatsby-plugin-stencil package to allow Gatsby to render the components server-side.

// using npm
npm install --save gatsby-plugin-stencil

Step three

In yourgatsby-config.js file (at the root of the project), add the following:

plugins: [
  {
    resolve: `gatsby-plugin-stencil`,

    options: {
      module: "@ukic/web-components",
      renderToStringOptions: {
        prettyHtml: true,
      },
    },
  },
];

Step four

Add the following to the top level index file of your project.

import "@ukic/fonts/dist/fonts.css";
import "@ukic/react/dist/core/core.css";

In order to be rendered consistently across browsers and in line with modern standards, each of the components uses styles from a global CSS file based on Normalize.css .

If you would like to import these styles to apply them to the rest of your project and slotted elements used within any of the components, add the following into the top level index file as well.

import "@ukic/react/dist/core/normalize.css";

Step five

Import the component(s) in your Gatsby pages.

import { IcComponent } from "@ukic/react";

Helpful links

The Gatsby documentation contains more information on the gatsby-plugin-stencil plugin. Further information can be found on using Stencil web components in Gatsby .

Last reviewed 24 April 2024 .