@bcc-code/component-library-vue

Vue 3 component library built on PrimeVue and BCC design tokens. You only need this package—no separate Tailwind or PrimeVue install.

Storybook Link

Install

pnpm add @bcc-code/component-library-vue
# or
npm install @bcc-code/component-library-vue
# or
yarn add @bcc-code/component-library-vue

Min requirements: Vue 3.

Note to PNPM installs: The library uses @bcc-code/icons-vue and @bcc-code/design-tokens. To use them in your own app (e.g. import { CheckIcon } from '@bcc-code/icons-vue') without needing to explicitly add install them in your own package.json, add this to your project’s .npmrc so pnpm hoists them:

public-hoist-pattern[]=@bcc-code/icons-vue
public-hoist-pattern[]=@bcc-code/design-tokens

Then run pnpm install again. With npm or Yarn this is not needed.

Quick start

1. Register the library in your app (e.g. main.ts):

import { createApp } from 'vue';
import App from './App.vue';
import { BccComponentLibrary } from '@bcc-code/component-library-vue';

const app = createApp(App);
app.use(BccComponentLibrary);
app.mount('#app');

2. Add styles using one of the two options below.

Styles Option 1 — Recommended: full Tailwind in your app

Use this if you want Tailwind utility classes in your own templates while still letting the library's components render correctly.

1. Add the Tailwind Vite plugin (the package brings Tailwind in as a dependency; you only wire it up):

// vite.config.ts
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
	plugins: [vue(), tailwindcss()],
	// ...
});

2. Import the theme in your main CSS file (e.g. src/main.css or src/assets/main.css):

@import '@bcc-code/component-library-vue/theme.css';
/* Optional, if not already included */
@import '@bcc-code/component-library-vue/archivo-font.css';

That single import is enough. theme.css includes:

• BCC design tokens, @theme / @utility definitions, and the rest of the design-system CSS inlined from src/style.css (including component-specific rules such as BccInput icon sizing and BccButton context tokens).
• library-utilities.css, the pre-compiled Tailwind utility class rules used inside library templates (which your build cannot infer from the published JS).

Do not rely on library-utilities.css alone with a minimal “base” import: you still need the full theme.css (or style.css for Option 2) so non-utility component styles and tokens are present.

Styles Option 2 — Pre-built CSS only

Use this if you don’t want Tailwind in your project and only need the library’s styles and components.

In your entry file (e.g. main.ts), before mounting the app:

import '@bcc-code/component-library-vue/style.css';

You get the BCC theme and component styles only; no Tailwind utilities in your app.

Components

All components are namespaced with Bcc. Use them in templates or register them globally in your main.ts.

Example:

<template>
	<div class="flex gap-4 p-4">
		<BccButton label="Save" />
		<BccInput v-model="name" placeholder="Name" />
	</div>
</template>

<script setup lang="ts">
import { BccButton, BccInput } from '@bcc-code/component-library-vue';
import { ref } from 'vue';

const name = ref('');
</script>

Example:

// main.ts
...
import { BccButton, BccInput } from '@bcc-code/component-library-vue';

// After app.use(BccComponentLibrary)
app.component('BccButton', BccButton);
app.component('BccInput', BccInput);

The library exports both custom BCC components (e.g. BccBadge, BccFrame, BccReact) and wrapped PrimeVue components (e.g. BccButton, BccDialog, BccDataTable). PrimeVue services (Toast, Confirm, Dialog) are configured by BccComponentLibrary; use the composables useToast, useConfirm, and useDialog from the library when you need them.

Development

pnpm install
pnpm run start        # Storybook on port 6006
pnpm run build        # Typecheck, types, and Vite build
pnpm run docs:ai      # Build Storybook, then generate AI-ready docs outputs
pnpm run build:llms   # Regenerate AI docs from an existing storybook-static/index.json
pnpm run build:vite   # Vite build only (includes theme.css)

AI-ready docs outputs

pnpm run docs:ai generates the public AI documentation artifacts into storybook-static/:

• /llms.txt: Markdown index of public docs pages.
• /llms-full.txt: concatenated Markdown for all public docs pages.
• /docs/<page>.md: per-page Markdown mirroring the Storybook docs route, e.g. /docs/foundations-colors--docs -> /docs/foundations-colors--docs.md.

build-storybook runs the same generation after Storybook builds, so deployed docs get these files at runtime. The generated files live in storybook-static/, which is ignored and not committed; CI does not need a drift check unless these build artifacts are committed later.

The generator uses Storybook's storybook-static/index.json as the route source of truth, converts MDX to readable Markdown, and summarizes autodocs story pages from story metadata. It only reads public docs entries from docs and src through the Storybook manifest, and excludes private/internal/secrets paths, env files, dependency folders, build outputs, and caches.

Override the published URL base with LLMS_BASE_URL=https://your-docs-host pnpm run build:llms if needed. Only static Markdown and JSON documentation artifacts are produced.

Folder structure (where to work)

• src/components/custom: New BCC-first components and component-specific styles/logic.
• src/components/wrapped: PrimeVue wrapped components (Bcc*) where we adapt APIs, defaults, slots, and behavior.
• src/styles: Design-system CSS layers (theme, contexts, semantic tokens, utility classes).
• src/index.ts: Public exports; add new components/composables here so consumers can import them.
• docs and *.mdx: Storybook docs pages and design guidance content.
• *.stories.ts/*.mdx (in src or docs): Demos, docs, and regression coverage for components.

Patching PrimeVue icons

Some PrimeVue icons are replaced with @bcc-code/icons-vue so the library uses BCC iconography. The patch is maintained with pnpm’s built-in patching.

1. Start or re-enter the patch

pnpm patch @primevue/icons

pnpm will print a path to a writable copy of the package (e.g. node_modules/.pnpm_patches/@primevue/[email protected]).

2. Edit the icon mappings

• Main barrel: Edit index.mjs in that folder. Each line that re-exports from @bcc-code/icons-vue defines one override, e.g.:

  export { ExpandMoreIcon as ChevronDownIcon } from '@bcc-code/icons-vue';

• Per-icon files: After changing the main index.mjs, run the sync script so each icon’s own index.mjs (e.g. chevrondown/index.mjs) is updated to use the same BCC component:

  pnpm run sync:primevue-icon-patches

  That way both @primevue/icons and @primevue/icons/chevrondown (and other overridden icons) use the BCC icon.

3. Save the patch

From the project root (where package.json lives), run:

pnpm patch-commit <path-pnpm-printed-in-step-1>

Example, if pnpm printed ~/Projects/bcc-design/component-library/node_modules/.pnpm_patches/@primevue/[email protected]:

pnpm patch-commit node_modules/.pnpm_patches/@primevue/[email protected]

The patch is written to patches/@primevue__icons.patch and applied automatically on pnpm install.

License

Apache-2.0