---
updatedAt: 2025-10-30T12:30:39.000Z
agentTools:
  projectIndex: https://docs.pelcro.com/v2.4/llms.txt
---

# Style Overrides: Add CSS Specificity

You can restyle Pelcro’s UI by loading your own CSS on your site and **targeting the same elements with more specific selectors**. Pelcro scopes all UI under `.pelcro-root` and exposes stable classes/IDs so you can override safely without `!important`.

# How it Works (in 30 seconds)

1. **Pelcro scopes all user interface**
   Every component lives under `.pelcro-root` and many nodes have `pelcro-…` classes/IDs (e.g., `.pelcro-link`, `.pelcro-button-solid`, `#pelcro-login-view`).

2. **You add CSS on your site**
   In your global CSS or a `<style>` tag, write **more specific selectors** than the defaults (e.g., `#pelcro-app .pelcro-root .pelcro-link` beats `.pelcro-link`).

3. **Prefer specificity over `!important`**
   It’s cleaner, predictable, and easier to maintain.

# Where to Put Your CSS

Add to your site’s global stylesheet or your HTML `<head>`:

```html
<style>
  /* Example: site-level overrides */
  #pelcro-app .pelcro-root {
    --plc-primary-hue: 210;
    --plc-primary-saturation: 100%;
    --plc-primary-lightness: 60%;
  }
</style>
```

**Tip:** Target within a container you control (e.g., #pelcro-app …) to avoid accidental bleed into non-Pelcro UI.

# Try It Yourself on CodeSandbox

You can experiment with Pelcro’s UI customization directly in the sandbox below.

**Steps:**

1. Open the sandbox and go to src/styles.css.
2. Try targeting any Pelcro class and overriding its default styles.
3. Click the buttons on the right side of the screen to see your changes in action!

<iframe
  src="https://codesandbox.io/embed/dark-brook-wjt2tm?view=preview&fontsize=14&hidenavigation=1&theme=light"
  style={{
    width: "100%",
    height: "500px",
    border: "1px solid #ccc",
    borderRadius: "4px",
    overflow: "hidden"
  }}
  title="Dark Brook Sandbox"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
  />

**Example Explained:**

```css
/* Example: overriding Pelcro's default styles.
   The following rules hide certain Pelcro UI elements 
   (product cost, plan price, gift input, and checkbox labels) */

.pelcro-root .pelcro-select-product-cost,
.pelcro-root .pelcro-select-plan-price,
.pelcro-root #pelcro-input-is-gift,
.pelcro-root .pelcro-checkbox-label {
  display: none;
}

```

**In this example we’re hiding the following elements from the widget:**

* The product cost
* The plan price
* The gift checkbox
* The checkbox label

This demonstrates how you can selectively hide or restyle Pelcro UI elements using CSS overrides — giving you full control over the widget’s appearance.

# Specificity Playbook (no `!important`)

Use one (or combine) until your rule wins:

* **Add a parent**
  ```css
  #pelcro-app .pelcro-root .pelcro-link
  ```

* **Use the provided IDs/classes**
  ```css
  #pelcro-login-view .pelcro-input-field
  ```

* **Match states**
  ```css
  .pelcro-button-solid:hover
  .pelcro-input-field:focus
  ```

* **Attribute or nth selectors if needed**
  ```css
  .pelcro-input-field[type="email"]
  .pelcro-modal :is(h1,h2)
  ```

***

# Common Targets (Copy & Paste)

```css
/* Links */
#pelcro-app .pelcro-root .pelcro-link {
  color: #3399ff;
}
#pelcro-app .pelcro-root .pelcro-link:hover {
  color: #002d7f;
}

/* Buttons */
#pelcro-app .pelcro-root .pelcro-button-solid {
  background-color: #3399ff;
  --tw-ring-color: #50a6fd; /* Tailwind ring var override */
}
#pelcro-app .pelcro-root .pelcro-button-solid:hover {
  background-color: #002d7f;
}

/* Inputs */
#pelcro-app .pelcro-root .pelcro-input-field:focus {
  --tw-ring-color: #50a6fd;
}

/* Login view only */
#pelcro-app #pelcro-login-view .pelcro-input-label {
  font-weight: 600;
}

/* Typography & font */
#pelcro-app .pelcro-root {
  font-family: "Helvetica", Arial, sans-serif;
}
```

***

# Colors via CSS Variables

Pelcro exposes color tokens you can redefine at `.pelcro-root`:

```css
#pelcro-app .pelcro-root {
  --plc-primary-hue: 210;
  --plc-primary-saturation: 100%;
  --plc-primary-lightness: 60%;
}
```

Keeps your palette centralized and Tailwind-compatible.

***

# Load Order & Caching

* **Load your CSS after Pelcro’s bundle** so the cascade favors your rules.
* **Bust caches** when testing (add a query string to your CSS URL).
* If you use a site builder/CMS, ensure **global styles are in `<head>`** and not lazy-loaded after the UI opens.

***

# Debug & Verify in DevTools

1. Inspect the element → **Styles** → confirm your rule is **last/winning**.
2. If crossed out, increase specificity (e.g., add a parent like `#pelcro-app`) or move your stylesheet later.
3. Check the **Computed** tab for final values (color, font, spacing).
4. Test interactive states (`:hover`, `:focus`, `:disabled`) and modal layers.

***

## Example

<Image alt={516} border={false} caption="overriding default styles" title="utils example.png" src="https://files.readme.io/53cb4c4-utils_example.png" />

<br />

<br />

# Sibling pages

* [React Elements](https://docs.pelcro.com/v2.4/docs/react-elements.md)
* [UI Showcase](https://docs.pelcro.com/v2.4/docs/showcase.md)
* [eCommerce](https://docs.pelcro.com/v2.4/docs/ecommerce-ui.md)
* [URL Triggers](https://docs.pelcro.com/v2.4/docs/react-elements-url-triggers.md)