Skip to content
Acopl UI

CDN Usage

Add Acopl UI to any HTML project in 3 lines.

Minimal setup

Section titled “Minimal setup”
index.html
<head>
  <!-- 1. Anti-FOUC: set theme before CSS loads (no flash) -->
  <script>(function(){var t=localStorage.getItem('ac-theme')||(window.matchMedia('(prefers-color-scheme:light)').matches?'light':'dark');document.documentElement.setAttribute('data-theme',t);})();</script>


  <!-- 2. Fonts (Google Fonts) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">


  <!-- 3. Acopl UI CSS -->
  <link rel="stylesheet" href="https://ui.acopl.ar/v2.0.0/acopl-ui.css">
</head>
<body data-theme="dark">


  <!-- Your content using ac-* components -->
  <ac-button variant="primary">Get Started</ac-button>


  <!-- 4. Web Components JS (at end of body or with type="module") -->
  <script type="module" src="https://ui.acopl.ar/v2.0.0/acopl-ui.js"></script>
</body>

With ThemeManager (toggle support)

Section titled “With ThemeManager (toggle support)”
<script type="module">
  import { ThemeManager } from 'https://ui.acopl.ar/v2.0.0/acopl-ui.js';


  // Auto-detect: reads localStorage first, then prefers-color-scheme
  ThemeManager.init();


  // Wire up a toggle button
  document.getElementById('theme-toggle').addEventListener('click', () => {
    ThemeManager.toggle();
  });
</script>

In Astro

Section titled “In Astro”
src/layouts/Layout.astro
---
const CDN = 'https://ui.acopl.ar/v2.0.0';
---
<html lang="es" data-theme="dark">
<head>
  <script is:inline>
    (function(){var t=localStorage.getItem('ac-theme')||
    (window.matchMedia('(prefers-color-scheme:light)').matches?'light':'dark');
    document.documentElement.setAttribute('data-theme',t);})();
  </script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href={`${CDN}/acopl-ui.css`}>
</head>
<body>
  <slot />
  <script type="module" src={`${CDN}/acopl-ui.js`}></script>
</body>
</html>

Using design tokens in JavaScript

Section titled “Using design tokens in JavaScript”
import tokens from 'https://ui.acopl.ar/v2.0.0/tokens.js';


// Use in canvas, chart libraries, animations, etc.
console.log(tokens.colors.brand.orange); // '#F97316'
console.log(tokens.shadows.card);
console.log(tokens.animation.duration.base); // '150ms'

Available URLs

Section titled “Available URLs”
ResourceURL
CSS (versioned)https://ui.acopl.ar/v2.0.0/acopl-ui.css
JS (versioned)https://ui.acopl.ar/v2.0.0/acopl-ui.js
Tokens (versioned)https://ui.acopl.ar/v2.0.0/tokens.js
CSS (latest)https://ui.acopl.ar/latest/acopl-ui.css
JS (latest)https://ui.acopl.ar/latest/acopl-ui.js
Tokens (latest)https://ui.acopl.ar/latest/tokens.js