This repository contains everything you need to start and maintain a SEO-ready, performance-optimized marketing website you can customize to your hearts desire!
To get started, simply hit the "Use This Template" button on this repo to start your own project with this boilerplate.
- 📦 pnpm for package management, as it's much faster and more performant than NPM. It's configured using Corepack, so you should be able to install it via
corepack enable(this command comes with Node). - 🚀 Astro, a framework for creating highly-versatile and high-performance webpages. It comes packed with a boatload of features such as partial hydration, content collections, and server endpoints. See here for more.
- ⚛️ React for creating interactive component islands that leverage React's booming ecosystem.
- 👷 TypeScript for writing type-safe, maintainable code.
- 🪁 Tailwind CSS for modular, consistent CSS styling. Includes plugins such as tailwindcss-typography and tailwindcss-animate.
- 🔠 Fontsource for loading custom fonts. These can be preloaded via the
preloadprop ofBaseLayout. - 📥 shadcn-ui for rapidly adding pre-configured UI components to your website.
- 🦄 unplugin-icons for easily inlining thousands of on-demand icons in Astro and React components.
- ⚒️ Custom component primitives such as Typography and Stack.
- 🚥 Rive for embedding performant, interactive animations on your site.
- 🏃 Motion (formerly Framer Motion) for creating realistic spring animations in JavaScript.
- 📝 biome for lightning-fast linting in JavaScript and TypeScript (written in Rust)
- 🎨 Prettier for opinionated formatting (only used because Biome's HTML formatting is incomplete).
- 🐶 Husky with lint-staged to automatically run linting on new commits.
- Best Practices
- Creating UI components
- Adding new Tailwind colors
- Using custom fonts
- Using icons & SVGs
- Using Motion
- Using Rive
- Deploying
- Adding Images in Astro
- Using Astro Content Collections (useful for blogs and articles)