![Platon UI](logo.svg "Platon UI")
<p>
  <a href="https://www.npmjs.com/package/platon-ui"><img src="https://img.shields.io/npm/v/platon-ui.svg?logo=npm" /></a>
  <a href="https://www.npmjs.com/package/platon-ui"><img src="https://img.shields.io/npm/dt/platon-ui.svg" /></a>
  <a href="https://www.npmjs.com/package/platon-ui"><img src="https://img.shields.io/npm/l/platon-ui.svg" /></a>
</p>

## Documentation

Browse [online documentation here](https://docs.google.com/document/d/1mZ-o2UXbxTdAKAKqtHES56rD3mk2Owxc8M2nJ31FI2s/edit?usp=sharing).

## Quick start

You need [Vue.js](https://vuejs.org/) **version 2.6+** and [Sass loader](https://www.npmjs.com/package/sass-loader).

### 1 Install via npm

```bash
npm install platon-ui
```

### 2 Import and use Platon UI

Bundle
```javascript
import Vue from 'vue'
import PlatonUI from 'platon-ui'
import 'platon-ui/scss/platon-ui.scss'

Vue.use(PlatonUI)

```
or Individual Components
```javascript

import Vue from 'vue'
import { Select, Input } from 'platon-ui'
import 'platon-ui/scss/platon-ui.scss'

Vue.use(Select)
Vue.use(Input)

```

### 3 Include Material Design Icons

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css">
```

If you want to customize the icons or the theme, refer to the [customization section on the documentation](https://docs.google.com/document/d/1mZ-o2UXbxTdAKAKqtHES56rD3mk2Owxc8M2nJ31FI2s/edit#bookmark=id.p1rbecivu7p3).