Sanhaua NPM | npm.io

Sanhauá

Design System named after the famous river in City of Parahyba.

Check out our live documentation.

Usage

This section describes how to import Sanhauá as an external package and use it within your project

Install Sanhauá

npm i sanhaua

If you need to use any component, import them as usual like:

<!-- src/App.vue -->

<script>
  import { uaButton } from 'sanhaua'
</script>

<template>
  <ua-button type="button" width-behavior="full">Botaozin</ua-button>
</template>

Import Sanhauá's styling to your project it in you main.js file:

// src/main.js

import 'sanhaua/dist/style.css'

If you have a bundler like Vite, you can also use our design system tokens on your application. Just install Sass. You should be able to import all tokens and properties into your own project this way:

// vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const SELECTED_THEME = 'main'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler', // We use sass-embedded, but if you use normal sass, just replace this with 'modern'
        additionalData: `
          @use 'sass:map';
          @import "sanhaua/system/themes/${SELECTED_THEME}/design-tokens/design-tokens.scss";
          @import "sanhaua/system/themes/${SELECTED_THEME}/global/global.scss";
          @import "sanhaua/system/themes/${SELECTED_THEME}/responsiveness/responsiveness.scss";
        `
      }
    }
  }
})