Hi folks! 👋
I'm the creator of Shadcn Builder, a free and open form builder designed specifically for shadcn/ui – a component library that many of us love for its simplicity, accessibility, and Tailwind-friendly approach.
This project started as a side tool to scratch my own itch, but it quickly grew into something that others found useful too. So today, I want to share the why, how, and what’s next for ShadCN Builder.
🌱 The Problem
If you've worked with shadcn/ui components, you already know how elegant and low-level they are. But that also means building things like forms still involves a fair bit of manual setup – wiring up controlled inputs, validation, labels, error messages, and making sure everything looks and feels consistent.
I often found myself copying and pasting boilerplate or manually tweaking similar code over and over again. That felt… wrong. So I thought:
What if we had a visual way to generate form code using shadcn/ui components – no fuss, no copy-paste hell, just clean code you can drop into your app?
⚒️ What ShadCN Builder Does
ShadCN Builder is a simple online tool that lets you:
- ✅ Visually build forms with inputs, selects, checkboxes, toggles, and more.
- ✅ Configure props and Zod validation.
- ✅ Preview the form live as you go.
- ✅ Export clean, production-ready React + TypeScript code using
shadcn/ui.
The goal was to make it feel like “Playground meets Code Generator” – something fast and frictionless for prototyping and real-world use alike.
Give it a try 👉 https://www.shadcn-builder.com
🚀 How It Works
Under the hood:
- It uses a lightweight custom schema to track the form state.
- Built entirely with React and Tailwind CSS.
- Currently supports code export using
react-hook-formandzod– but it’s extendable.
The generated code is unopinionated – no vendor lock-in, no magic. Just well-structured components you can tweak as needed.
❤️ Why I Made It Free
This is a tool I wish I had when I started building with shadcn/ui. I believe tools like this should be open and accessible, especially when they support open-source ecosystems.
Right now, ShadCN Builder is 100% free to use. Just build, copy, and go.
If you're using it in a real-world app or startup, I’d love to hear about it!
🧪 What’s Next?
On the roadmap:
- 🧩 More components (radio groups, sliders, file uploads, etc.)
- 🌐 Internationalization support (i18n for labels + errors)
- 📊 More form templates
- 🔄 GitHub integration (maybe even push directly to your repo!)
I’m building this in the open – so if you want to shape what’s next, you can open an issue or connect on X/Twitter.
🫶 Let’s Build Better Forms
ShadCN Builder is just one small tool, but I hope it saves you time and helps bring more joy to building modern UIs.
Try it out:
🔗 https://www.shadcn-builder.com
Happy building! 🛠️
Top comments (0)