Integrations

Web Components

The CDN bundle registers all your design system components as native Web Components. No build step, no npm install. Just a script tag.

CDN usage

Drop this into any HTML page, including CMS-embedded pages (WordPress, Webflow, Squarespace). All components are registered as custom elements immediately. Because the URL includes latest, every app using this script automatically receives updated components whenever a new version is published, with no redeploy needed.

index.htmlhtml
<!DOCTYPE html>
<html>
  <head>
    <!-- Drop into any HTML page, no build step needed -->
    <!-- Always serves the latest published version automatically -->
    <script
      type="module"
      src="https://cdn.reframeui.app/org/project/latest/design-system.js"
    ></script>
  </head>
  <body>
    <ds-badge variant="success">Live</ds-badge>
    <ds-button variant="primary">Deploy now</ds-button>
  </body>
</html>

How it works

The CDN bundle is a self-contained ES module that:

  1. 1.Injects your CSS custom properties (design tokens) into the document
  2. 2.Calls customElements.define() for each component (e.g. ds-button, ds-badge)
  3. 3.Handles attribute-to-prop reflection automatically

Web Components work in plain HTML, CMS-embedded code (WordPress, Webflow, Squarespace), and any JS framework via the DOM, since they're just HTML elements.

Use in existing frameworks

Even if you're using React, Vue, or Angular, you can use the CDN bundle to consume your design system without installing the framework-specific adapter. Useful for prototypes or apps that can't add npm dependencies:

React with web componentstsx
// React 19+ supports web components natively
// Just add the script tag to your HTML and use as JSX:
export function App() {
  return (
    <div>
      {/* TypeScript needs a declaration for custom elements */}
      <ds-badge variant="success">Live</ds-badge>
      <ds-button variant="primary">Deploy now</ds-button>
    </div>
  );
}

Limitations

  • •No tree-shaking: The CDN bundle includes all components. Use the npm adapter if bundle size matters.
  • •No TypeScript types: Custom elements are untyped in JSX by default. Use the React/Vue/Angular adapter for full type safety.
  • •SSR: Custom elements require a browser environment. For SSR, use the framework-specific adapters which handle hydration.

Next steps

Learn how to use the CLI to build, preview, and publish from CI.

CLI Reference →