Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit

feat(AR-61): 💄 adds redirection to spaces list logic on header logo click

Git stats


Failed to load latest commit information.

Storyblok's Design System

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


You can see the Design System live under


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

For more information on the usage of the Design System go to:


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

Powered by Storyblok