Installation

Install the Package

npm install @yellowcard/b2b-design-system

Peer Dependencies

The design system requires the following peer dependencies:

Package	Version
vue	^3.5.0
pinia	^2.0.0 || ^3.0.0
vue-router	^4.6.0
@vuepic/vue-datepicker	^12.0.0

Install any you don't already have:

npm install vue pinia vue-router @vuepic/vue-datepicker

Import Styles

The design system's compiled CSS must be imported in your application entry point:

// main.ts or App.vue
import '@yellowcard/b2b-design-system/style.css';

Vite Configuration

No special Vite configuration is required. The package ships as ES modules with preserved module structure, so tree-shaking works out of the box.

If you want to use the SCSS tokens directly, ensure you have sass-embedded installed:

npm install -D sass-embedded

TypeScript

The package includes full TypeScript declarations. No additional @types/* packages are needed.

Import types directly:

import type { ButtonProps } from '@yellowcard/b2b-design-system';
// or
import type { ButtonProps } from '@yellowcard/b2b-design-system/Button';

DatePicker Setup

The DatePicker component requires its peer dependency styles. Import them alongside the main styles:

import '@yellowcard/b2b-design-system/style.css';

The DatePicker styles are included in the main style.css bundle.