Create a Svelte Component Library

How to create a npm package with SvelteKit to share your components between projects.

Jan 12, 2023

Ross Robino

# svelte-package 2.0

# Create a new SvelteKit project

# Setup

# Project information

# lib directory

# Create a component

# Export

# Test locally

# Package

# Test in a separate project

# Conclusion

svelte-package 2.0

This post was updated on Mar 22, 2023 to account for the changes in svelte-package 2.0. This update simplified the process for setting up a component library. See instructions on migrating an existing project here. You can also now find more information on svelte-package in the documentation.

Create a new SvelteKit project

If you frequently have components that you share between projects and want to keep a single repository of them, you can create a package on npm like this one. Here’s how to create a Svelte component library with SvelteKit.

Setup

Navigate to a directory in your terminal where you will create your project
Run npm create svelte@latest, configure your project with the CLI, select the Library skeleton project template
Update README.md with information about your project

Project information

Since this is a library project, it’s important to add in your relevant information to the package.json file so it will appear in npm when the package is published.

You can read more on this in the svelte-package documentation.

{
	"name": "@rossrobino/components",
	"version": "0.0.1",
	"description": "A reusable Svelte component library",
	"keywords": [
		"components",
		"documentation",
		"Svelte",
		"SvelteKit"
	],
	"homepage": "https://components.robino.dev",
	"license": "MIT",
	"author": {
		"name": "Ross Robino",
		"url": "https://robino.dev"
	},
	"repository": "github:rossrobino/components",
	...

lib directory

The contents of the src/lib directory are what will be packaged upon running npm run package. This is where components can reside for the project as well as an index.js file that exports the components for the package.

Create a component

Create a component to export in your package, here’s my YouTube.svelte component as an example.

<!-- src/lib/svelte/YouTube.svelte -->

<script>
	let className = "";
	let idName = "";
	export { className as class, idName as id };
	export let uid;
	export let title = "";
</script>

<iframe
	class={className}
	id={idName}
	src="https://www.youtube.com/embed/{uid}"
	{title}
	frameborder="0"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
	allowfullscreen
/>

Export

Import and export the component from src/lib/index.js.

// src/lib/index.js

import YouTube from "./svelte/YouTube.svelte";

export { YouTube };

Test locally

Do a quick test of your component on src/routes/+page.svelte by importing it to the page and running npm run dev -- --open.

<!-- src/routes/+page.svelte -->

<script>
	import YouTube from "$lib/svelte/YouTube.svelte";
</script>

<YouTube uid="gouiY85kD2o" title="Renegade - Kevin Olusola" />

Ensure that the component is working as expected, then you are ready to create a package.

Package

Now we can package the library and publish it on npm for anyone to use. Repeat these steps each time you want to update your package.

Set the version in package.json, this will have to be bumped up each time you publish the package (major.minor.patch)—you can leave this at 0.0.1 to start
Run npm install to sync your package-lock.json with the current version information
Run npm run package to execute the package script in package.json
You can verify the output of your build in the dist directory
Commit changes to your repository
Run npm publish --access public to publically publish your package on npm (if you don’t have an account you will need to create one and log in)

Test in a separate project

After verifying on the npm website that your package has been published, you can now use your package in a separate project.

Set up a new SvelteKit project or use a different existing one
Run npm install -D yourPackageName to install it as a dev dependency
Import in src/routes/+page.svelte like before, but edit the import path to point to your package instead
Lastly, run npm run dev -- --open to see your imported component in action

<!-- src/routes/+page.svelte -->

<script>
	import { YouTube } from "@rossrobino/components";
</script>

<YouTube uid="gouiY85kD2o" title="Renegade - Kevin Olusola" />

Conclusion

You have now built a Svelte component library you can access from any of your other SvelteKit projects to share code between them.

You can check out my library as an example or fork it to create your own version. It has a documentation website included in the same project to make updates easier.

Thanks for reading!

Find an error in this post? Any updates are appreciated. Edit this post