CDN

Load Duo tokens, styles, and web components from versioned CDN URLs without npm.

Duo components can be used directly via CDN without setting up a build system. Add the files below to your HTML in order — tokens, then styles, then the UI bundle.

For application code with a bundler, prefer installing packages from npm.

Required files

Add these tags to your page:

<!-- Design tokens -->
<link rel="stylesheet" href="https://design.talentech.io/cdn/duo/tokens/1.0.1/base/tokens.css" />

<!-- Styles -->
<link rel="stylesheet" href="https://design.talentech.io/cdn/duo/styles/3.0.0/index.css" />

<!-- UI components -->
<script type="module" src="https://design.talentech.io/cdn/duo/ui/1.5.0/index.min.js"></script>

Examples use index.min.js for production. Use index.js when you need readable source in browser DevTools.

Usage example

A minimal HTML page using Duo web components:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Duo Design System example</title>

    <!-- Required CSS -->
    <link rel="stylesheet" href="https://design.talentech.io/cdn/duo/tokens/1.0.1/base/tokens.css" />
    <link rel="stylesheet" href="https://design.talentech.io/cdn/duo/styles/3.0.0/index.css" />

    <!-- UI components -->
    <script type="module" src="https://design.talentech.io/cdn/duo/ui/1.5.0/index.min.js"></script>
</head>
<body style="padding: var(--duo-space-l);">
    <!-- Your Duo components here -->
    <duo-button variant="primary">Save</duo-button>
</body>
</html>

Version information

CDN URLs include a semver so you can pin a stable version. The examples above use the latest published versions:

  • @duo/assets v0.2.0
  • @duo/cookiebanner v0.2.0
  • @duo/editor v0.2.4
  • @duo/email-templates v0.3.4
  • @duo/fonts v0.2.0
  • @duo/icons v0.2.0
  • @duo/styles v3.0.0
  • @duo/tokens v1.0.1
  • @duo/ui v1.5.0

All packages are served from https://design.talentech.io/cdn/duo/{package}/{version}/{file}. Older version folders remain available after new releases.

Package Latest Example URL
@duo/tokens 1.0.1 https://design.talentech.io/cdn/duo/tokens/1.0.1/base/tokens.css
@duo/styles 3.0.0 https://design.talentech.io/cdn/duo/styles/3.0.0/index.css
@duo/ui 1.5.0 https://design.talentech.io/cdn/duo/ui/1.5.0/index.min.js
@duo/icons 0.2.0 https://design.talentech.io/cdn/duo/icons/0.2.0/index.js
@duo/assets 0.2.0 https://design.talentech.io/cdn/duo/assets/0.2.0/index.js
@duo/email-templates 0.3.4 https://design.talentech.io/cdn/duo/email-templates/0.3.4/

This page updates when packages are versioned and the documentation site is rebuilt.

Subresource integrity

For enhanced security, add integrity checks to script and link tags. Hash values for each file are published at:

https://design.talentech.io/cdn/duo/{package}/{version}/integrity.json

Example for @duo/ui:

<script
  type="module"
  src="https://design.talentech.io/cdn/duo/ui/1.5.0/index.min.js"
  integrity="[value from integrity.json]"
  crossorigin="anonymous"
></script>

Related