vite-react-component-library-template

A clean and modern React 18+ component library template, powered by Vite, TypeScript, and Vitest.

This template is designed to help you build your own reusable React component library, with playground and testing ready to go.

✨ Features

✅ React 18+ ✅ Vite for blazing-fast dev & build ✅ TypeScript for type-safe components ✅ Playground with React Router to test components ✅ Vitest + Testing Library for unit testing ✅ ESLint & Prettier for linting and formatting ✅ Husky & lint-staged support for pre-commit hooks

🚀 Getting Started

1. Clone the template

   git clone https://github.com/scg-wedo/vite-react-component-library-template.git my-lib
   cd my-lib

2. Update package info

   • Edit package.json:

     • Change "name" to your library name (e.g. "my-awesome-lib")
     • Update "repository", "bugs", "homepage"

   • Update LICENSE file owner & year if needed.

3. Install dependencies

   yarn install

4. Run playground

   yarn dev

   👉 This will open a local dev server at http://localhost:3000 to test your components.

5. Build the library

   yarn build

   👉 Outputs files to dist/, ready to publish.

6. Run tests

   yarn test

7. Lint & Format

   yarn lint
   yarn format

8. Publish

   • Make sure you’re logged in to npm:

     npm login

   • Publish your library:

     npm publish --access public

🗂 Project Structure

src/
  components/       → your library components
  index.ts          → export all components here

playground/
  index.html        → entry HTML for playground
  main.tsx          → entry point for React
  App.tsx           → setup routes or demos for components
  previews/         → separate component demos

vite.config.ts              → config for building the library
playground/vite.config.ts   → config for running playground

package.json                → library config, scripts, dependencies

🔥 Recommended Next Steps

✅ Add your own components in src/components ✅ Update src/index.ts to export them ✅ Write tests in src/components/YourComponent/YourComponent.test.tsx ✅ Add preview pages in playground/previews/ ✅ Customize README and package metadata before publish

🙌 License

MIT