En mi anterior texto sobre la migracion a TanStack Start explique el proceso y la libertad que aporto. Uno de los pendientes fue la gestion de formularios. Me encanta la estetica y la experiencia de desarrollador de shadcn/ui pero su componente de formulario por defecto esta construido sobre react-hook-form. Al migrar por completo al ecosistema TanStack quise usar TanStack Form y me encontre con el dilema clasico: mantener un componente que no encaja del todo o construir una integracion mejor. La respuesta fue obvia y decidi crear una solucion propia que uniera la belleza de shadcn/ui con la potencia y la seguridad de tipos de TanStack Form.
El componente resultante integra sin fricciones shadcn/ui con TanStack Form preservando los principios centrales de ambas librerias. Ofrece seguridad de tipos completa permitiendo inferir tipos desde esquemas de validacion como Zod o Valibot, integracion transparente con el estado y la logica de validacion de TanStack Form, y mantiene el estilo limpio y accesible de shadcn/ui. Es facil de usar y esta pensado para encajar en proyectos profesionales.
Como empezar es sencillo. Primero inicializa shadcn/ui en tu proyecto. Luego instala la libreria de TanStack Form. A continuacion copia dos archivos clave en tu proyecto, uno con la logica del componente form y otro con el hook que expone useAppForm. Finalmente agrega los componentes de shadcn/ui que necesites para tus formularios. Con esos pasos tendras formularios bonitos, accesibles y tipados en minutos.
En cuanto a la estructura de uso, la experiencia es muy familiar para quien ya conoce shadcn/ui. Define el esquema de tu formulario con Zod u otro validador, crea la instancia del formulario con useAppForm donde indicas valores por defecto, validadores y el handler onSubmit. En la vista usas el wrapper del formulario que conecta la instancia y por cada campo usas un componente que expone el estado y los handlers basicos para value, onChange y onBlur. Adicionalmente el componente provee un mecanismo de suscripcion para escuchar el estado del formulario y, por ejemplo, deshabilitar el boton de envio mientras sea invalido o este en envio.
Este enfoque evita tener que elegir entre un gestor de estado potente y una libreria de componentes elegante. Si te interesa una solucion ya probada para formularios en React que combine tipo y estetica, este componente es una buena base para proyectos de produccion.
En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida especializada en crear soluciones reales para empresas. Ofrecemos desde software a medida y aplicaciones multiplataforma hasta servicios avanzados de inteligencia artificial y ciberseguridad. Nuestro equipo desarrolla sistemas con integracion a la nube y ayuda a las empresas a transformar datos en valor con servicios de inteligencia de negocio y Power BI. Si necesitas desarrollar una aplicacion a medida visita nuestra pagina sobre desarrollo de aplicaciones y software a medida y si buscas potenciar tu empresa con modelos y agentes IA conoce nuestros servicios de inteligencia artificial.
Tambien cuidamos aspectos transversales como la ciberseguridad y pentesting para proteger tus aplicaciones, gestionamos despliegues en servicios cloud AWS y Azure y ofrecemos soluciones de automatizacion de procesos, agentes IA e implementaciones de Power BI para inteligencia de negocio. Palabras clave que articulan nuestro trabajo incluyen aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi.
Si te interesa probar la integracion entre shadcn/ui y TanStack Form en tu proximo proyecto o necesitas apoyo para llevarlo a produccion con practicas de seguridad, escalabilidad y analitica, en Q2BSTUDIO podemos acompañarte desde el prototipo hasta la entrega. Me encantaria recibir feedback sobre la libreria, issues o pull requests en el repositorio, y saber cuales son tus soluciones preferidas para formularios en React.
