Learn how to add your own custom components to your Mosaic site.

To start, create a components folder under src where you'll store your custom components.

In this tutorial, we will create a custom Card component.

Inside the components folder, create a card folder, which will contain your React Card component. The card folder should include index.tsx and card.module.css files as shown in the structure below:

Create your Card component within the index.tsx file:

Define your component styles in the card.module.css file:

In this example, we use a CSS file, but you can use whichever styling approach you prefer, such as vanilla extract.

To export your Card component, create an index.ts file in the components folder:

Your final folder structure should look like this:

To use your custom Card component, import it into your site's _app.tsx file. Add the following line to your imports:

Replace this line:

with:

This will add your custom components to the site, and any custom components in myComponents will override the corresponding ones in mosaicComponents. The spread operator (...) merges both mosaicComponents and myComponents objects, giving priority to myComponents when there is a naming conflict.

Now you're ready to use your custom Card component. Build and run your site, and add the Card component to an MDX file in your docs folder or another source:

You can create and add more custom components to your Mosaic site by following the same process.