Getting Started

This project aim to help any developer kick start a new WeVis project with ease. The design systems are co-develop with the designers, making consistancy between the library and Figma design.

View source code on GitHub

1. Install the package

with NPM

npm i @wevisdemo/ui

or with Yarn

yarn add @wevisdemo/ui

2. Import the stylesheet

2.1 Single global stylesheet

You can import all component style by importing @wevisdemo/ui/styles/index.css as a global according to your framework.

For example, with Nuxt.js:

// nuxt.config.js
{
  css: ['@wevisdemo/ui/styles/index.css'],
}

Most framework can be imported to main JavaScript or template file directly:

import '@wevisdemo/ui/styles/index.css';

2.2 Typography + per component stylesheet

To minimized build output, you can also import typography and individual component style:

• Import @wevisdemo/ui/styles/typography.css instead of index.css as shown in step 2.1.
• Import per component @wevisdemo/ui/styles/<component-name>.css as shown in step 3.

3. Use the components

Components are available for Vue 3, React, and Svelte which separated in package sub-directoy. Recommends to import with Wv name prefix to avoid duplicated component name. For example:

import '@wevisdemo/ui/styles/button.css';
import WvButton from '@wevisdemo/ui/{react,vue,svelte}/button';

<WvButton>Hello</WvButton>;