<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Igor Duspara</title>
    <description>The latest articles on Forem by Igor Duspara (@iduspara).</description>
    <link>https://forem.com/iduspara</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3137700%2Ffb64ef62-5b26-4850-8cf0-ece6b1446bd0.jpeg</url>
      <title>Forem: Igor Duspara</title>
      <link>https://forem.com/iduspara</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/iduspara"/>
    <language>en</language>
    <item>
      <title>I Built Shadcn Builder – A Form Builder for Shadcn/UI</title>
      <dc:creator>Igor Duspara</dc:creator>
      <pubDate>Wed, 01 Oct 2025 15:42:30 +0000</pubDate>
      <link>https://forem.com/iduspara/i-built-shadcn-builder-a-form-builder-for-shadcnui-131a</link>
      <guid>https://forem.com/iduspara/i-built-shadcn-builder-a-form-builder-for-shadcnui-131a</guid>
      <description>&lt;p&gt;Hi folks! 👋&lt;br&gt;&lt;br&gt;
I'm the creator of &lt;a href="https://www.shadcn-builder.com/" rel="noopener noreferrer"&gt;Shadcn Builder&lt;/a&gt;, a free and open form builder designed specifically for &lt;a href="https://ui.shadcn.dev/" rel="noopener noreferrer"&gt;shadcn/ui&lt;/a&gt; – a component library that many of us love for its simplicity, accessibility, and Tailwind-friendly approach.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;




&lt;h2&gt;
  
  
  🌱 The Problem
&lt;/h2&gt;

&lt;p&gt;If you've worked with &lt;code&gt;shadcn/ui&lt;/code&gt; 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.&lt;/p&gt;

&lt;p&gt;I often found myself copying and pasting boilerplate or manually tweaking similar code over and over again. That felt… wrong. So I thought:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;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?&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  ⚒️ What ShadCN Builder Does
&lt;/h2&gt;

&lt;p&gt;ShadCN Builder is a simple online tool that lets you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;✅ &lt;strong&gt;Visually build forms&lt;/strong&gt; with inputs, selects, checkboxes, toggles, and more.&lt;/li&gt;
&lt;li&gt;✅ &lt;strong&gt;Configure props and Zod validation&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;✅ &lt;strong&gt;Preview the form live&lt;/strong&gt; as you go.&lt;/li&gt;
&lt;li&gt;✅ &lt;strong&gt;Export clean, production-ready React + TypeScript code&lt;/strong&gt; using &lt;code&gt;shadcn/ui&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The goal was to make it feel like “Playground meets Code Generator” – something fast and frictionless for prototyping and real-world use alike.&lt;/p&gt;

&lt;p&gt;Give it a try 👉 &lt;a href="https://www.shadcn-builder.com/" rel="noopener noreferrer"&gt;https://www.shadcn-builder.com&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  🚀 How It Works
&lt;/h2&gt;

&lt;p&gt;Under the hood:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It uses a lightweight custom schema to track the form state.&lt;/li&gt;
&lt;li&gt;Built entirely with React and Tailwind CSS.&lt;/li&gt;
&lt;li&gt;Currently supports code export using &lt;code&gt;react-hook-form&lt;/code&gt; and &lt;code&gt;zod&lt;/code&gt; – but it’s extendable.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The generated code is &lt;strong&gt;unopinionated&lt;/strong&gt; – no vendor lock-in, no magic. Just well-structured components you can tweak as needed.&lt;/p&gt;




&lt;h2&gt;
  
  
  ❤️ Why I Made It Free
&lt;/h2&gt;

&lt;p&gt;This is a tool I wish I had when I started building with &lt;code&gt;shadcn/ui&lt;/code&gt;. I believe tools like this should be &lt;strong&gt;open and accessible&lt;/strong&gt;, especially when they support open-source ecosystems.&lt;/p&gt;

&lt;p&gt;Right now, ShadCN Builder is 100% free to use. Just build, copy, and go.&lt;/p&gt;

&lt;p&gt;If you're using it in a real-world app or startup, I’d love to hear about it!&lt;/p&gt;




&lt;h2&gt;
  
  
  🧪 What’s Next?
&lt;/h2&gt;

&lt;p&gt;On the roadmap:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🧩 More components (radio groups, sliders, file uploads, etc.)&lt;/li&gt;
&lt;li&gt;🌐 Internationalization support (i18n for labels + errors)&lt;/li&gt;
&lt;li&gt;📊 More form templates&lt;/li&gt;
&lt;li&gt;🔄 GitHub integration (maybe even push directly to your repo!)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I’m building this in the open – so if you want to shape what’s next, you can &lt;a href="https://github.com/shadcn-builder/issues" rel="noopener noreferrer"&gt;open an issue&lt;/a&gt; or connect on X/Twitter.&lt;/p&gt;




&lt;h2&gt;
  
  
  🫶 Let’s Build Better Forms
&lt;/h2&gt;

&lt;p&gt;ShadCN Builder is just one small tool, but I hope it saves you time and helps bring more joy to building modern UIs.&lt;/p&gt;

&lt;p&gt;Try it out:&lt;br&gt;&lt;br&gt;
🔗 &lt;strong&gt;&lt;a href="https://www.shadcn-builder.com/" rel="noopener noreferrer"&gt;https://www.shadcn-builder.com&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Happy building! 🛠️  &lt;/p&gt;

</description>
      <category>webdev</category>
      <category>react</category>
      <category>shadcnui</category>
      <category>reactforms</category>
    </item>
  </channel>
</rss>
