Install Atomic Bomb, generate your first Atomic Design structure, and start building React and React Native interfaces with reusable components.
Setting up
Atomic Bomb integrates seamlessly with React, React Native, Expo, Next.js, and Vite-based projects, allowing teams to establish a scalable Atomic Design architecture from the start.
Begin by creating your application using your preferred framework:
Once the project has been created, install the required dependencies, including Sass, JSON-to-SCSS, and Storybook. Atomic Bomb then integrates into the project through a simple CLI command that generates your first Atomic Design component and creates a project configuration file.
The CLI supports multiple platforms, including React, React TypeScript, React Native, React Native TypeScript, and React TypeScript with Vite. From that point forward, Atomic Bomb can generate Atoms, Molecules, Organisms, Templates, Pages, Hooks, and supporting files using a consistent project structure.
Combined with Atomic Resources and Bomber MCP, Atomic Bomb provides a complete workflow for creating reusable design systems, enforcing architectural standards, and accelerating development across React, React Native, Expo, and Next.js applications.
prepare your system
Before installing Atomic Bomb, ensure your development environment includes Node.js (v18 or higher)
install node.js v18 or higher, at Download NodeJS
create your app
Create your application using your preferred framework
replace the above command with the one corresponding to your preferred framework
install storybook
Opionally, install Storybook to create and test your components in isolation, it's highly recommended to use it together with Atomic Bomb.
run the command in your project directory to install Storybook
install other dependencies
If you have any other dependencies to install, now would be a great time. Atomic Bomb will work without them since it only generates component boilerplate.
determine template
Atomic Bomb works with multiple different templates. usually, the template is determined by the framework you are using. For example, if you are using React with TypeScript, you would use the
Requirements
You need to have the following tools installed on your system or in your project (a couple of them are covered when installing the Atomic Resources):
