Astro Starter Kit: Component Package

This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM.

npm create astro@latest -- --template component

šŸš€ Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
ā”œā”€ā”€ index.ts
ā”œā”€ā”€ src
ā”‚   ā””ā”€ā”€ MyComponent.astro
ā”œā”€ā”€ tsconfig.json
ā”œā”€ā”€ package.json

The index.ts file is the "entry point" for your package. Export your components in index.ts to make them importable from your package.

šŸ§ž Commands

All commands are run from the root of the project, from a terminal:

Command Action
npm link Registers this package locally. Run npm link my-component-library in an Astro project to install your components
npm publish Publishes this package to NPM. Requires you to be logged in

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes