Blitz Recipes allow you to install and configure third-party code with a single command!
View the list of official recipes.
blitz install [recipe name]Blitz Recipes are predefined formulas for adding npm dependencies or other code to your application. We've taken inspiration from Gatsby Recipes (and are very appreciative of their help in the ideation phase for our own implementation) to improve on the existing flow of adding third-party dependencies to an application.
Installing third-party code can often be very complex with multiple steps to get setup, and Blitz Recipes help cut down on those extra steps. If you are familiar with the official Next.js examples, Recipes are our replacement for that. To integrate a third-party library, run one command instead of having to look up an example integration.
> blitz install tailwind
✅ Installed 2 dependencies
✅ Successfully created postcss.config.js, tailwind.config.js
✅ Successfully created app/styles/button.css, app/styles/index.css
✅ Modified 1 file: app/pages/_app.tsx
🎉 The recipe for Tailwind CSS completed successfully! Its functionality is now fully configured in your Blitz app.The full list of Blitz Recipes can be found in the
GitHub repository.
The name of the recipe is the directory that contains the code. Take the
name of the recipe you'd like to install, pass it to
blitz install, and the installer will guide you through
the process, providing you with an explanation for the changes along the
way. For example, in the recipes directory today you'll see a recipe for
tailwind, which installs Tailwind CSS.
Executing blitz install tailwind is all it takes to get up and running,
and you can let Blitz do the rest.
One of the best parts about recipes is that they're unversioned and pulled straight from GitHub. As soon as we make an update to a recipe and merge the changes on GitHub, it's available for you to execute. The same goes for custom recipes.