Unnnic

This project is the design system of Weni

Requirements

Before install the lib, make sure you have installed the following tools on your machine:

• Node.js 20
• NPM

Recommended usage (import on demand)

To avoid loading the entire design system when your module only uses a few components, prefer named imports and local registration. Import the theme CSS once in main (not dist/style.css):

// main.js
import '@weni/unnnic-system/theme.css';

<script setup>
import { UnnnicButton, UnnnicInput } from '@weni/unnnic-system';
</script>

<template>
  <UnnnicButton text="Save" />
  <UnnnicInput v-model="value" />
</template>

Named imports pull only the JS and CSS of the components you use. theme.css (~15 KB) defines Inter, :root semantic tokens (--unnnic-color-*), and .unnnic--clickable. Without it, component CSS loads but tokens such as --unnnic-color-bg-info stay undefined.

Do not import dist/style.css in this mode — that file is the full ~11 MB bundle. Keep it only with app.use(Unnnic).

Use app.use(Unnnic, { ... }) only if your module actually uses most of the library — this mode registers all components globally, regardless of actual usage.

Set up at projects with Vue 3

1. Install unnnic in your project

npm i @weni/unnnic-system

2. Configuration in main.js

import Unnnic from "@weni/unnnic-system";
import "@weni/unnnic-system/dist/style.css";

const app = createApp(App);

app.use(Unnnic, {
  /**
   * Optional: route every teleport-aware layer (dialogs, drawers,
   * popovers, tooltips, toasts, etc) to a specific DOM container instead
   * of falling back to document.body. Accepts a CSS selector or an
   * HTMLElement reference.
   */
  teleportTarget: '#app',
});

3. Configuration in vite.config.js

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `
        @import '@weni/unnnic-system/src/assets/scss/unnnic.scss';
      `,
    },
  },
},

Open-Source Governance

The Weni Platform open source projects are governed by @weni-ai. Weni opens all its software parts under terms of an open-source license to reach potential users and partners mainly. Secondly, Weni wants to reach developers by building a community for some pieces that are more reusable in other businesses or software projects, such as NLP models or tools. Besides that, the openness of our software is also related to building trust by enabling our external stakeholders to audit the security of our software.

Community

• Join our community chat to discuss with our internal team
• Join #dev for help from the community to development issues

Contributing

We are looking for collaboration from the Open Source community! There's so much we want to do, including but not limited to: enhancing existing applications with new features, optimizing the NLP tasks and algorithms involved that boost accuracy, new communication channels and integrations.

• Please read our contribution guidelines for details on what and how you can contribute.

• Report a bug by using this guideline for details on what and how you can contribute.