···11+# Astro Starter Kit: Component Package
22+33+This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM.
44+55+```sh
66+pnpm create astro@latest -- --template component
77+```
88+99+[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages)
1010+[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages)
1111+[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/component/devcontainer.json)
1212+1313+## 🚀 Project Structure
1414+1515+Inside of your Astro project, you'll see the following folders and files:
1616+1717+```text
1818+/
1919+├── index.ts
2020+├── src
2121+│ └── MyComponent.astro
2222+├── tsconfig.json
2323+├── package.json
2424+```
2525+2626+The `index.ts` file is the "entry point" for your package. Export your components in `index.ts` to make them importable from your package.
2727+2828+## 🧞 Commands
2929+3030+All commands are run from the root of the project, from a terminal:
3131+3232+| Command | Action |
3333+| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
3434+| `pnpm link` | Registers this package locally. Run `pnpm link my-component-library` in an Astro project to install your components |
3535+| `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
···11+// Do not write code directly here, instead use the `src` folder!
22+// Then, use this file to export everything you want your user to access.
33+44+import MyComponent from './src/MyComponent.astro';
55+66+export default MyComponent;
···11+---
22+// Write your component code in this file!
33+interface Props {
44+ prefix?: string;
55+}
66+---
77+88+<div>{Astro.props.prefix} My special component</div>