Storyblok's Design System

This Design System is an open-source collection of components that are used in app.storyblok.com and is continiously developed to improve Storyblok.

Demo

You can see the Design System live under https://next.blok.ink

Compatibility

The @storyblok/design-system package is compatible with Vue 3 only. For Vue 2, please use the storyblok-design-system package.

Getting started

To install the Design System in your project you need to install the package first

npm install @storyblok/design-system --save
yarn add @storyblok/design-system

Then you need to install and use the Design System in your Vue project:

import BlokInk from '@storyblok/design-system'
import '@storyblok/design-system/dist/storyblok-design-system.css'
 
app.use(BlokInk) // vue 3

Then you can use all Blok.Ink components everywhere in your app.

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

Only install specific components

You can also only install a few components, by specifying the option withComponents.

import BlokInk from '@storyblok/design-system'
import '@storyblok/design-system/dist/storyblok-design-system.css'
 
app.use(BlokInk, {
  withComponents: [
    'SbButton',
    'SbIcon',
  ]
})

For more information on the usage of the Design System go to: https://www.storyblok.com/docs/guide/in-depth/design-system

Development

To develop within the Design System you can use Storybook that has all components setup:

Start & Execute Storybook

yarn # or npm install
yarn storybook

Compiles and minifies for production

yarn build

Run your unit tests

yarn test:unit

Lints and fixes files

yarn lint