Getting Started

This project aim to help any developer kick-start a new WeVis project with ease. The design system are co-developed 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 stylesheets

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 stylesheets

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 subdirectory. 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>;