This boilerplate is a complete and professional foundation built with Astro.js, React, and TypeScript, designed to scale with performance, security, and code quality. Itâs ideal for complex and large applications that demand a solid and maintainable architecture.
The core pillars of the project are readability, reusability, and refactorability. The UI follows the Atomic Design methodology, organizing components into atoms, molecules, organisms, and templates for better structure and consistency.
ð Technologies
ð Astro.js - Fast, modern static site generator with island architecture
â React.js - Reactive JavaScript library for building user interfaces
ð¥ TypeScript - Typed JavaScript for better developer experience and code quality
ð CSS Modules - Locally scoped CSS for component styling
ð© Lints & Formatters:
- Lefthook - Git hooks manager
- BiomeJS - Fast formatter and linter
- Commitlint - Lint commit messages
â Testing:
- Vitest - Fast unit testing framework
- Playwright - End-to-end testing framework
ð© Features
- Responsive design - Mobile-first approach for all screen sizes
- Atomic Design - Structured component hierarchy for maintainable UI
- Accessibility - Detection of prefers-reduced-motion and other a11y features
- Theming - Theme configuration with CSS Modules for consistent styling
- Developer Experience:
- Global aliases for importing utilities like clsx without manual imports
- Instant lint and formatter with BiomeJS
- Lefthook runs lint only on changed files
- Performance:
- Ultra-optimized font setup, each font only 2kb with preload
- Astro's partial hydration for minimal JavaScript
- Icons - Customizable icon system supporting your own SVGs and any icon from Iconify
- CI/CD:
- Automatic release generation and versioning
- Pre-configured GitHub Actions workflows
The project is actively maintained and updated with best practices in architecture and developer experience. Preconfigured scripts make it easy to run the development environment, test, lint, format code, and check for dependency updates using pnpm.
Strict linting and testing rules are enforced via Lefthook, ensuring clean and production-ready code at every commit and push.
This theme is perfect for developers and teams who want to start with a scalable and well-structured codebase, avoiding setup overhead and focusing on building features faster.
Created and maintained by Ãverton Toffanetto
ð LinkedIn
ð YouTube