Skip to main content

Atomic Bomb is a CLI tool that generates a scalable React or React Native project structure based on the principles of Atomic Design and Domain-Driven Design (DDD). Instead of manually creating folders, components, tests, stories, interfaces, and supporting files, Atomic Bomb automatically scaffolds them using a consistent architectural convention.

The tool helps teams establish a predictable development environment where UI components, domains, hooks, services, models, and application logic all have a clear place within the codebase. By enforcing structure from the beginning of a project, Atomic Bomb reduces setup time, improves maintainability, and makes it easier for developers to collaborate on large applications.

Whether you are building a small application or a large enterprise platform, Atomic Bomb provides a repeatable foundation that promotes consistency, scalability, and long-term architectural health.

Install​

Install Atomic Bomb globally:

npm install --global atomic-bomb

Or install it in a project:

npm install --save-dev atomic-bomb

You can also run it directly with npx:

npx atomic-bomb@latest --type atom --name Logo

Requirements​

Run Atomic Bomb from the root of a project that contains a package.json.

Configure the Platform​

Before generating components, configure the platform:

atomic-bomb --platform react-ts-vite
# or
atomic-bomb -p react-ts-vite

This creates a .atomic-bomb configuration file. After that, the platform can usually be omitted.

Generate Atomic Components​

Atomic Bomb can generate Atomic Design components:

atomic-bomb --type atom --name Label
atomic-bomb --type molecule --name Header
atomic-bomb --type organism --name Navigation
atomic-bomb --type template --name Dashboard
atomic-bomb --type page --name Home

Create multiple components at once:

atomic-bomb --type atom --name Label,Button,Input

Create a multi-word component:

atomic-bomb --type molecule --name "Button Group"

Generated components are placed in:

src/components/[type]s/[Name]

For example:

src/components/molecules/ButtonGroup
├── ButtonGroup.interface.tsx
├── ButtonGroup.mock.ts
├── ButtonGroup.stories.tsx
├── ButtonGroup.test.tsx
├── ButtonGroup.tsx
├── _ButtonGroup.style.scss
├── _index.scss
└── index.tsx

Generate Hooks and Lib Files​

Create a shared hook:

atomic-bomb --type hook --name useData

Create a shared library function:

atomic-bomb --type lib --name formatDate

These are generated in:

src/hooks
src/lib

Naming Rules​

Atomic Bomb normalizes names automatically.

Component and container types use PascalCase:

atomic-bomb --type atom --name "data table"

Creates:

DataTable

Non-component files use camelCase:

atomic-bomb --type hook --name "use data"

Creates:

useData

Export, Import, Remove and Update​

Export a project structure:

atomic-bomb --export structure.json

Import from a structure file:

atomic-bomb --from structure.json

Remove a generated item:

atomic-bomb --remove [NAME]

Update installed Atomic Bomb files:

atomic-bomb --update
  1. Configure the platform.
  2. Generate base atoms.
  3. Compose atoms into molecules.
  4. Compose molecules into organisms.
  5. Create templates and pages.
  6. Use domains and subdomains for business-specific structure.
  7. Keep shared hooks and libs separate.
  8. Use scoped generation when files belong to a specific domain.