Skip to main content
BEEQ components are built with Stencil and compiled to standard Web Components (Custom Elements). They work in any framework or in plain HTML without additional adapters — though framework-specific wrappers are available for a better developer experience.

​
Install via package manager

The @beeq/core package is the foundation of BEEQ. All framework wrappers depend on it as a peer dependency. 
npm install @beeq/core

​
Use via CDN

You can use BEEQ directly from a CDN without any build step. Add the stylesheet and the ES module script to your HTML <head>: 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My BEEQ App</title>

    <!-- BEEQ global styles -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@beeq/core/dist/beeq/beeq.css"
    />

    <!-- BEEQ components (ES module) -->
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@beeq/core/dist/beeq/beeq.esm.js"
    ></script>
  </head>
  <body>
    <bq-button appearance="primary">Hello BEEQ!</bq-button>
  </body>
</html>

​
SVG icon setup

BEEQ’s icon system loads SVG files at runtime. The SVG assets are shipped in a separate folder inside the package (dist/beeq/svg) and must be served from a URL that the browser can reach. Use setBasePath from @beeq/core to tell the icon component where to find SVG files: 
import { setBasePath } from '@beeq/core';

// Point to a local copy of the SVG assets
setBasePath('/assets/svg/');
Alternatively, use a CDN — no local asset copying needed: 
import { setBasePath } from '@beeq/core';

// Using the Heroicons library via CDN
setBasePath('https://cdn.jsdelivr.net/npm/[email protected]/24/outline');
When using an external icon library, make sure the icon names you pass to <bq-icon name="..."> match the filenames provided by that library.

​
Framework wrappers

@beeq/core works out of the box in any environment, but framework-specific packages add value accessor support, type-safe props, and idiomatic event bindings.
Each wrapper lists @beeq/core as a peer dependency. Always install both packages together.

Angular

BeeQModule, NgModel two-way binding, and standalone component support.

React

Native React components with onBq* event props and full TypeScript types.

Vue

v-model support and @bq* event handlers for all form components.

Plain HTML / CDN

Zero build-step usage with CDN links and native addEventListener.

Build docs developers (and LLMs) love

Get started for freeTalk to us