Atomize by Quarkly

Library for creating atomic react components

31 followers

Atomize is the basis for Quarkly.io components. Atomize allows you to set styles for a specific component depending on a breakpoint, configure their states, add variables from the theme, transfer the desired props to a special panel (Props tab), and more.
This is the 3rd launch from Atomize by Quarkly. View more

Quarkly 2.0

No-code platform for creating websites and web apps on React
Have you been searching for a no-code fast-to-market builder in React with in-depth controls when needed? Are you interested in quickly creating a UI with a good balance between GUI and code input? Good news for you — now you can use Quarkly.
Quarkly 2.0 gallery image
Quarkly 2.0 gallery image
Quarkly 2.0 gallery image
Quarkly 2.0 gallery image
Quarkly 2.0 gallery image
Quarkly 2.0 gallery image
Quarkly 2.0 gallery image
Quarkly 2.0 gallery image
Free Options
Launch Team
AppSignal
AppSignal
Built for dev teams, not Fortune 500s.
Promoted

What do you think? …

Artém Zhigálin
👋 Hey Product Hunters! I'm Artém Zhigálin, a Co-founder of Quarkly. When creating Quarkly, we wanted to give designers complete freedom of action. To do this, we integrated a wide range of CSS properties in the form of controls to customize elements. If that's not enough, you can add any properties with code - just select an element, open the code editor (it's synchronized with the page), and add the desired property. The most impressive feature is the creation of any React.js component, and in such a way that its props can be displayed as controls on the right panel (like in Storybook), and parts of such components can be highlighted and styled independently. We believe that Quarkly will be a great solution for teams to collaborate on projects where frontenders create React.js components (complex and integrative), and designers design and customize component props. And the result of their work can be committed to the GitHub repository as a React.js app. Here's what Quarkly brings to the table: 💥 Ready-to-use Templates and Blocks save your time and effort 💥 Components Catalog add useful components to the page, such as Lottie or YouTube 💥 Drag’n’Drop Builder use for the fast site and app creation 💥 Wide Range of Styling Options the most popular CSS properties exist as controls in the panel, rare properties can be added in the code editor 💥 Collaboration work on a project with a team 💥 Components on a Page turn group of elements into a component 💥 Smooth Adaptive Design Adjustment set personal styles on necessary breakpoints 💥 External Preview to check your site/app in a separate tab or on your phone 💥 Push to GitHub Repos when you need to add some extra changes 💥 Export to Gatsby or CRA choose an option depending on purposes 💥 Full SEO settings Semantic tags, Alt, Meta tags, Open Graph, Sitemap.xml, etc. 💥 Code Editor add or edit page code, or code your own React.js components 💥 Code components code your own React.js components 💥 Hot import NPM import modules to your component and manage dependencies 💥 Documentation, Developers Guide and Forum use it to find answers to your questions This platform can be used for various objectives: ✅ Build landing pages ✅ Build static multipage websites ✅ Build simple web apps ✅ Build apps with API requests ✅ Learn React.js and CSS Please comment if you have any questions or would like to share your opinion on our project :-) As always, ProductHunters are given a special promo code: AWESOMEPH20 with 20% OFF. The offer is limited to 30 promo code usages.
Artém Zhigálin
@goforbg Thank you, Bharadwaj!
Gary Fung
@quarklyteam this looks very neat. I've been evaluating Plasmic, can you talk a bit about how you are similar / not? For one, you are cheaper on pricing. I'm looking for flexibility in integrating a low code design tool like this for static/marketing content management, alongside our FE/BE dev teams.
Artém Zhigálin
@garyfung Sorry for the delay. I think Plasmic is a great product for prototyping, as well as Framer. We aim at making our product work in the way usual to website builders. No doubt, you can create a web page with Quarkly, Plasmic, and Framer. The difference is that we are more focused on natural CSS without intermediaries and maybe in the way the final version will look like for search engine robots. As for the differences, firstly, we have a simpler interface. Secondly, you can create your own React.js components and turn their properties into controls, and you can also select subcomponents and style them individually. Thirdly, Quarkly allows you to share your project and work on it with the whole team. I have an offer to you. What if you tell me in detail about the task you are working on, and we will make a research to give you more information that may be quite helpful.
George Berilltsev
Good luck! Powerful tool!
Artém Zhigálin
@george_berill Thank you, George!
Oleg Pavlov
Nice project and cool knowledge base!
Artém Zhigálin
@olepav Thank you, Oleg! Also we have a nice YouTube channel :)
Andrew Likhovidov
Great job!
Artém Zhigálin
@new_user_116a84264b Thanks, Andrew!
Alexander Belousov
Great service! Are you planning to add more components and layouts for creating admin panels and dashboards?
Artém Zhigálin
@alexbeofficial Hi, Alex! Yes sure, we're going to add more components and features to make the creating of the dashboards and other things easier. For example, we're going to implement integration components to work with other tools like Airtable, Firebase, and Directual. By the way, you can check out our roadmap, https://quarkly.io/roadmap
Extra 👏 for the badass video! It really sells the product like some rockstar relic, something I want to try right away!
Artém Zhigálin
@johnnyfekete Yeah!) Thanks, Johnny!
Aurélie Violette
I know how designing the UX/UI of this kind of tools can be complex, congrats to your designers, the interface is really smooth.
Artém Zhigálin
@purple_orwel thank you! We have one designer, that's me :)
Aurélie Violette
@quarklyteam Congrats then :)
123
•••
Next
Last