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.
Framework wrappers are installed in addition to core when you use them: 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.
In a Sass or Less file, keep the .css extension so the line stays a plain CSS import that your bundler resolves. Without it, Less can’t find the file and Sass falls back to its deprecated @import.
For CDN-based HTML pages without a bundler, link the stylesheet in your document instead — see HTML / Web Components.

​
Apps that use cascade layers

beeq.css is not in a cascade layer, and browsers apply unlayered styles over any @layer, whatever the selector. Tailwind CSS v4 puts its utilities in @layer utilities, so the BEEQ CSS reset and heading styles override classes such as mx-auto or text-l. Import the stylesheet into the base layer instead:
Use base, not a new layer name. A layer first named after @import "tailwindcss" is ordered after utilities, so it would still win. The same applies to any app that puts its own styles in @layer. Tailwind CSS v3 and plain CSS without @layer don’t need this: their styles are unlayered too, so a class still beats the reset’s element selectors.

​
CSS reset

beeq.css and the @beeq/tailwindcss preset include the same reset. It removes browser spacing, sets the theme typography on the page, and keeps native behavior for elements that rely on browser defaults. Most selectors are wrapped in :where(), so they have zero specificity and any rule you write overrides them. *, html, body, and the pseudo-elements stay plain. Elements such as strong, small, and em keep their browser font styles. beeq.css also styles h1–h6; see Typography.

​
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. If you build with a coding agent, install the BEEQ skill so it follows the same setup and component APIs. See AI tools.