Create a Svelte Component Library Using Storybook and Deploy It with Vercel

Storybook is an open source tool for developing JavaScript UI components in isolation. Svelte is a component framework that allows you to write highly-efficient, imperative code, that surgically updates the DOM to maintain performance.

In this guide, you will discover how to set up a Svelte Storybook component library with Storybook CLI and how to deploy it with Vercel.

Step 1: Set Up Your Storybook Project

Get started by creating and moving into a /svelte-stories directory, then initializing the project:

mkdir svelte-stories && cd svelte-stories && npm init -y

Creating and entering into the /svelte-stories directory, then initializing a project.

Next, use the Storybook CLI to bootstrap the project, providing an initial setup to work from:

npx -p @storybook/cli sb init --type svelte

Bootstrapping a Svelte Storybook project with Storybook CLI.

Now, add @storybook/svelte, @babel/core, and babel-loader as development dependencies:

npm i -D @storybook/svelte @babel/core babel-loader

Adding @storybook/svelte, @babel/core, and babel-loader to the project as a development dependencies.

With the development dependencies added, extend your package.json file by adding the scripts below:

{
  "scripts": {
    ...
    "storybook": "start-storybook",
    "build": "build-storybook -c .storybook -o public"
  }
}

Adding storybook and build scripts to the package.json file.

By adding these scripts you are able to start a development server from inside your project directory with npm storybook. You are also able to deploy the Storybook component library with Vercel with no additional configuration.

Step 2: Deploying with Vercel

To deploy your Storybook component library with Vercel for Git, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git provider of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

Once deployed, you will get a URL to see your component library live, such as the following: https://storybook.now-examples.vercel.app