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.
About UI Builder for shadcn/ui on Product Hunt
“React component for a visual way to create UIs”
UI Builder for shadcn/ui launched on Product Hunt on October 11th, 2024 and earned 245 upvotes and 6 comments, placing #5 on the daily leaderboard. 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.
UI Builder for shadcn/ui was featured in Design Tools (259.5k followers), Developer Tools (511k followers), GitHub (41.2k followers) and Web Design (8.8k followers) on Product Hunt. Together, these topics include over 123.4k products, making this a competitive space to launch in.
Who hunted UI Builder for shadcn/ui?
UI Builder for shadcn/ui was hunted by Ollie Martynov. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Want to see how UI Builder for shadcn/ui stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.
Ollie Martynov