<div align="center">
  <h1 align="center"> Blok.ink Design System</h1>
  <p align="center">
    Storyblok's component library, for Vue.js.
  </p>
</div>

# Installation

Install with `npm`:

```sh
npm install @storyblok/design-system # or wherever the package manager you are using
```

## Setup

Set up the plugin and the global styles:

```js
import BlokInk from '@storyblok/design-system'
import '@storyblok/design-system/dist/index.css'

const app = createApp(App)
app.use(BlokInk)
```

If you install the plugin, all the components will be registered globally.

Alternatively, you can only import specific components in your `.vue` files (but it still requires the global `index.css` file to be imported):

```html
<template>
  <SbIcon name="search" />
</template>

<script setup lang="ts">
import { SbIcon } from '@storyblok/design-system'
</script>
```

### Register specific components globally

It's also possible to install a select few components, by specifying the option `withComponents` when installing the plugin.

```js
import BlokInk from '@storyblok/design-system'
import '@storyblok/design-system/dist/storyblok-design-system.css'

app.use(BlokInk, {
  withComponents: ['SbButton', 'SbIcon'],
})
```

---

<div align="center">
  <h5>Powered by <a href="https://www.storyblok.com/" title="link to the Storyblok website">Storyblok</a></h5>
</div>
