Installation

@central-design-system/components is a modular UI component library for the Central Design System.

Quick start

The fastest way to get going is to create a new project with the initializer:

npm

npm create luma@latest

pnpm

pnpm create luma@latest

yarn

yarn create luma@latest

bun

bun create luma@latest

The interactive wizard asks for a project name and assembles the project from your answers:

• platform — Vue (Vite) or Nuxt;
• Tailwind CSS with the CDS preset (enabled by default);
• theme — CDS (default), B2B, Promo, or a starter for your own;
• Vue Router (for the Vite platform) and Pinia;
• ESLint + Prettier.

You get a ready-to-run project with CDS already wired up: the component package, createCds, the style entry point, and — on the Vite platform — @central-design-system/vite-plugin with component auto-import and SASS variable overrides via settings.scss. After generation the wizard prints the next steps: enter the project folder, install dependencies, and start the dev server.

Every wizard question has a matching flag — handy for CI and scripts — and --yes skips all questions with defaults:

npm

npm create luma@latest my-app -- --yes --platform=vue --tailwind --theme=b2b

pnpm

pnpm create luma@latest my-app --yes --platform=vue --tailwind --theme=b2b

yarn

yarn create luma@latest my-app --yes --platform=vue --tailwind --theme=b2b

bun

bun create luma@latest my-app --yes --platform=vue --tailwind --theme=b2b

Installing into an existing project

Until the stable 4.0.0 release, CDS packages are published under the next npm tag — install with an explicit tag:

npm

npm install @central-design-system/components@next

pnpm

pnpm add @central-design-system/components@next

yarn

yarn add @central-design-system/components@next

bun

bun add @central-design-system/components@next

In the file where you create your Vue application, plug in CDS:

import { createApp } from 'vue';

// CDS
import '@central-design-system/components/styles';
import { createCds, components, directives } from '@central-design-system/components';

// Components
import App from './App.vue';

const cds = createCds({
  components,
  directives
  // ...options
});

createApp(App).use(cds).mount('#app');

This call registers the whole library — handy to get started. In production apps, register only the components you need and import styles selectively — see Tree-shaking.

After that, design system components are available in templates without imports:

<template>
  <CdsButton>Click me</CdsButton>
</template>

Vite plugin (optional)

For Vite projects there is @central-design-system/vite-plugin: component auto-import from templates (registering them in createCds({ components }) becomes optional) and style recompilation with your SASS variables:

npm

npm install -D @central-design-system/vite-plugin@next sass-embedded

pnpm

pnpm add -D @central-design-system/vite-plugin@next sass-embedded

yarn

yarn add -D @central-design-system/vite-plugin@next sass-embedded

bun

bun add -d @central-design-system/vite-plugin@next sass-embedded

// vite.config.ts
import vue from '@vitejs/plugin-vue';
import cds from '@central-design-system/vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [vue(), cds({ styles: { configFile: 'src/styles/settings.scss' } })],
  css: { preprocessorOptions: { scss: { api: 'modern-compiler' } } }
});

The plugin supports Vite only (in Nuxt, use the classic registration via createCds({ components, directives })).

What's next

• Theming — plugging in themes and your own tokens
• Icons — icon packs and how to plug them in, gallery
• Tree-shaking — registering components selectively
• Tailwind CSS v4 — Tailwind integration
• AI for agents — Agent Skills, llms.txt and the MCP server
• Components — catalog with live examples and API