@whitespots/ui-kit NPM | npm.io

0.3.56 • Published 5 months ago

Install

Weekly downloads

-

License

-

Repository

Last release

5 months ago

ui-kit

UI-Kit is a design system project for Whitespots projects. It provides a consistent look and feel by defining a set of reusable Vue components and icons.

Usage

Installation

npm i @whitespots/ui-kit

Tailwind configuration

Add the following lines to the content section in your Tailwind configuration file:

content: [
  './node_modules/@whitespots/ui-kit/dist/components/**/*.vue.js}',
  './node_modules/@whitespots/ui-kit/dist/components/**/*.js}',
]

Add the library's Tailwind preset to your configuration file:

presets: [
  require('@whitespots/ui-kit/tailwind-base/index.cjs'),
]

Import components

Here's an example of how to import the WButton component:

import WButton from '@whitespots/ui-kit/dist/components/Button/WButton.vue'

Import icons

The icons in the library are functional Vue components generated from SVG files during build.

Here's an example of how to import an icon named IconCheck:

import IconCheck from '@whitespots/ui-kit/dist/assets/icons/default/IconCheck'

Development

Local testing

Build library:
```
npm i
npm run build
```
Create a .tgz file and copy absolute path to it:
```
npm pack
```
Install library from created .tgz
```
npm i --save <absolute_path_to_file>
```

Updating the bundle

To automatically add imports for new components or icons added to the library, run the command

npm run write-imports

This will update the files in the /imports directory and add new exports to the package.json file.

@everything-registry/sub-chunk-1014

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

9 months ago

10 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

9 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago