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

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

``sh
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:

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

`vue

`

$3

You can also only install a few components, by specifying the option withComponents.
`js
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:


$3


`sh
yarn # or npm install
yarn storybook
`

$3

`sh
yarn build
`

$3

`sh
yarn test:unit
`

$3

`sh
yarn lint
``

---

Powered by Storyblok