[UPDATED!] Seamless Forms with shadcn/ui and TanStack Form
~ cat "[UPDATED!] Seamless Forms wi"~ cat post <<
In my post, "Life after Next.js: A New and Sunny Start," I talked about my journey migrating to TanStack Start and the freedom it brought. One of the loose ends I mentioned was the form situation. I'm a big fan of the aesthetics and developer experience of shadcn/ui, but its default form component is built on react-hook-form. As I'm going all-in on the TanStack ecosystem, I naturally wanted to use TanStack Form.
This presented a classic developer dilemma: do I stick with a component that doesn't quite fit my new stack, or do I build something better? The answer was obvious. I couldn't find a clean, existing solution that married the beauty of shadcn/ui with the power and type-safety of TanStack Form. So, I decided to build it myself.
Today, I'm excited to share the result: a component that seamlessly integrates shadcn/ui with TanStack Form, preserving the core principles of both libraries. It's type-safe, easy to use, and maintains that clean shadcn/ui look and feel.
You can check out the component's website and find the full source code on the GitHub repository.
Why Bother?
TanStack Form offers incredible power with its framework-agnostic, type-safe approach to form state management. shadcn/ui, on the other hand, provides beautiful, accessible, and unopinionated components. The goal was to get the best of both worlds without any compromises. This component acts as the bridge, giving you:
- Full Type-Safety: Infer types directly from your validation schemas (like Zod, Valibot, etc.).
- Seamless TanStack Integration: Leverage TanStack Form’s state management and validation logic.
- Consistent shadcn/ui Styling: Use the form components you already know and love.
