Subscribe
Sign in
Start new thread
UI Builder
p/ui-builder
React component for a visual way to create UIs
Visit Product
Ollie Martynov
UI Builder for shadcn/ui — React component for a visual way to create UIs
Featured
6
•
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.
Replies
Jonny Miles
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!
Ollie Martynov
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!
Kane
Launching soon!
Looks super useful! 🚀
Ollie Martynov
Maker
@blueeon thanks! Excited to see what devs build with it and how they customize it.
Ahsan Khalid
This could be a game changer, I hope it will be better then Vercel V0.
Yann Leretaille
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.