open-index/open-npm huggingface dataset:
npm package: @oneb/ui-vue
Description: ## Usage
Latest version: 0.3.20

# Oneb UI for Vue3

## Usage

```vue
<template>
  <div>
    <OneButton label="Primary" variant="primary" />
    <OneLink to="home" label="Primary" variant="primary" />

    <OneCard>
      <OneCardHeader title="Some title" description="Some Desc" />
      <OneCardBody> Here is content of the card. </OneCardBody>
    </OneCard>
  </div>
</template>

<script setup>
import { OneButton, OneLink, OneCard, OneCardHeader, OneCardBody } from '@oneb/ui-vue'
</script>
```

## Setup

### 1. src/assets/mains.css

add line: `@import '@oneb/ui-vue/style.css';`
add line: `@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');`

### 2. tailwind.config.cjs

1. Import config `const onebui = require('onebui-vue/tailwind.config')`
2. Add `'./node_modules/@oneb/ui-vue/dist/**/*.{vue,js,ts,jsx,tsx}'` to `content`
3. Extend config

```
const onebui = require('onebui-vue/tailwind.config')

module.exports = {
   content: [
        ...,
        "./node_modules/@oneb/ui-vue/dist/**/*.{vue,js,ts,jsx,tsx}"
   ],
   theme: onebui.theme,
   plugins: [require('@tailwindcss/forms')]
}
```