<p align="center">
  <a href="http://atomizecode.com">
    <img width="110px" style="margin-right: 20px" src="https://firebasestorage.googleapis.com/v0/b/pawan-dev.appspot.com/o/logo.svg?alt=media">
  </a>
</p>

<h1 align="center">Atomize Code</h1>

<div align="center">

UI Design System for React JS

[![npm package](https://img.shields.io/npm/v/atomize.svg?style=flat-square)](https://www.npmjs.org/package/atomize) [![NPM downloads](http://img.shields.io/npm/dm/atomize.svg?style=flat-square)](http://npmjs.com/atomize) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

</div>

[![](https://firebasestorage.googleapis.com/v0/b/pawan-dev.appspot.com/o/Screenshot%202019-07-19%20at%2011.16.03%20AM.png?alt=media)](http://atomizecode.com)

## Features

- UI design system for web apps.
- Elegant and beautiful React components

## Environment Support

- Modern browsers and Internet Explorer 9+
- Server-side Rendering
- [Electron](http://electron.atom.io/)

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| IE9, IE10, IE11, Edge                                                                                                                                                                                           | last 2 versions                                                                                                                                                                                                   | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                           | last 2 versions                                                                                                                                                                                                       |

## Install

```bash
npm install atomize react-transition-group
```

```bash
yarn add atomize react-transition-group
```

## Usage

```jsx
import { Button } from "atomize";
ReactDOM.render(<Button />, mountNode);
```

## Links

- [Home page](http://atomizecode.com/)
- [Getting Started](https://atomizecode.com/docs/react/setup)
- [Showcase](https://atomizecode.com/docs/react/showcase)
- [Contributing](https://atomizecode.com/docs/react/contributing)
- [Theme Setup](https://atomizecode.com/docs/react/theme)
- [Atoms](https://atomizecode.com/docs/react/atoms)
- [Molecules](https://atomizecode.com/docs/react/molecules)
- [Functions](https://atomizecode.com/docs/react/functions)

## Examples

- [Search Box](https://codesandbox.io/s/search-box-0fc6c)
- [Star Rating](https://codesandbox.io/s/star-rating-64ex1)
- [Login Form](https://codesandbox.io/s/login-form-atomize-ezs4u)
- [Payment Card](https://codesandbox.io/s/payment-card-42b3c)
- [Pokedex](https://warpokex.ri7nz.now.sh/) | [Repository](https://github.com/ri7nz/Warpokex)

## Development

To clone locally:

```bash
$ git clone git@github.com:Proksh/atomize.git
$ cd atomize
$ npm install // or yarn
$ npm start
```

Open your browser and visit http://localhost:8080

## Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

Read our [contributing guide](https://atomizecode.com/docs/react/contributing) and let's build a better atomize together.


- UI design system for web apps. - Elegant and beautiful React components. 

atomize

- UI design system for web apps. - Elegant and beautiful React components