Atomize React

Atomize React

An open source design system for ReactJS

23 followers

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/
Atomize React gallery image
Atomize React gallery image
Atomize React gallery image
Atomize React gallery image
Atomize React gallery image
Launch Team
Intercom
Intercom
Startups get 90% off Intercom + 1 year of Fin AI Agent free
Promoted

What do you think? …

Proksh Luthra
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.
Matt Pate
Any plan for typescript support?
Proksh Luthra
@matthew_pate Pretty soon 😄.
Kishore
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,
Proksh Luthra
@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.
Kishore
@proksh_luthra1 Got it, thanks. What is the commercial use license? Atomize React License doesn't say anything about commercial use.
Proksh Luthra
@prakis Its open source and free to use commercially - https://github.com/proksh/atomiz... I will add if it is not clear 😃
jaequery
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?
Proksh Luthra
@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.
kushagra gour
The amazing Atomize UI kit is now available in your favourite JS framework. Yes, as a React UI kit!! Definitely must try for your next project.
kushagra gour
Very comprehensive set of components and nicely implemented. Nice work @proksh_luthra1 & amazing UI kit again @akashtyagi027 👏🏼
Vlad M
I love it, awesome work!
Proksh Luthra
@vladmihai thanks 😃
123
Next
Last