Installation

BCCAbout 1 min

Installation

Install the BCC Design System in your project. Choose the method that fits your stack.

Requirements

Package	Version
PrimeVue	4.0+
Tailwind CSS	4.0+

Fonts

Include the Archivo font from the CDN.

HTML

<link rel="stylesheet" href="https://design.bcc.no/fonts/stylesheet.css">

CSS

@import url("https://design.bcc.no/fonts/stylesheet.css");

PrimeVue (Recommended)

This is the recommended way to use BCC Design System. PrimeVue provides fully styled components with our design tokens built-in.

npm install @bcc-code/design-tokens primevue @primeuix/themes

Configure PrimeVue in your main.ts:

import { createApp } from "vue";
import PrimeVue from "primevue/config";
import BCCPreset from "@bcc-code/design-tokens/primevue";
import App from "./App.vue";

const app = createApp(App);

app.use(PrimeVue, {
  theme: {
    preset: BCCPreset,
    options: {
      darkModeSelector: ".dark",
      cssLayer: {
        name: "primevue",
        order: "theme, base, primevue",
      },
    },
  },
});

app.mount("#app");

With Tailwind

Install Tailwind CSS:

npm install tailwindcss @tailwindcss/vite

Add tailwind to the layer order:

cssLayer: {
  name: "primevue",
  order: "theme, base, primevue, tailwind",
},

Then import Tailwind and the design tokens in your main CSS file:

@import "tailwindcss";
@import "@bcc-code/design-tokens/tailwind";

The @bcc-code/design-tokens package is already installed from the PrimeVue setup above.

Layers listed later in the order override earlier ones. With this setup, Tailwind utilities can override PrimeVue styles when needed — no !important required.

See the PrimeVue CSS Layer documentation for more details.

Other Options

For projects not using Vue or PrimeVue.

Tailwind Only

npm install @bcc-code/design-tokens tailwindcss @tailwindcss/vite

@import "tailwindcss";
@import "@bcc-code/design-tokens/tailwind";

See the Tailwind CSS Vite installation guide for full setup instructions.

CSS Variables Only

For non-Tailwind projects, you can use CSS variables directly:

@import "@bcc-code/design-tokens/css";

You can also import light or dark theme separately:

@import "@bcc-code/design-tokens/css/light";
@import "@bcc-code/design-tokens/css/dark";

.my-element {
  color: var(--color-text-default);
  background: var(--color-elevation-surface-default);
  padding: var(--spacing-200);
  border-radius: var(--radius-md);
}

Component Library (Optional)

For custom BCC components (BccBadge, BccStepIndicator, BccDialKnob, etc.), install the component library:

npm install @bcc-code/component-library-vue

Import and use components individually:

<script setup>
import { BccBadge, BccStepIndicator } from "@bcc-code/component-library-vue";
</script>

<template>
  <BccBadge value="3" context="info" />
</template>

PrimeVue components (Button, Select, etc.) are styled automatically via design tokens — they don't require this package.

See the full component list and interactive previews in Storybook.

Dark Mode

Toggle dark mode by adding the dark class to the root element:

document.documentElement.classList.toggle("dark");

<html class="dark">
  <!-- Content adapts to dark theme -->
</html>