Atomize React

An open source design system for ReactJS

23 followers

An open source design system for ReactJS

23 followers

Visit website

Interface design tools

•

Design resources

•

UI frameworks

Atomize React is a UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly. It is based on Atomize design system for Sketch. Website: https://atomizecode.com/

Launch tags:Web App•Design Tools•Productivity

Launch Team

TinyFishSearch, fetch and browse for AI agents. Claim 30% bonus!

Promoted

ArrayList

UI looks super clean, very beautiful. Question: I am a bit confused about how to use this, do I need to purchase atomizedesign.com or do I need sketch? Also how will designers work transform into UI? will it generate reactjs code ? Thanks,

Report

7yr ago

Atomize React

Maker

@prakis If you are a designer, you will need to buy Atomize Design (http://atomizedesign.com/#pricing), which is a design system in sketch file. You can setup brand theme, use consistent typography, colors throughout the product design. If you are a developer, you can recreate the same design theme in Atomize React (https://atomizecode.com/docs/rea...) & have the same consistent typography, colors throughout the product in code. Design won't transform into code. A developer will still work on the code, but it will easier to communicate certain things like - brand colors, typography, shadows, 8 point grid, etc.

Report

7yr ago

ArrayList

@proksh_luthra1 Got it, thanks. What is the commercial use license? Atomize React License doesn't say anything about commercial use.

Report

7yr ago

Atomize React

Maker

@prakis Its open source and free to use commercially - https://github.com/proksh/atomiz... I will add if it is not clear 😃

Report

7yr ago

Is this like a Bootstrap / Material CSS framework for React Native? I'm a bit new to Atomic Design, any one liner explaining how it's better than Material/BS?

Report

7yr ago

Atomize React

Maker

@jaequery Some of the features that are better are - 1. For spacing, bootstrap/Material has some definite values (m-1, m-2, m-3, m-4, m-5 in bootstrap). You can use any value in Atomize React, like m="5rem", m="32px", m="100%". Along with directional & responsive values like in bootstrap. We recommend using rem to follow the 8 point grid. Detail - https://atomizecode.com/docs/rea... 2. You can define the typography and colors, and manage them much better. Setting the font family, sizes, and colors of the theme. 3. Responsive is much more flexible & more values can be made responsive than bootstrap/Material. Like you can have responsive background colors, height, width, border-radius. - https://atomizecode.com/docs/rea... 4. You can also change the grid values like column count and gutter width easily. 5. You can have multiple themes in a single product by using multiple ThemeProviders. 6. Much more options for customization in the components.

Report

7yr ago

Atomize React

Maker

Hi ProductHunt, I'm excited to announce Atomize React. This is my first product on Product Hunt and I'm really excited 🥳 Atomize React is an open-source UI framework for React JS and is based on the Atomic Design System for Sketch. Atomize React helps in maintaining a consistent brand language of the website/web apps along with efficient way of using grid, spacing and making the websites responsive. With the beta release, I have introduced the most basic components. I would love to receive feedback & I'm happy to answer all your questions.

Report

7yr ago