10 steps to create a custom Svelte component library

Although creating complex sites with multiple components in SvelteKit is pretty simple already, creating a library for your most regularly used components adds even more power to your projects.

With a set of common components set up as an NPM package you can easily import them into your projects, and when you change one component in the library it can easily be updated through all projects that use that particular component.

Things like buttons, modals, subscription forms, header elements or SEO tags are prime candidates to be turned into a library for regular re-use.

Setting up a Svelte-based library is not hard but the process has changed as Svelte, and particularly SvelteKit, has developed.

The steps below currently work with SvelteKit 1.x.

Overview

To create a Svelte library we need to:

Create a new SvelteKit library project
Create our components in the “lib” directory
Build the component package in the “dist” directory
Publish to NPM

Steps

1 – Create a new Svelte Library project:

npm create svelte@latest <app name>

Follow the prompts and create a “Library” project.

Then install the dependencies:

cd <app name>
npm install

2 – Create a component in the src/lib directory. Everything in the “lib” directory will make up your final library release.

/lib/src/Button.svelte

<script>
    console.log('Button Component');
    // You would import props here
</script>

<button>My Button</button>

<style>
    button {
        background: #000;
        color: #fff;
        padding: 10px;
        border: none;
        border-radius: 5px;
    }
</style>

3 – You can create a file in the “routes” directory to test your component and run it like a usual SvelteKit project.

/routes/+page.svelte

<script>
    import Button from '../lib/Button.svelte';
</script>

<h1>MHC Components</h1>

A collection of visual and web-design components.
<br/>
<br/>

<Button />

4 – Edit the index.js file in src/lib to import your component and then export it as a named export:

import Button from './Button.svelte';
export { Button };

// If you multiple components, you can re-export them here:
// import Card from './Card.svelte';
// export { Button, Card }

5 – Add package.json ~~and README.md~~ files to the src/lib directory.

Copy the package.json file to the lib directory.

6 – You may need to Install “svelte2tsx” but with a default SvelteKit library project it is likely to be included.

npm install svelte2tsx

7 – Add a jsconfig.json (or tsconfig.json if you’re using Typescript) file to the root of your project. The file should be at the same level as the svelte.config.js file. A jsconfig.json file needs to look like this as a minimum:

{
    "extends": "./.svelte-kit/tsconfig.json"
}

8 – Set up a GitHub project and push your first commit to the new respository.

9 – At this point you should be able to build your library. If you set up a SvelteKit Library project you should be able to run either the “build” script or the “package” script:

npm run build

or

npm run package

The output should look something like this:

10 – Publish to NPM. You’ll need an NPMJS.com account for this.

Log into NPM at the command line:

npm login

Then publish your package:

npm publish --access public

If you want to publish the package as part of an NPM organisation you need to include the NPM organisation name in the package.json file:

{
  "name": "@mediahackza/graphic-components",
  "version": "0.0.1",
...
}

If you get this far you hopefully now have an NPM package set up. You can use the package in any of your projects like a normal package:

Import the package:

npm install @mediahackza/graphic-components

Then import and use the components you need:

<script>
import { Button } from @mediahackza/graphic-components
</script>

<Button />

Final notes

The process for building a Svelte-based package has changed a lot recently. It’s worth keeping an eye on the official packaging section in the Svelte docs so more recent updates.