This guide explains how to apply Copyl’s design system to your Web Component, regardless of whether you use Bootstrap, Material UI (MUI), or another UI framework.

Option 1: If your component uses Bootstrap-based classes

If your Web Component uses standard HTML or Bootstrap utility classes such as .btn, .form-control, .card, etc., you should load the Copyl CSS at runtime from:

<https://c.copyl.com/assets/components/copyl.css>

This will ensure a consistent look and feel inside Shadow DOM.

Runtime CSS loader example (Shadow DOM compatible):

async function loadExternalCss(url) {
  const response = await fetch(url);
  const cssText = await response.text();
  const styleElement = this.shadowRoot.querySelector('style') || document.createElement('style');
  styleElement.textContent = cssText;
  if (!styleElement.parentNode) {
    this.shadowRoot.prepend(styleElement);
  }
}

this.loadExternalCss('<https://c.copyl.com/assets/components/copyl.css>');

This CSS includes utility classes and base styles compatible with Copyl’s design system.

Option 2: If your component uses another UI framework (e.g. MUI, Tailwind, etc.)

If you are using a framework that does not rely on Bootstrap classes, you can still align visually with the Copyl design system by using CSS variables.

Step 1: Load the CSS with variables

You can reference the same file as above:

<https://c.copyl.com/assets/components/copyl.css>

This file exposes the following custom properties under :root:

Example:

:root {
  --copyl-primary: #0d6efd;
  --copyl-secondary: #6c757d;
  --copyl-font-family-base: 'Inter', sans-serif;
  --copyl-border-radius: 4px;
}

Step 2: Map to your design system (MUI example)

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: getComputedStyle(document.documentElement).getPropertyValue('--copyl-primary').trim()
    },
    secondary: {
      main: getComputedStyle(document.documentElement).getPropertyValue('--copyl-secondary').trim()
    }
  },
  shape: {
    borderRadius: parseInt(
      getComputedStyle(document.documentElement).getPropertyValue('--copyl-border-radius'),
      10
    )
  },
  typography: {
    fontFamily: getComputedStyle(document.documentElement).getPropertyValue('--copyl-font-family-base').trim()
  }
});

This will allow your components to visually blend with Copyl’s container UI, even if they use their own framework internally.

Use Shadow DOM (open)