open-index/open-npm huggingface dataset:
npm package: @mrbakieness/firefly-ui
Description: ![Firefly UI][logo]
Latest version: 0.0.7

![Firefly UI][logo]

[logo]: https://bitbucket.org/anima-health/firefly-ui/raw/eefa72481642a7862a43f643d9fba2908c89bc41/fireui%403x.png "Firefly UI"

# Firefly UI

Vue 3 UI component library for Firefly.

## Install
Install the npm package by running the following code.
```
npm i @mrbakieness/firefly-ui
```

## Usage

### CSS
For the components to be displayed correctly import the css in your main css file
```css
@import '@mrbakieness/firefly-ui/css';
```

### JS
To have access to all components you can import them into your main javascript file. You will then have to loop over them and register the components. Yoiur file will look a something like this.
```javascript
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import * as fireUI from '@mrbakieness/firefly-ui'

const app = createApp(App)

// Loop over all firefly ui components
let keys = Object.keys(fireUI)
for (const key of keys) {
    app.component(key, fireUI[key])
}

app.mount("#app");

```
Otherwise you can import the specfic component into a .vue file.
```javascript
<script setup>
import { fireButton } from '@mrbakieness/firefly-ui'
</script>
```

Then you can use the component in your template like the following.
```html
<fireButton color='yellow' colorStyle="outline">button</fireButton>
```