# Getting Started with Custom Components **Custom Components** are custom React components built by external developers to fit unique requirements, integrations, or designs. **Custom Components**, similar to **Limio Components**, can be used in Limio's Page Builder by the marketing, product, and commercial teams, enabling collaboration across Engineering and Business teams. For example, developers may build Custom Components to: * **Display:** Create a pricing matrix or a price calculator, using the [Limio Offer SDK](https://docs.limio.com/developers/limio-sdk/page). * **Personalisation:** Verifying user information such as their account status to redirect them to the most appropriate offers, using [Limio User SDK](https://docs.limio.com/developers/limio-sdk/user). * **Business process:** Check availability and deliverability of a product in a third-party fulfilment platform, using [External Services](https://docs.limio.com/developers/custom-components/connecting-to-external-service). * **Promotions:** Surface an exit intent popup that adds a promo code to the cart or automatically add a promo code when two products are added (bundle & save), using [Limio Cart SDK](https://docs.limio.com/developers/limio-sdk/basket). * **Personalisation:** Surface upsell options in self-service for a subset of subscribers, by using a combination of the Limio Offer & User SDK. **Custom Components** are React components, so you only need React knowledge to create a custom component in Limio**.** To work with Custom Components, Limio provides a **Developer Experience** that aims to allow developers to do their work in the way most natural to them, this means: * To be able to develop **locally** and see results **quickly** in Storybook * To be able to support your own **release** and **versioning** process in GitHub, GitLab or AWS CodeCommit. * To be able to use a CI process such as Circle CI within your to **release changes in a controlled environment** {% hint style="success" %} **Accelerate with AI:** Use [Claude Code](https://claude.ai/code) with the Limio Skills plugin to rapidly generate Custom Components. Simply describe what you want and get production-ready code with full SDK integration. [Learn more →](https://docs.limio.com/developers/custom-components/claude-code-skill) {% endhint %} ## Before we begin To successfully develop custom components for Limio, make sure you have: * [**React 18+**](https://react.dev/blog/2022/03/29/react-v18) knowledge * A user in **Limio** * Installed **yarn or npm** as a package manager * **Git** knowledge We'll use the following terminology: * **Limio** to refer to the Limio application where a user log-in * **Limio Shop & Self-Service** to refer to the published pages built in **Limio.** Those pages are then accessed via an end-user to transact and perform commerce actions. * [**Limio Components**](https://docs.limio.com/components/) refers to Limio's out-of-the-box components. * **Custom Components** are the components you will build. * **Limio Components Repository** is the master repository that stores your custom components and is linked to your **Limio** application. ## Getting Started with Limio Components Repository To start, you will need to clone your **Limio Components Repository**, which is in AWS CodeCommit. Follow the steps below to copy it. Once cloned, you will then be able to set up mirroring into any Git-based software platform such as Github and GitLab. ### Step 1: Generate Your Credentials To generate new repository credentials, log into Limio Commerce and navigate to the **Profile → Developer Credentials** tab. If you do not yet have credentials, click **Generate Credentials** which will create a Git username (your Limio username), generate a password, and display your environment-specific repository clone link. {% hint style="warning" %} **Important:** You will need to store the password separately, as they will not be displayed again once you navigate away from the page! {% endhint %} If you already have credentials, you’ll see your current username and clone link. Your password will not be visible. If you lost your password, you can use the Regenerate Credentials button. If you'd like to delete the credentials entirely (for example, during offboarding), you can use the **Delete Credentials** button. ### Step 2: Clone the Repository Run the following command with the **Limio Component Repository** clone link provided by Limio Support in Step 1. **EU Example: eu-central-1 (Frankfurt)** ```sh git clone https://git-codecommit.eu-central-1.amazonaws.com/v1/repos/{tenant}-dev-components ``` **US Example 2: Cloning from us-east-1 (N. Virginia)** ```sh git clone https://git-codecommit.us-east-1.amazonaws.com/v1/repos/{tenant}-dev-components ``` {% hint style="info" %} If you receives an error code such as a 403, you may not be authorised to perform this request. Contact . {% endhint %} ### Step 3: Authenticate When prompted, enter the **username** and **password** provided in Step 1. Once authenticated, the repository will be cloned to **your local machine**, and you can begin working with it. ## Start working with your Limio Components Repository ### Creating Custom Components Once you have cloned the **Limio Components Repository**, you will see two directories: * `component-playground` : An interactive playground in **Storybook** with all the context a **Limio Shop & Self-Service** would have. Storybook is a frontend workshop for UI development that allows developers to work with out-of-the-box **Limio Components** or **Custom Components** in isolation. * `components` : A folder that contains all the components, whether **Limio Components** or **Custom Components** that will be built and made available in Limio's [**Page Builder**](#limio-component-playground). To work with components, load the **README file** in your cloned repository and follow the guidance there. You can also find it [here](https://github.com/innovate42/limio-components). It will also help to: * Be familiar with Limio’s [**development guidelines**](https://docs.limio.com/developers/custom-components/development-guidelines) to follow best practices. * Understand how to define and validate props using [**Prop Types**](https://docs.limio.com/developers/custom-components/prop-types). ### Loading Custom Components into Limio Once you have made changes to a **Custom Component** in your cloned repository, you can then use standard Git methods to commit and push changes to your **Limio Component Repository**. Once you push changes to the **Limio Component Repository**, Limio will automatically build the component. If the **Repository Component Build** is [successful](https://docs.limio.com/api/build-and-publish-api), the Custom Components will take a couple of minutes to load or update in the Limio application. Users can then see the Custom Component in **Limio's Page Builder** (see below)**.** {% hint style="info" %} If you cannot see your component, try doing a hareeeefresh. On Mac: Press Cmd + Shift + R. On Windows: Press Ctrl + Shift + R. {% endhint %} ## Adding more developers to collaborate If you'd like to collaborate with other developers, you have two options: * You can contact Limio to setup additional users to your **Limio Component Repository**, then go through [the steps 1 to 3](#getting-started-with-limio-components-repository). * You can setup repository mirroring in GitHub and GitLab, then add more users there. Learn more on how to do this [here](https://docs.limio.com/developers/custom-components/connecting-external-ci).