···1+# Astro Starter Kit: Component Package
2+3+This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM.
4+5+```sh
6+pnpm create astro@latest -- --template component
7+```
8+9+[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages)
10+[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages)
11+[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/component/devcontainer.json)
12+13+## 🚀 Project Structure
14+15+Inside of your Astro project, you'll see the following folders and files:
16+17+```text
18+/
19+├── index.ts
20+├── src
21+│ └── MyComponent.astro
22+├── tsconfig.json
23+├── package.json
24+```
25+26+The `index.ts` file is the "entry point" for your package. Export your components in `index.ts` to make them importable from your package.
27+28+## 🧞 Commands
29+30+All commands are run from the root of the project, from a terminal:
31+32+| Command | Action |
33+| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
34+| `pnpm link` | Registers this package locally. Run `pnpm link my-component-library` in an Astro project to install your components |
35+| `pnpm publish` | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/pnpm-adduser) |
+6
index.ts
···000000
···1+// Do not write code directly here, instead use the `src` folder!
2+// Then, use this file to export everything you want your user to access.
3+4+import MyComponent from './src/MyComponent.astro';
5+6+export default MyComponent;
···1+---
2+// Write your component code in this file!
3+interface Props {
4+ prefix?: string;
5+}
6+---
7+8+<div>{Astro.props.prefix} My special component</div>