# 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](https://docs.payengine.co/developer-docs/getting-started-1/frontend-frameworks).
{% 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-api.payengine.co/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 { loadPayengine, payengineStyles } from "payengine";
import overrideStyle from "MyComponenet.module.css";

const MyComponent = () => {

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

## Vue.js

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

#### Step 1. Install the npm package

```markup
npm install payengine
```

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

Option1 - Via style module within your .vue file

```javascript
/*
    MyComponent.vue
*/

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

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

export default {
    name: "MyComponent",
    methods: {
        payengineStyles
    },
    created() {    
        try {
             loadPayengine({
                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>
    <pay-engine 
      type="boarding" 
      merchant-id="<payengine_merchant_id>" 
      hash="<HMAC_hash_of_payengine_merchant_id>">
      :styleModule="payengineStyles(payengineOverrides)"
    </pay-engine>        
</div>
</template>

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

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

</script>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.payengine.co/developer-docs/getting-started-1/styling-web-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.