0.12.2 • Published 19h ago

sanhaua

Licence

MIT

Version

0.12.2

Deps

Size

2.5 MB

Vulns

Weekly

Stars

Summary Dependency Versions

Sanhauá

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

Check out our live documentation.

Component structure

Sanhaua is organized to support multiple frameworks:

system/components/vue: Vue implementation and stories
system/components/react: React implementation
system/components/wc: Web Components implementation
system/components/styles: Shared component styles used across frameworks

This allows each framework to keep its own implementation while reusing the same CSS source.

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";
        `
      }
    }
  }
})