Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/proksh/atomize

Design System for developers build on styled-components & React JS.
https://github.com/proksh/atomize

design design-system reactjs ui ui-framework

Last synced: 29 days ago
JSON representation

Design System for developers build on styled-components & React JS.

Lists

README

        





Atomize Code

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)

[![](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/)

| [IE / Edge](http://godban.github.io/browsers-support-badges/)IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)Chrome | [Safari](http://godban.github.io/browsers-support-badges/)Safari | [Opera](http://godban.github.io/browsers-support-badges/)Opera | [Electron](http://godban.github.io/browsers-support-badges/)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(, 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 [email protected]: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.