# Atomic Component Principles

## Atomic Component Principles

![](https://931438517-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZp63GpoOlhb_GliLon%2F-LZp6B99VhGSOxb_uLTG%2F-LZp6GQ0W0iR2IPLimfe%2Fatomic-components.png?generation=1551374294581101\&alt=media)

### Atoms

![](https://931438517-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZp63GpoOlhb_GliLon%2F-LZp6B99VhGSOxb_uLTG%2F-LZp6GQ2M6lDdXOk2lD_%2Fatoms.jpg?generation=1551374295033188\&alt=media)

* The simplest building block
* HTML tags
* Not very useful on their own
* Easily styled
* Very reusable
* Foundation of building a brand

```markup
<Form>
  <Label>Search</Label>
  <Input />
</Form>
```

### Molecules

![](https://931438517-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZp63GpoOlhb_GliLon%2F-LZp6B99VhGSOxb_uLTG%2F-LZp6GQ4rO2xppxR1vRc%2Fmolecule.jpg?generation=1551374293351053\&alt=media)

* Groups of Atoms bonded together
* Serve as backbone of design system
* For example, a Search Form
* Do one thing, do it well

```markup
<Form onSubmit={ onSubmit }>
  <Label>Search</Label>
  <Input type="text" value={ search } />

  <Button type="submit">Search</Button>
</Form>
```

## Organisms

![](https://931438517-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZp63GpoOlhb_GliLon%2F-LZp6B99VhGSOxb_uLTG%2F-LZp6GQ6DMs728NEOVJc%2Forganism2.jpg?generation=1551374294477092\&alt=media)

* Groups of molecules
* Distinct section of an interface
* Portable, easily modified

```markup
<Header>
  <Navigator>
    <Brand />
    <NavItem to="home">Home</NavItem>
    <NavItem to="about">About</NavItem>
    <NavItem to="blog">Blog</NavItem>
  </Navigator>
  <SearchForm />
</Header>
```

## Ecosystem

![](https://931438517-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZp63GpoOlhb_GliLon%2F-LZp6B99VhGSOxb_uLTG%2F-LZp6GQ848yMi-m7VXFn%2Fecosystem.png?generation=1551374293431974\&alt=media)

* What the client will see
* Connected containers
* Many components that make up a view

## Environment

![](https://931438517-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZp63GpoOlhb_GliLon%2F-LZp6B99VhGSOxb_uLTG%2F-LZp6GQAoVf8R5w-xc0f%2Fenvironment.png?generation=1551374294863342\&alt=media)

* Root Component
* Typically the `<App />` component
* Represents everything packaged together as an application

Images from:

* Brad Frosts's article, [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/)
* Joey Di Nardo's article, [Atomic Components: Managing Dynamic React Components using Atomic Design — Part 1](https://medium.com/@yejodido/atomic-components-managing-dynamic-react-components-using-atomic-design-part-1-5f07451f261f#.9b2faky8s).