@designa8/vibedesign-wise

Generated design system, version 0.5.1.

Local install (npm link)

From this directory:

npm link

Then, in the consumer app:

npm link @designa8/vibedesign-wise

Imports

import { /* atoms */ } from "@designa8/vibedesign-wise";

The CSS (design tokens, Tailwind utilities, and the design system font loaded from Google Fonts) is bundled into the package entry point and injected automatically by your bundler — no separate CSS import needed.

Vite configuration (local npm link only)

When using npm link, the package fonts live outside your project root and Vite's dev server will block them by default. Add server.fs.allow to your vite.config.js / vite.config.ts:

export default defineConfig({
  server: {
    fs: {
      allow: ['..', '/path/to/.published-packages'],
    },
  },
})

Replace /path/to/.published-packages with the absolute path printed by npm link (the directory that contains this package folder). This step is not needed when the package is installed from a real registry.

Global CSS compatibility

The package's utility classes (spacing, colours, border-radius, etc.) are compiled as unlayered CSS rules. They therefore beat standard resets such as * { margin: 0; padding: 0; box-sizing: border-box } by normal specificity (class selector 0-1-0 > universal selector 0-0-0). No special setup is needed for a typical Vite / Create-React-App / Next.js project.

The one exception is the body font. The design system injects body { font-family: var(--font-body) } inside @layer base, which any unlayered body { font-family: ... } rule in your own CSS will override. Remove that override, or replace it with the design system variable:

body {
  font-family: var(--font-body); /* use the design system's configured font */
}