DEV Community

Cover image for Meet Agrippa, the React CLI for component generation
Nitzan Hen
Nitzan Hen

Posted on • Updated on

Meet Agrippa, the React CLI for component generation

Finally, after over two years of writing the boilerplate of React components by hand, I'd decided to make snippets for them. However, I find myself working in quite a number of different environments (Typescript or JavaScript, different styling solutions, etc.), and it quickly became apparent that to accommodate for each and every reasonable combination, I'd be writing at least as much boilerplate as I'd sought to avoid.

To this end (as well as the desire to do something cool), I wrote a small CLI - Agrippa.

As the documentation reads,

"[Agrippa's] purpose is to assist React developers in creating components without the boilerplate. It can easily generate templates for React components of different compositions (styling solutions, prop validations, etc.) and in different environments."

Agrippa's leading features are:
🚀 Ease of use in both new and existing projects.
🐙 Flexibility - agrippa strives to be useful in many different circumstances.
🧠 Smart defaults - agrippa can detect and set defaults based on your environment's configuration, with no extra steps.
⚙️ Configurability - by using a plain old JSON file.


To get started with Agrippa, install it using npm i -g agrippa (or yarn global add agrippa).
Once installed, components can be generated using agrippa gen <name> [options]!

Some of the options supported by agrippa gen are:

  • --styling: which styling solution to use (e.g. CSS, SCSS, JSS, Material-UI).
  • --props: which prop validation/definition solution to use (e.g. Typescript interfaces, prop-types, JSDoc comments).
  • --children: whether the components is meant to have children or not.

Also, Agrippa automatically detects and sets other, important defaults for you, such as whether to use Typescript or Javascript, and whether to import React or not.

An exhaustive list of options and defaults, as well as more information, can be found in the GitHub repo or the npm page.


My ambition is that Agrippa would become a tool that makes the lives of React developers easier, but perhaps more importantly one that they enjoy using. The tool's ease-of-use at the practical level is one aspect of that, but just as important is the cultivation of an active, positive community around it that developers feel welcome in.

Therefore, I invite you - yes, you - to become part of Agrippa's community. Your thoughts, suggestions and collaboration are most welcome.

Links: GitHub, npm.

Discussion (12)

hannanel100 profile image

Looks really interesting, this is probably the only thing I liked in Angular and was missing in React. Will definitely try this out...

nitzanhen profile image
Nitzan Hen Author

Thanks! I'm totally with you on that one - I found Angular's CLI really convenient, and thought React could use something something similar.
If you have any feedback or suggestions, I'd love to hear it!

aramay profile image
Abid Ramay • Edited on

nice tool. QQ: How do I run this project on my local machine for development? I've forked and cloned, but how do I start the project?

nitzanhen profile image
Nitzan Hen Author

You don't even need to fork and clone the project to get started.
Simply open any terminal and type in npm install -g agrippa (You'll need Node.js installed, of course).
Once it finished downloading, you can start typing commands - See the GitHub section for usage instructions and options.

aramay profile image
Abid Ramay

Hey. I understand that part of usage. What if I wanted to contribute? How do I do that? I didn't find any file.

Thanks for following up.

Thread Thread
nitzanhen profile image
Nitzan Hen Author

Oh! sorry.
The project is still quite new, and I've yet to set all of these things up. I promise to get to them soon.

In the meantime, if you have anything specific in mind, feel free to open an issue on GitHub.

henrikvtcodes profile image
Henrik VT

Looks awesome! You should put a #showdev tag on this post.

nitzanhen profile image
Nitzan Hen Author

I didn't know about that tag, thanks a lot!

swagwik profile image
Sattwik Sahu

Wow! That's pretty dope yo! Imma certainly give it a roll. Thanks for the info

itaylisaey profile image

Definitely my new favorite when it comes to react libraries.
Thank you!

fedeagripa profile image

@nitzanhen Thank you so much for making this tribute!!!!!
You got my follow and definitely will use my own react cli now :)
Federico Agripa :)

alon5451 profile image

Sounds like an amazing tool, Can't wait to use it!