Opens an external site in a new window
Mental Health Awareness Month
“Community”
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

Create a SvelteKit Component Library # Create a SvelteKit Component Library #

blurry low resolution placeholder image Create a SvelteKit Component Library
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. SvelteKit SvelteKit Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Create a SvelteKit Component Library #

Updated 5 months ago
4 minute read
Gunning Fog Index: 7.1
3 comments
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

🌟 Creating your own Custom Component Library for SvelteKit #

You can create a SvelteKit component library to level up your workflow. There are possibly a few components you use over and over in new SvelteKit apps you create. You might be copy-pasting the component into each new project. If you want a maintainability boost, how about you create a SvelteKit component library? With that done, all you have to do is import components into your new app like you do any external dependency. The bonus is you make changes once, in your component library, and they are propagated through to all your apps via the famous npm update command.

If that sounds like a productivity boost you’d sign up for, get your typing fingers out, then hit play on the video.

📹 Create a SvelteKit Component Library: Video #

Please enable JavaScript to watch the video 📼

Create a SvelteKit Component Library

🗳 Poll #

What’s the component you find yourself creating in every new app?
Voting reveals latest results.

🖥 The 10 Steps #

Follow the video above for full, more detailed instructions.

Create a SvelteKit Component Library in 10 Steps #

  1. Decide which components from an existing app you want to add to your component library.
  2. Create a skeleton SvelteKit project.
        
    pnpm dlx sv create my-sveltekit-component-library && cd $_
    pnpm install
  3. src/lib folder.
  • Create a lib/index.js. Import your components, then export them as named exports.
        
    import Map from '$lib/components/Map.svelte';
    export { Map };
  • Edit package.json, adding this line:
        
    "svelte": "index.js"
  • Install @sveltejs/package:
        
    pnpm add -D @sveltejs/package
  • Generate the package using svelte-kit package:
        
    pnpm svelte-package
  • Test locally, by creating a new skeleton project which uses the created package. Link using the relative path of the created package in the test site's `package.json`:
        
    "@rodneylab/sveltekit-components": "link:../../components/package",
  • Push your package to npm:
        
    pnpm whoami
    pnpm login
    pnpm publish --access public .
  • Install the npm package on your test site to check it works:
        
    pnpm install -D @you/yourpackage
  • 🔗 Links #

    • @rodneylab/sveltekit-components ,
    • SvelteKit Packaging Docs ,
    • Mapbox 
    • OpenStreetMap 
    • LeafletJS 

    🏁 Create a SvelteKit Component Library: Summary #

    How can you share code between SvelteKit projects? #

    A SvelteKit component library provides a convenient way to share code between different SvelteKit projects. The easiest way to do this is probably to create a new SvelteKit project, placing the components you want to share in the `src/lib`. You can set up any unit tests you want on the components, using uvu for example. Once you are happy, you can run `svelte-kit package` to create your component library. Now you can upload it to npm as a public or private package. Your other projects can now access the shared components via your new library. It doesn’t end there, though. As you discover a need for new components, add them to the package and push the updated package to npm.

    🙏🏽 Feedback #

    If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

    blurry low resolution placeholder image ask Rodney X (formerly Twitter) avatar

    Rodney

    @askRodney

    Just updated the video on creating a SvelteKit 🧩component library for latest APIs.

    We follow a reusable map component example, publishing to NPM for use in other projects.

    Hope you find it useful!

    https://t.co/t4KI5ztfU8

    — Rodney (@askRodney) May 5, 2023

    Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.

    Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

    blurry low resolution placeholder image Rodney from Rodney Lab
    TAGS:
    SVELTEKIT

    Reposts:

    Reposts

    • Seppe Gadeyne profile avatar
    • Svelte Society 🧡 profile avatar
    • LKz (Temporary Offline) 🐳 profile avatar
    • TSR Codes profile avatar

    Likes:

    Likes

    • Jonathan Hart profile avatar
    • Björn Theart profile avatar
    • Florian Spier profile avatar
    • Shirish Nigam | शिरीष निगम profile avatar
    • Raoul Kramer profile avatar
    • Horace Keung profile avatar
    • Pablo Sosa Sisini profile avatar
    • David Fernández González profile avatar
    • Bruce Onder 💉 💉 profile avatar
    • michapixel 💉💉 profile avatar
    • Ron Au 🦆 profile avatar
    • Mats Dahlin profile avatar
    • Paulo A. Regis, Ph.D. profile avatar
    • Vítor Arjol profile avatar
    • Przemyslaw Figura profile avatar
    • Nguyễn Tuấn Anh profile avatar
    • Krzysztof Kamiński profile avatar
    • Steven Yeo profile avatar
    Reposts & likes provided by Mastodon & X via Webmentions.

    Related Posts

    blurry low resolution placeholder image SvelteKit Shiki Syntax Highlighting: Markdown Code Blocks

    SvelteKit Shiki Syntax Highlighting: Markdown Code Blocks

    sveltekit
    <PREVIOUS POST
    NEXT POST >
    LATEST POST >>

    Leave a comment …

    Your information will be handled in line with our Privacy Policy .

    Comments

    • Ro

      It was helpful Rodney. I'm not used to stuff landing in package directory. I prefer yarn or npm `pack` and to create a local test app against the tarball (very much similar to the way you're using link). I'm still working through it but this was helpful tut thanks!

      4 years ago
      • Rodney

        Hi Ro, thanks for your feedback, let me know how it goes, especially if there's any changes that might make to follow along for someone more used to `pack`.
        4 years ago
      • oneezy

        Good stuff! I'm currently trying to figure out the best way to `svelte-kit package` tailwind components. A bit harder then I anticipated
        3 years ago

    Ask for more

    1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
    3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
    1 Sept 2022 — Get Started with SvelteKit Headless WordPress

    Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

    • Home
    • Profile
    • Plus +
    • Newsletter
    • Contact
    • Links
    • Terms of Use
    • Privacy Policy
    We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.