> For the complete documentation index, see [llms.txt](https://docs.payengine.co/developer-docs-v2.5/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.payengine.co/developer-docs-v2.5/getting-started-1/styling-web-component.md).

# 7. Custom styling the Web-Components

Web-Components are the most convenient way to integrate functionalities in your application. Like any other UI elements in your application we provide simple ways to style these Web-Components so they become part of your application for a seamless user experience.

Below you will find examples in some popular frontend frameworks.

{% hint style="warning" %}
The library must be loaded before custom styling can be used in your application. To enable the library, please refer to our guide [Loading the frontend library](/developer-docs-v2.5/getting-started-1/frontend-frameworks.md).
{% endhint %}

{% hint style="info" %}
For a complete list of customizable style elements please refer to our guide [JS Client Library Properties and Styling](https://docs.paymentplatform.dev/payengine-api-v2.5/ui-styleguide-specs/onboarding-web-component) section.
{% endhint %}

## React

#### Step 1. Install the npm package

```markup
npm install payengine
```

#### Step 2. Create CSS module file for your component (MyComponent.module.css)

{% hint style="warning" %}
Important: CSS Modules are turned on for files ending with `.module.css` extension. This is required for styling to function properly.
{% endhint %}

```css
/*
    MyComponent.module.css
*/

.pf-transaction-table .tabulator-col-title-holder {
    border: 1px red solid;
}

.pf-transactions-table-col-title {
    font-size: 0.8rem;
}
```

#### Step 3. Import and apply styles in your React component

```javascript
/*
    MyComponent.js
*/

import { loadPlatform, payengineStyles } from "payengine";
import overrideStyle from "MyComponenet.module.css";

const MyComponent = () => {

    useEffect(() => {
        // Load Platform on first render only
        loadPlatform({
            public_key: <your PAYENGINE_PUBLIC_KEY>,        
        }).then((pe) => {
            // Your sucess handler goes here.
        });  
    }, []);
 
    return (
    <>
    <payment-platform 
      type="boarding" 
      merchant-id="<payengine_merchant_id>" 
      hash="<HMAC_hash_of_payengine_merchant_id>"
      styleModule={{payengineStyles(overrideStyle)}}>
    </payment-platform>        
    </>
    )   
}
```

## Vue.js

With Vue.js we have two options available and you can choose what best fits your application architecture.

#### Step 1. Install the npm package

```markup
npm install payengine
```

#### Step 2. Create modular \<style> in your component and apply to Web-Component

```javascript
/*
    MyComponent.vue
*/

<template>
<div>
    <payment-platform 
      type="boarding" 
      merchant-id="<payengine_merchant_id>" 
      hash="<HMAC_hash_of_payengine_merchant_id>">
      :styleModule="payengineStyles(payengineOverrides)"
    </payment-platform>        
</div>
</template>

<script>
import { loadPlatform, payengineStyles } from "payengine";

export default {
    name: "MyComponent",
    methods: {
        payengineStyles
    },
    created() {    
        try {
             loadPlatform({
                publicKey: <your PAYENGINE_PUBLIC_KEY>,
            });
        } catch (e) {
            // error handling
        }
    }
}

</script>

<style>
/*
    Your Vue.js component's style
*/
</style>

<style module="payengineOverrides">
.pf-transaction-table .tabulator-col-title-holder {
    border: 1px red solid;
}

.pf-transactions-table-col-title {
    font-size: 0.8rem;
}
</style>
```

Option 2 - CSS module file for your component (MyComponent.module.css)

{% hint style="warning" %}
Important: CSS Modules are turned on for files ending with `.module.css` extension. This is required for styling to function properly if you decide to use this option.
{% endhint %}

1. Create MyComponent.module.css

```css
/*
    MyComponent.module.css
*/

.pf-transaction-table .tabulator-col-title-holder {
    border: 1px red solid;
}

.pf-transactions-table-col-title {
    font-size: 0.8rem;
}
```

2\. Create MyComponent.vue

```javascript
/*
    MyComponent.vue
*/

<template>
<div>
    <payment-platform 
      type="boarding" 
      merchant-id="<payengine_merchant_id>" 
      hash="<HMAC_hash_of_payengine_merchant_id>">
      :styleModule="payengineStyles(payengineOverrides)"
    </payment-platform>        
</div>
</template>

<script>
import { loadPlatform, payengineStyles } from "payengine";
import payengineOverrides from "MyComponenet.module.css";

export default {
    name: "MyComponent",
    methods: {
        payengineStyles
    },
    created() {    
        try {
             loadPlatform({
                publicKey: <your PAYENGINE_PUBLIC_KEY>,
            });
        } catch (e) {
            // error handling
        }
    }
}

</script>

<style>
/*
    Your Vue.js component's style
*/
</style>
```