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


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Svelte 3 Component Template

A highly-opinionated base for building shareable Svelte 3 components

Known Vulnerabilities Renovate enabled PRs Welcome

Table of Contents

  1. Features
  2. Getting started
  3. Developing
  4. Preprocessors
  5. Testing
  6. Publishing to npm
  7. Frequently Asked Questions


Getting Started

  1. Clone the template:

Option #1: Clone it with Github's "Use this template" option:


Option #2: Clone this repository with degit:

npx degit YogliB/svelte-component-template `my-new-component`
  1. Enter the folder:
cd my-new-component
  1. Initiate Git:
git init
  1. Install dependencies:
npm install
  1. Configure package.json:
npm init
  1. Start coding:
code .
  • Your component's source code lives in src/lib/[MyComponent]/[MyComponent].svelte.


  1. Start SvelteKit:
npm run dev
  1. Edit a component file in src/lib, save it and watch the magic happens.

  2. Export your components in src/lib/index.js.

  3. Import your components in src/routes/index.svelte from `$lib$, so you can preview and test it.

  4. Navigate to localhost:3000 to see your components live.


All preprocessing is handled with svelte-preprocess. Configure it in svelte.config.js.


Interaction testing

This is a simple and intuitive method that can be done through Storybook, with the help of Cypress. And example and pre-made test scripts can be found in this repository, and more info can be found in Storybook's docs.

Snapshot testing

In this repo you'll find a basic workflow that uses Chromatic for snapshot testing.

Frequently Asked Questions

What's the index.js file for?

It's for Svelte to be able to import multiple components from a single source.

For instance, it lets the user do:

import { MyComponent, MyOtherComponent } from 'my-component-library';

Instead of:

import MyComponent from 'my-component-library/components/MyComponent.svelte';
import MyOtherComponent from 'my-component-library/components/MyOtherComponent';

How do I include 3'rd party css in my components?

There are a few options to do this:

  1. Don't include 3'rd party css and just tell your users to do that (Probably using PostCSS).
  2. Include it via a cdn, like so:
@import url('');

Publishing to npm

  1. Prepare the package for publishing:
npm run package
  1. Publish the package:
cd package
npm run publish