Flowbite Svelte Blocks

Flowbite Svelte Blocks is a Svelte library template powered by the sv CLI that scaffolds a reusable component library with a built-in showcase app. This repository specifically targets Flowbite-Svelte-Blocks components, providing the standard SvelteKit library building blocks for developing, packaging, and publishing npm packages.

What is Flowbite Svelte Blocks?

Flowbite Svelte Blocks is a boilerplate for creating Svelte component libraries, generated with the sv scaffolding tool. It splits the project into src/lib for library source code and src/routes for a preview or documentation app. The template uses SvelteKit's packaging feature to produce distributable component files, and the repository metadata identifies the intended output as Flowbite-Svelte-Blocks components.

Key Features

• sv-powered project generation — Start with npx sv create my-app using the official Svelte CLI.
• Separated library and showcase — src/lib holds the reusable components; src/routes runs a preview app.
• One-command packaging — npm run package builds the library from src/lib into a distributable format.
• Production build workflow — npm run build creates a production version of the showcase app; npm run preview serves it locally.
• Deployment adapters — The showcase app can be deployed to any environment by installing a SvelteKit adapter.
• npm publishing support — After setting the package name and license in package.json, npm publish releases the library to npm.

Who is it for?

Flowbite Svelte Blocks is aimed at developers who want to build and distribute Svelte component libraries. It suits:

• Svelte library authors who need a standard structure for component development and packaging.
• Flowbite Svelte contributors building a collection of block components for Svelte projects.
• Design system teams looking for a ready-made setup to publish reusable UI components.

What can you do with it?

• Create a new Svelte component library by running npx sv create and developing components in src/lib.
• Package components for npm with npm run package, then publish using npm publish.
• Build a preview app to showcase components, running it locally with npm run dev -- --open.

How does it work?

The workflow starts with npx sv create from any directory. After installing dependencies with npm install, you run npm run dev to start a development server. The library code lives in src/lib, while src/routes provides a live preview. To distribute the library, run npm run package; to create a production version of the showcase, run npm run build and then npm run preview.

FAQ

How do I create a new project with this template?

Run npx sv create my-app from your terminal to scaffold a new Svelte library in a folder named my-app. The command generates the same structure this template uses: src/lib for components and src/routes for a preview app.

How do I build the library?

Execute npm run package from the project root. This runs SvelteKit's packaging command, which compiles the contents of src/lib into a distributable format suitable for npm.

How do I publish my library to npm?

First, edit package.json to set the desired "name" and add a "license" field pointing to a LICENSE file (e.g., MIT). Then run npm publish from the project root to upload the package.

How do I deploy the showcase app?

The showcase app in src/routes can be built with npm run build. To deploy it, you may need to install a SvelteKit adapter that matches your hosting environment, as noted in the template.