Balastrong / Balastrong/tanstack-form-demo

Combining ShadCN Form components with TanStack Form

Open
#2 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
31
Forks
9
PR merge metrics
No merged PRs in 30d

Description

Thank you for your work.

I've been trying in vain to find an example of a component that combines ShadCN Form components:

```ts
import { Form, FormControl, FormField, FormItem, FormLabel } from '@/components/ui/form';
```

with TanStack Form:

```ts
import { useForm } from '@tanstack/react-form';
```

Your example uses TanStack Form without ShadCN Form components.
The example on [ShadCN](https://ui.shadcn.com/docs/components/form) uses `react-hook-form` instead of TanStack Form.

Do you know if there is a principle making it less interesting or feasible to combine with TanStack Form? Or perhaps you have come across such an example?

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by comparing the current TanStack Form example with the ShadCN Form documentation linked in the issue, focusing on the `@tanstack/react-form` and `@/components/ui/form` entry points. Done means providing a documented working combined example or clearly explaining why the two approaches cannot be combined.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.