Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 196 additions & 0 deletions docs/start/framework/react/quick-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,104 @@ Once you've cloned the example you want, head back to the [Routing](./guide/rout
TanStack Start has load of examples to get you started. Pick one of the examples below to get started!

- [Basic](https://github.com/TanStack/router/tree/main/examples/react/start-basic) (start-basic)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic
```

</details>

- [Basic + Auth](https://github.com/TanStack/router/tree/main/examples/react/start-basic-auth) (start-basic-auth)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/start-basic-auth start-basic-auth
```

</details>

- [Counter](https://github.com/TanStack/router/tree/main/examples/react/start-counter) (start-counter)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/start-counter start-counter
```

</details>

- [Basic + React Query](https://github.com/TanStack/router/tree/main/examples/react/start-basic-react-query) (start-basic-react-query)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/start-basic-react-query start-basic-react-query
```

</details>

- [Clerk Auth](https://github.com/TanStack/router/tree/main/examples/react/start-clerk-basic) (start-clerk-basic)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/start-clerk-basic start-clerk-basic
```

</details>

- [Convex + Trellaux](https://github.com/TanStack/router/tree/main/examples/react/start-convex-trellaux) (start-convex-trellaux)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/start-convex-trellaux start-convex-trellaux
```

</details>

- [Supabase](https://github.com/TanStack/router/tree/main/examples/react/start-supabase-basic) (start-supabase-basic)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/start-supabase-basic start-supabase-basic
```

</details>

- [Trellaux](https://github.com/TanStack/router/tree/main/examples/react/start-trellaux) (start-trellaux)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/start-trellaux start-trellaux
```

</details>

- [WorkOS](https://github.com/TanStack/router/tree/main/examples/react/start-workos) (start-workos)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/start-workos start-workos
```

</details>

- [Material UI](https://github.com/TanStack/router/tree/main/examples/react/start-material-ui) (start-material-ui)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/start-material-ui start-material-ui
```

</details>

### Stackblitz

Expand Down Expand Up @@ -73,14 +162,121 @@ Once you've clone or deployed an example, head back to the [Routing](./guide/rou
While not Start-specific examples, these may help you understand more about how TanStack Router works:

- [Quickstart (file-based)](https://github.com/TanStack/router/tree/main/examples/react/quickstart-file-based)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/quickstart-file-based quickstart-file-based
```

</details>

- [Basic (file-based)](https://github.com/TanStack/router/tree/main/examples/react/basic-file-based)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/basic-file-based basic-file-based
```

</details>

- [Kitchen Sink (file-based)](https://github.com/TanStack/router/tree/main/examples/react/kitchen-sink-file-based)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/kitchen-sink-file-based kitchen-sink-file-based
```

</details>

- [Kitchen Sink + React Query (file-based)](https://github.com/TanStack/router/tree/main/examples/react/kitchen-sink-react-query-file-based)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/kitchen-sink-react-query-file-based kitchen-sink-react-query-file-based
```

</details>

- [Location Masking](https://github.com/TanStack/router/tree/main/examples/react/location-masking)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/location-masking location-masking
```

</details>

- [Authenticated Routes](https://github.com/TanStack/router/tree/main/examples/react/authenticated-routes)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/authenticated-routes authenticated-routes
```

</details>

- [Scroll Restoration](https://github.com/TanStack/router/tree/main/examples/react/scroll-restoration)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/scroll-restoration scroll-restoration
```

</details>

- [Deferred Data](https://github.com/TanStack/router/tree/main/examples/react/deferred-data)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/deferred-data deferred-data
```

</details>

- [Navigation Blocking](https://github.com/TanStack/router/tree/main/examples/react/navigation-blocking)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/navigation-blocking navigation-blocking
```

</details>

- [View Transitions](https://github.com/TanStack/router/tree/main/examples/react/view-transitions)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/view-transitions view-transitions
```

</details>

- [With tRPC](https://github.com/TanStack/router/tree/main/examples/react/with-trpc)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/with-trpc with-trpc
```

</details>

- [With tRPC + React Query](https://github.com/TanStack/router/tree/main/examples/react/with-trpc-react-query)
<details>
<summary>Show command</summary>

```bash
npx gitpick TanStack/router/tree/main/examples/react/with-trpc-react-query with-trpc-react-query
```

</details>
Loading