UI Builder is an open-source React component that provides a no-code, visual way to create UIs, compatible with shadcn and custom components. Perfect for building UIs like landing pages or marketing emails, with easy integration into shadcn/ui projects.
This looks quite nice! Some notes:
* If you change the size of the page panel it doesn't reflow on small screens like it actually does in the preview when opened on mobile. On that note, the Preview should have buttons for different screen sizes.
* I didn't find the add component button at first as it I didn't want to add an element at the top before realizing that is the only way, and then later noticing there is a + button next to the elements in the left panel as well, but it's only visible if you hover over them.
* It would be nice to be able to directly drag and drop elements that have been already placed in the page view.
This component seems like it would be very helpful for both novice and seasoned React developers. I see it.
hey congrats on the launch! 🚀
Seems super promising. I had a few thoughts on the UX – on flexbox elements, you've got some presets for flex such as justify, gap. The gap dropdown only had 1,2,4,8 as options, whereas if I add it as a class above, you can access all the tailwind gap classes.
Another thing was visually selecting elements didn't seem to select the corresponding element in the layers sidepanel. I really would need that to be able to see where things are in the structure.
Also in that layers sidepanel, was there no way to add a new top level element? I can only see the full width "add component" CTA in the visual editor.
The dropdowns also seemed a bit laggy, I don't know if any of that is just animation you could remove.
Good luck with it!
This could save a lot of back-and-forth when working on front-end designs. Visual editing and easy integration make it a win for designers and developers alike.
