How to use a component in your project

Usually you need to follow a few steps to make use of a component:

Step 1: Install any required 3rd party libraries

The component's documentation page may contain a list of 3rd party library requirements. Install these libraries in your project as and when you need them.

An example will look like this:

Open a terminal from inside your project directory and run the install command for each dependency to install the library.

npm install embla-carousel-react@9.0.0-rc01

Step 2: Copy local dependencies

The component's documentation may also contain a set of files and folders that you need to copy into your project.

An example will look like this:

Copy each of these files and folders into your project and place them in exactly the same location as they are in the component library.

Step 3: Replace icons

The component library uses a set of icons from the Remixicon library. Your project will most likely use a different icon library. Make sure you replace all the icons with the icons you're using in your project.

Step 4: Hook up to real data

The component library is filled with fake data. You'll need to hook up the component to use the data and data model of your project. This might involve changing the props to accept a data structure defined by your CMS.

Step 5: Replace image and video placeholders

Videos and images are handled differently in different projects. You may have a specific Image or Video component that optimizes images from your CMS for example. In the component library we've used local placeholder images and videos that you can replace with whatever media components your project needs.

Step 6: Replace placeholder text

Some components have placeholder text. e.g. for button labels. We've put these strings inside an object called STRINGS_TO_REPLACE in each component file. Replace these strings with the strings you're using in your project.

Your strings might come from the CMS or from a localization library.

Make sure to delete the STRINGS_TO_REPLACE object from the component file when you're done.

Step 7: customize

Your project might use an Accordion that looks nothing like the one in this project... That's totally fine! The component library is designed to be a starting point, not a finished product.

Feel free to either modify the styles directly in the component file you copy here, or create a higher level component and pass styles down to our components. However you want to do it.