diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts index 7309e7f666..e1352ed2b8 100644 --- a/apps/www/config/docs.ts +++ b/apps/www/config/docs.ts @@ -136,7 +136,6 @@ export const docsConfig: DocsConfig = { title: "React Router", href: "/docs/installation/react-router", items: [], - label: "New", }, { title: "Remix", @@ -152,7 +151,11 @@ export const docsConfig: DocsConfig = { title: "Tanstack Start", href: "/docs/installation/tanstack", items: [], - label: "New", + }, + { + title: "Tanstack Router", + href: "/docs/installation/tanstack-router", + items: [], }, { title: "Manual", diff --git a/apps/www/content/docs/installation/index.mdx b/apps/www/content/docs/installation/index.mdx index 414f1a995c..0cd21b1f6f 100644 --- a/apps/www/content/docs/installation/index.mdx +++ b/apps/www/content/docs/installation/index.mdx @@ -82,6 +82,17 @@ description: How to install dependencies and structure your app.

TanStack Start

+ + + + +

TanStack Router

+ + +### Create project + +Start by creating a new TanStack Router project: + +```bash +npx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn +``` + +### Add Components + +You can now start adding components to your project. + +```bash +npx shadcn@canary add button +``` + +The command above will add the `Button` component to your project. You can then import it like this: + +```tsx title="src/routes/index.tsx" showLineNumbers {3,12} +import { createFileRoute } from "@tanstack/react-router" + +import { Button } from "@/components/ui/button" + +export const Route = createFileRoute("/")({ + component: App, +}) + +function App() { + return ( +
+ +
+ ) +} +``` + + diff --git a/apps/www/content/docs/installation/tanstack.mdx b/apps/www/content/docs/installation/tanstack.mdx index 0b1d652b01..b91e056e75 100644 --- a/apps/www/content/docs/installation/tanstack.mdx +++ b/apps/www/content/docs/installation/tanstack.mdx @@ -7,13 +7,104 @@ description: Install and configure shadcn/ui for TanStack Start. ### Create project -Start by creating a new TanStack Start project: +Start by creating a new TanStack Start project by following the [Build a Project from Scratch](https://tanstack.com/start/latest/docs/framework/react/build-from-scratch) guide on the TanStack Start website. + +**Do not add Tailwind yet. We'll install Tailwind v4 in the next step.** + +### Add Tailwind + +Install `tailwindcss` and its dependencies. ```bash -npx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn +npm install tailwindcss @tailwindcss/postcss postcss ``` -### Add Components +### Create postcss.config.ts + +Create a `postcss.config.ts` file at the root of your project. + +```ts title="postcss.config.ts" showLineNumbers +export default { + plugins: { + "@tailwindcss/postcss": {}, + }, +} +``` + +### Create `app/styles/app.css` + +Create an `app.css` file in the `app/styles` directory and import `tailwindcss` + +```css title="app/styles/app.css" +@import "tailwindcss" source("../"); +``` + +### Import `app.css` + +```tsx title="app/routes/__root.tsx" showLineNumbers {5,21-26} showLineNumbers +import type { ReactNode } from "react" +import { Outlet, createRootRoute } from "@tanstack/react-router" +import { Meta, Scripts } from "@tanstack/start" + +import appCss from "@/styles/app.css?url" + +export const Route = createRootRoute({ + head: () => ({ + meta: [ + { + charSet: "utf-8", + }, + { + name: "viewport", + content: "width=device-width, initial-scale=1", + }, + { + title: "TanStack Start Starter", + }, + ], + links: [ + { + rel: "stylesheet", + href: appCss, + }, + ], + }), + component: RootComponent, +}) +``` + +### Edit tsconfig.json file + +Add the following code to the `tsconfig.json` file to resolve paths. + +```ts title="tsconfig.json" showLineNumbers {9-12} +{ + "compilerOptions": { + "jsx": "react-jsx", + "moduleResolution": "Bundler", + "module": "ESNext", + "target": "ES2022", + "skipLibCheck": true, + "strictNullChecks": true, + "baseUrl": ".", + "paths": { + "@/*": ["./app/*"] + } + } +} +``` + +### Run the CLI + +Run the `shadcn` init command to setup your project: + +```bash +npx shadcn@canary init +``` + +This will create a `components.json` file in the root of your project and configure CSS variables inside `app/styles/app.css`. + +### That's it You can now start adding components to your project. @@ -23,16 +114,13 @@ npx shadcn@canary add button The command above will add the `Button` component to your project. You can then import it like this: -```tsx title="src/routes/index.tsx" showLineNumbers {3,12} -import { createFileRoute } from "@tanstack/react-router" - +```tsx title="app/routes/index.tsx" showLineNumbers {1,6} import { Button } from "@/components/ui/button" -export const Route = createFileRoute("/")({ - component: App, -}) +function Home() { + const router = useRouter() + const state = Route.useLoaderData() -function App() { return (