Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@storyblok/design-system

Package Overview
Dependencies
Maintainers
6
Versions
58
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storyblok/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.

  • 3.25.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
189
decreased by-51.54%
Maintainers
6
Weekly downloads
 
Created
Source

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

Powered by Storyblok

FAQs

Package last updated on 21 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc