open-index/open-npm huggingface dataset:
npm package: @mok-labs/components
Description: ```bash yarn add @mok-labs/components ```
Latest version: 0.10.0

# @mok-labs/components

## Installation

```bash
yarn add @mok-labs/components
```

## Usage

### Install the Vue Plugin

```javascript
// application.ts
import { createApp } from 'vue'
import MokLabsComponents from '@mok-labs/components'
import App from './App.vue'

const app = createApp(App)

// Install the plugin with optional configuration
app.use(MokLabsComponents, {
  googlePlacesApiKey: 'your-api-key' // Optional
})

app.mount('#app')
```

### Import Individual Components

```javascript
// In your Vue component
import { MokButton, MokInput, MokModal } from '@mok-labs/components'
```

### Tailwind Configuration

The library includes the colors from the design system and they need to be added:

```javascript
// tailwind.config.ts
import { colors as mokColors } from '@mok-labs/components/tailwind'
//...
module.exports = {
  theme: {
    extend: {
      colors: {
        ...mokColors,
        // It needs to be added before your project's own colors
        // so they can be overwritten if needed.
        primary: 
      },
//
```

Due to the way Tailwind works, you also have to add the following to `tailwind.config.ts` to make sure the component classes are included in the generated CSS.

```javascript
// tailwind.config.ts
  content: [
    //...
    './node_modules/@mok-labs/components/**/*.vue',
  ],
```

## License
[MIT](LICENSE.md)

## Changelog
[CHANGELOG.md](CHANGELOG.md)