⚛️⚡ Vite + React + Typescript Component Library Template

Features

⚛️ React 18
📚 Storybook 7 - Components preview
🖌️ Tailwind CSS 3
⏩ Vite - Run and build the project blazingly fast!
⚡ Vitest - Components Unit Testing
📐 ESLint & Prettier - Formatting and Linting
🌟 Typescript
🐶 Husky & Lint Staged - Pre-commit Hooks
⏰ Release Please — Generate the changelog with the release-please workflow
👷 Github Actions — Releasing versions to NPM
Initial components setup using Atomic Design

Getting Started

Create a new repository using this one as template
Clone your repo
Install dependencies with pnpm i (first run corepack enable to enable pnpm)
Run pnpm prepare command to setup Husky pre-commit hooks.

Main Scripts

Always prepending pnpm:

dev: Bootstrap the Storybook preview with Hot Reload.
build: Builds the static storybook project.
build:lib: Builds the component library into the dist folder.
lint:fix: Applies linting based on the rules defined in .eslintrc.js.
format:prettier: Formats files using the prettier rules defined in .prettierrc.
test: Runs testing using watch mode.
test:cov: Runs testing displaying a coverage report.

Blog Post

I created a post explaning how to set up this library and publish it to a package registry! You can read it here.

Author

Ignacio Miranda Figueroa

License