Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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: 5 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/proksh/atomize
Owner: proksh
License: other
Created: 2019-07-03T12:28:04.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2024-01-09T18:22:08.000Z (11 months ago)
Last Synced: 2024-02-17T12:36:32.945Z (10 months ago)
Topics: design, design-system, reactjs, ui, ui-framework
Language: JavaScript
Homepage: https://atomizecode.com/
Size: 324 KB
Stars: 1,692
Watchers: 29
Forks: 316
Open Issues: 27
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

jimsghstars - proksh/atomize - Design System for developers build on styled-components & React JS. (JavaScript)
best-of-react - GitHub - 58% open · ⏱️ 19.10.2023): (UI Frameworks & Libraries)

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/)

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