<h2>What I did?</h2>
I wanted to use Shadcn component, with Tanstack Form, so I created <code>shadcn-tanstack-form</code> (need a less mouthful name).
<code>shadcn-tanstack-form</code> use the same autonomy as the vanila shadcn form components, it should be an easy drop in replacment.
you can try it now with:
<pre><code>npx shadcn@canary add https://shadcn-tanstack-form.netlify.app/r/tanstack-form.json
</code></pre>
<h2>Usage</h2>
Here is an example snippet on how to use <code>shadcn-tanstack-form</code>
<pre><code class="language-tsx"> const form = useAppForm({
 validators: { onChange: FormSchema },
 defaultValues: {
 username: &quot;&quot;,
 },
 onSubmit: ({ value }) =&gt; console.log(value),
 });

 const handleSubmit = useCallback(
 (e: React.FormEvent) =&gt; {
 e.preventDefault();
 e.stopPropagation();
 form.handleSubmit();
 },
 [form],
 );
 return (
 &lt;form.AppForm&gt;
 &lt;form className=&quot;space-y-6&quot; onSubmit={handleSubmit}&gt;
 &lt;form.AppField
 name=&quot;username&quot;
 children={(field) =&gt; (
 &lt;field.FormItem&gt;
 &lt;field.FormLabel&gt;Username&lt;/field.FormLabel&gt;
 &lt;field.FormControl&gt;
 &lt;Input
 placeholder=&quot;FatahChan&quot;
 value={field.state.value}
 onChange={(e) =&gt; field.handleChange(e.target.value)}
 onBlur={field.handleBlur}
 /&gt;
 &lt;/field.FormControl&gt;
 &lt;field.FormDescription&gt;
 This is your public display name.
 &lt;/field.FormDescription&gt;
 &lt;field.FormMessage /&gt;
 &lt;/field.FormItem&gt;
 )}
 /&gt;
 &lt;Button type=&quot;submit&quot;&gt;Submit&lt;/Button&gt;
 &lt;/form&gt;
 &lt;/form.AppForm&gt;
 );
}
</code></pre>
<code>shadcn-tanstack-form</code> grow more from being just a form component, I started creating common forms that I face in my projects as blocks.
you can check it <a href="https://shadcn-tanstack-form.netlify.app/blocks" target="_blank" rel="noopener nofollow">here</a>
<h2>Call to Action</h2>
If you find the project useful/interesting please don’t forget to star the <a href="https://github.com/FatahChan/shadcn-tanstack-form" target="_blank" rel="noopener nofollow">repo</a>
If you find any issues please open up an issue on github, and I will try to resolve it
<h2>Upcoming</h2>
I am planning on creating a form builder, that is more universal taking insprations from <a href="https://github.com/hasanharman/form-builder" target="_blank" rel="noopener nofollow">form buidler</a> and <a href="https://github.com/inato/inato-form" target="_blank" rel="noopener nofollow">inato-form</a>

A community for all things frontend! Share tips, tutorials, and resources on HTML, CSS, JavaScript, frameworks (React, Vue, Next js, Angular, and more), performance, UI/UX, and more. Let’s code, learn, and grow together! 🚀👩‍💻👨‍💻


All Frontend

A developer created shadcn-tanstack-form, a library that combines shadcn/ui components with TanStack Form as the underlying form engine. The library provides drop-in replacement components that maintain the same API as vanilla shadcn forms while leveraging TanStack Form's capabilities. It includes pre-built form blocks for common use cases and can be installed via the shadcn CLI. The project is open source and the author plans to expand it with a universal form builder.

Shadcn Form But with Tanstack Form as an Engine

I’m working on a modular approach for this: <a href="https://github.com/kulterryan/shadcn-tanstack-form" target="_blank" rel="noopener nofollow">https://github.com/kulterryan/shadcn-tanstack-form</a>