Skip to content

storyblok/storyblok-design-system

develop
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?
Code

Latest commit

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

Git stats

Files

Permalink
Failed to load latest commit information.

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

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

Powered by Storyblok