Skip to content

Commit 169ebeb

Browse files
authored
Docs: Refactor Installation and Overview (TanStack#1991)
* docs: migrate installation to tabs * docs: update overview and installation * docs: fix wrong heading
1 parent 623dccc commit 169ebeb

File tree

3 files changed

+780
-99
lines changed

3 files changed

+780
-99
lines changed

docs/installation.md

Lines changed: 60 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -3,84 +3,65 @@ id: installation
33
title: Installation
44
---
55

6-
TanStack Form is compatible with various front-end frameworks, including React, Vue, and Solid. To use TanStack Form with your desired framework, install the corresponding adapter via your preferred package manager:
7-
8-
### React Example
9-
10-
```bash
11-
# npm
12-
$ npm i @tanstack/react-form
13-
# pnpm
14-
$ pnpm add @tanstack/react-form
15-
# bun
16-
$ bun add @tanstack/react-form
17-
# yarn
18-
$ yarn add @tanstack/react-form
19-
```
20-
21-
### Vue Example
22-
23-
```bash
24-
# npm
25-
$ npm i @tanstack/vue-form
26-
# pnpm
27-
$ pnpm add @tanstack/vue-form
28-
# bun
29-
$ bun add @tanstack/vue-form
30-
# yarn
31-
$ yarn add @tanstack/vue-form
32-
```
33-
34-
### Angular Example
35-
36-
```bash
37-
# npm
38-
$ npm i @tanstack/angular-form
39-
# pnpm
40-
$ pnpm add @tanstack/angular-form
41-
# bun
42-
$ bun add @tanstack/angular-form
43-
# yarn
44-
$ yarn add @tanstack/angular-form
45-
```
46-
47-
### Solid Example
48-
49-
```bash
50-
# npm
51-
$ npm i @tanstack/solid-form
52-
# pnpm
53-
$ pnpm add @tanstack/solid-form
54-
# bun
55-
$ bun add @tanstack/solid-form
56-
# yarn
57-
$ yarn add @tanstack/solid-form
58-
```
59-
60-
### Lit Example
61-
62-
```bash
63-
# npm
64-
$ npm i @tanstack/lit-form
65-
# pnpm
66-
$ pnpm add @tanstack/lit-form
67-
# bun
68-
$ bun add @tanstack/lit-form
69-
# yarn
70-
$ yarn add @tanstack/lit-form
71-
```
72-
73-
### Svelte Example
74-
75-
```bash
76-
# npm
77-
$ npm i @tanstack/svelte-form
78-
# pnpm
79-
$ pnpm add @tanstack/svelte-form
80-
# bun
81-
$ bun add @tanstack/svelte-form
82-
# yarn
83-
$ yarn add @tanstack/svelte-form
84-
```
6+
TanStack Form is compatible with various front-end frameworks, including React, Vue, and Solid. Install the corresponding adapter for your framework using your preferred package manager:
857

8+
<!-- ::start:tabs variant="package-managers" -->
9+
10+
react: @tanstack/react-form
11+
vue: @tanstack/vue-form
12+
angular: @tanstack/angular-form
13+
solid: @tanstack/solid-form
14+
lit: @tanstack/lit-form
15+
svelte: @tanstack/svelte-form
16+
17+
<!-- ::end:tabs -->
18+
19+
<!-- ::start:framework -->
20+
21+
# React
22+
23+
## Meta-frameworks
24+
25+
If you're using a meta-framework, TanStack Form provides additional adapters to streamline integration:
26+
27+
- TanStack Start
28+
- Next.js
29+
- Remix
30+
31+
<!-- ::end:framework -->
32+
33+
<!-- ::start:tabs variant="package-manager" -->
34+
35+
react: @tanstack/react-form-start
36+
react: @tanstack/react-form-nextjs
37+
react: @tanstack/react-form-remix
38+
39+
<!-- ::end:tabs -->
40+
41+
<!-- ::start:framework -->
42+
43+
# React
44+
45+
## Devtools
46+
47+
Developer tools are available using [TanStack Devtools](https://tanstack.com/devtools/latest). Install the devtools adapter for your framework to debug forms and inspect their state.
48+
49+
# Solid
50+
51+
## Devtools
52+
53+
Developer tools are available using [TanStack Devtools](https://tanstack.com/devtools/latest). Install the devtools adapter for your framework to debug forms and inspect their state.
54+
55+
<!-- ::end:framework -->
56+
57+
<!-- ::start:tabs variant="package-manager" -->
58+
59+
react: @tanstack/react-devtools
60+
react: @tanstack/react-form-devtools
61+
solid: @tanstack/solid-devtools
62+
solid: @tanstack/solid-form-devtools
63+
64+
<!-- ::end:tabs -->
65+
66+
> [!NOTE]- Polyfill requirements
8667
> Depending on your environment, you might need to add polyfills. If you want to support older browsers, you need to transpile the library from `node_modules` yourself.

0 commit comments

Comments
 (0)