@zidsa/ui

User Interface Library For Vue 2 Applications

Built With

• Vue
• Typescript
• Sass
• Rollup
• Storybook

📦 Install

npm install @zidsa/ui

or

yarn add @zidsa/ui

🔨 Usage

Font installation:

@zidsa/ui uses Google’s Cairo font. Add to style file

@import url('https://fonts.googleapis.com/css2?family=Cairo:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');

or your main index.html file.

<link
  href="https://fonts.googleapis.com/css2?family=Cairo:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap"
  rel="stylesheet"
/>

If you want to use another font, follow the instructions above for the font you will use and add the following code to your style file

:root {
  --zid-font-default: 'Your Font Name';
}

Import styles manually:

@import '@zidsa/ui/styles/global.css';

Components:

<template>
  <ZidButton>Base Button</ZidButton>
</template>

<script>
import { ZidButton } from '@zidsa/ui';

export default {
  name: 'Component',
};
</script>