Skip to main content
These steps apply to every npm-based BEEQ project, regardless of framework. Install @beeq/core and load global styles once — your framework guide handles the rest.
Not sure where to start?

​
Prerequisites

  • Node.js 18+ for npm-based projects
  • A modern browser with custom elements support

​
Install the core package

BEEQ is published as @beeq/core. It includes the web component definitions, global stylesheet, icon SVG source files, and shared TypeScript types. 
npm install @beeq/core
Framework wrappers are installed in addition to core when you use them:
StackAlso install
Angular@beeq/angular
React@beeq/react
Vue@beeq/vue
Next.js@beeq/react (see the Next.js guide)
Your framework guide covers the exact npm install command for your stack.

​
Load global styles

Import the BEEQ stylesheet once in your application’s main CSS or SCSS file, and make sure that file is loaded from your app entry point. 
@import "@beeq/core/dist/beeq/beeq.css";
If you use Sass or another CSS preprocessor, keep the full file extension in the import path (for example beeq.css, not beeq).
For CDN-based HTML pages without a bundler, link the stylesheet in your document instead — see HTML / Web Components.

​
Icons

Many BEEQ components render SVG icons from a separate folder. Your app must serve those files at a public URL and tell BEEQ where to find them.
  • Icon name values map to file names (for example user → user.svg).
  • The full icon set is large; each framework guide covers how to serve only what you need.
How you wire icons depends on your framework and build tool (Vite, Angular CLI, Next.js SSR, and so on). Each framework guide includes a Configure icons step — follow that guide after you finish here.

​
Next steps

Open the guide for your stack under Frameworks in the sidebar: Once BEEQ is running, browse the Components and review Theming if you need brand customization.