UI Builder

React component for a visual way to create UIs

228 followers

React component for a visual way to create UIs

228 followers

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.

Free

Launch tags:Design Tools•Developer Tools•GitHub

Launch Team / Built With

ArticosTest your messaging on your audience, right inside Claude or ChatGPT

Promoted

PicLooks Avatars

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!

Report

2yr ago

UI Builder

Maker

@jonnymiles Thanks so much for the feedback and for checking out our launch! 🚀 Glad to hear you find it promising. Regarding the gap options in the Flexbox component, you can actually add custom components or configure the default options to include any component properties that you find helpful. The Flexbox is an example of how you can extend the builder with your own components, which can be removed by changing the builder component configuration. More info is in the github docs. I am aware that selecting elements doesn't highlight them in the layers side panel, and improving that is at the top of our roadmap. Performance enhancements are also a big focus for me right now, so you should see improvements soon—also the lag might be due to input debouncing. As for adding new top-level elements from the layers panel, that's a great suggestion. I'll look into making that more intuitive. Thanks again for your insights!

Report

2yr ago

Wingback

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.

Report

2yr ago