Installation

Install with npm:

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

Setup

Set up the plugin and the global styles:

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):

<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.

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

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