From 47b0efb20cd41e4f816dde9bae3391b023676c0b Mon Sep 17 00:00:00 2001 From: shadcn Date: Mon, 3 Nov 2025 10:46:35 +0400 Subject: [PATCH] docs: update tanstack start --- apps/v4/content/docs/(root)/monorepo.mdx | 8 +- .../docs/installation/tanstack-router.mdx | 2 +- .../v4/content/docs/installation/tanstack.mdx | 110 ++---------------- .../content/docs/registry/getting-started.mdx | 2 +- 4 files changed, 17 insertions(+), 105 deletions(-) diff --git a/apps/v4/content/docs/(root)/monorepo.mdx b/apps/v4/content/docs/(root)/monorepo.mdx index 1604264a42..c680f258fd 100644 --- a/apps/v4/content/docs/(root)/monorepo.mdx +++ b/apps/v4/content/docs/(root)/monorepo.mdx @@ -24,7 +24,7 @@ To create a new monorepo project, run the `init` command. You will be prompted to select the type of project you are creating. ```bash -npx shadcn@canary init +npx shadcn@latest init ``` Select the `Next.js (Monorepo)` option. @@ -51,15 +51,15 @@ cd apps/web ``` ```bash -npx shadcn@canary add [COMPONENT] +npx shadcn@latest add [COMPONENT] ``` The CLI will figure out what type of component you are adding and install the correct files to the correct path. -For example, if you run `npx shadcn@canary add button`, the CLI will install the button component under `packages/ui` and update the import path for components in `apps/web`. +For example, if you run `npx shadcn@latest add button`, the CLI will install the button component under `packages/ui` and update the import path for components in `apps/web`. -If you run `npx shadcn@canary add login-01`, the CLI will install the `button`, `label`, `input` and `card` components under `packages/ui` and the `login-form` component under `apps/web/components`. +If you run `npx shadcn@latest add login-01`, the CLI will install the `button`, `label`, `input` and `card` components under `packages/ui` and the `login-form` component under `apps/web/components`. ### Importing components diff --git a/apps/v4/content/docs/installation/tanstack-router.mdx b/apps/v4/content/docs/installation/tanstack-router.mdx index 7bca31659c..a3e27e0a6e 100644 --- a/apps/v4/content/docs/installation/tanstack-router.mdx +++ b/apps/v4/content/docs/installation/tanstack-router.mdx @@ -18,7 +18,7 @@ npx create-tsrouter-app@latest my-app --template file-router --tailwind --add-on You can now start adding components to your project. ```bash -npx shadcn@canary add button +npx shadcn@latest add button ``` The command above will add the `Button` component to your project. You can then import it like this: diff --git a/apps/v4/content/docs/installation/tanstack.mdx b/apps/v4/content/docs/installation/tanstack.mdx index 8c4a43b6e1..25c42b6fff 100644 --- a/apps/v4/content/docs/installation/tanstack.mdx +++ b/apps/v4/content/docs/installation/tanstack.mdx @@ -7,109 +7,18 @@ description: Install and configure shadcn/ui for TanStack Start. ### Create 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. +Run the following command to create a new TanStack Start project with shadcn/ui: ```bash -npm install tailwindcss @tailwindcss/postcss postcss +npm create @tanstack/start@latest --tailwind --add-ons shadcn ``` -### 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 { createRootRoute, Outlet } 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 +### Add Components You can now start adding components to your project. ```bash -npx shadcn@canary add button +npx shadcn@latest add button ``` The command above will add the `Button` component to your project. You can then import it like this: @@ -117,10 +26,7 @@ The command above will add the `Button` component to your project. You can then ```tsx title="app/routes/index.tsx" showLineNumbers {1,6} import { Button } from "@/components/ui/button" -function Home() { - const router = useRouter() - const state = Route.useLoaderData() - +function App() { return (
@@ -130,3 +36,9 @@ function Home() { ``` + +If you want to add all `shadcn/ui` components, you can run the following command: + +```bash +npx shadcn@latest add --all +``` diff --git a/apps/v4/content/docs/registry/getting-started.mdx b/apps/v4/content/docs/registry/getting-started.mdx index 9a856ace1b..1616b69980 100644 --- a/apps/v4/content/docs/registry/getting-started.mdx +++ b/apps/v4/content/docs/registry/getting-started.mdx @@ -103,7 +103,7 @@ You can read more about the registry item schema and file types in the [registry ### Install the shadcn CLI ```bash -npm install shadcn@canary +npm install shadcn@latest ``` ### Add a build script