Introduction

This template provides a solid foundation for building reusable React packages with Vite and TypeScript. It includes modern tooling for testing, documentation, package publishing, and local development, making it suitable for component libraries and other distributable packages.

Prerequisites

Before getting started, ensure the following requirements are met:

• Node.js version 22.20 or higher (as specified in .nvmrc)
• npm version 9 or higher
• yalc (optional, for local package development and testing)

Structure

The template follows a simple structure focused on package development.

repo/
├── src/                     # Package source code
├── stories/                 # Storybook stories (optional)
├── tests/                   # Unit tests
├── .storybook/              # Storybook configuration
├── package.json             # Package metadata and scripts
├── tsconfig.json            # TypeScript configuration
├── vite.config.ts           # Vite configuration
└── vitest.config.ts         # Vitest configuration

The package is configured to produce multiple output formats and generate TypeScript declaration files for consumers.

Tooling

Development tooling is included for a consistent package development workflow:

• Vite for development, bundling, and library builds with ESM, CommonJS, and UMD outputs
• SWC via @vitejs/plugin-react-swc for fast React compilation
• Vitest for unit testing, with React Testing Library, Vitest UI, and coverage reports
• Storybook for developing and documenting components in isolation
• TypeScript declaration generation with vite-plugin-dts
• Prettier for consistent code formatting
• Husky and lint-staged for automated pre-commit quality checks
• GitHub Actions for CI/CD, running builds, tests, type checking, and npm publishing