diff --git a/.changeset/brave-cheetahs-smile.md b/.changeset/brave-cheetahs-smile.md new file mode 100644 index 0000000000..ad4775459d --- /dev/null +++ b/.changeset/brave-cheetahs-smile.md @@ -0,0 +1,5 @@ +--- +"shadcn": minor +--- + +add support for TanStack Start diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts index ba6854f578..d32331b442 100644 --- a/apps/www/config/docs.ts +++ b/apps/www/config/docs.ts @@ -138,6 +138,12 @@ export const docsConfig: DocsConfig = { href: "/docs/installation/laravel", items: [], }, + { + title: "Tanstack Start", + href: "/docs/installation/tanstack", + items: [], + label: "New", + }, { title: "Gatsby", href: "/docs/installation/gatsby", diff --git a/apps/www/content/docs/installation/index.mdx b/apps/www/content/docs/installation/index.mdx index c1adfdc032..9f367fb139 100644 --- a/apps/www/content/docs/installation/index.mdx +++ b/apps/www/content/docs/installation/index.mdx @@ -73,6 +73,16 @@ description: How to install dependencies and structure your app.

Laravel

+ + + + +

TanStack Start

+ + **Note:** This guide is for TanStack Start and Tailwind v4. If you are using + Tailwind v3, consider the [Basic Starter](#basic-starter) template. **TanStack + Start** works with the **canary** version of `shadcn`. + + +## TanStack Start + Tailwind v4 + + + +### 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. + +### Add Tailwind + +Install `tailwindcss` and its dependencies. + +```bash +npm install tailwindcss @tailwindcss/postcss postcss +``` + +### 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": { + "@/*": ["./src/*"] + } + } +} +``` + +### Run the CLI + +Run the `shadcn` init command to setup your project: + +```bash +npx shadcn@canary init -d +``` + +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. + +```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="app/routes/index.tsx" showLineNumbers {1,6} +import { Button } from "@/components/ui/button" + +function Home() { + const router = useRouter() + const state = Route.useLoaderData() + + return ( +
+ +
+ ) +} +``` + + + +## Basic Starter + +The [Basic Starter](https://tanstack.com/start/latest/docs/framework/react/examples/start-basic) template has Tailwind v3 already configured. + + + +### Run the CLI + +Run the `shadcn` init command to setup your project: + +```bash +npx shadcn@canary init -d +``` + +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. + +```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="app/routes/index.tsx" showLineNumbers {1,6} +import { Button } from "@/components/ui/button" + +function Home() { + const router = useRouter() + const state = Route.useLoaderData() + + return ( +
+ +
+ ) +} +``` + + diff --git a/packages/shadcn/src/utils/frameworks.ts b/packages/shadcn/src/utils/frameworks.ts index 7ef82c9928..e1bb218cd0 100644 --- a/packages/shadcn/src/utils/frameworks.ts +++ b/packages/shadcn/src/utils/frameworks.ts @@ -47,6 +47,14 @@ export const FRAMEWORKS = { tailwind: "https://tailwindcss.com/docs/guides/laravel", }, }, + "tanstack-start": { + name: "tanstack-start", + label: "TanStack Start", + links: { + installation: "https://ui.shadcn.com/docs/installation/tanstack", + tailwind: "https://tailwindcss.com/docs/installation/using-postcss", + }, + }, gatsby: { name: "gatsby", label: "Gatsby", diff --git a/packages/shadcn/src/utils/get-project-info.ts b/packages/shadcn/src/utils/get-project-info.ts index 3c1b1cacf7..753163e0f3 100644 --- a/packages/shadcn/src/utils/get-project-info.ts +++ b/packages/shadcn/src/utils/get-project-info.ts @@ -50,7 +50,7 @@ export async function getProjectInfo(cwd: string): Promise { aliasPrefix, packageJson, ] = await Promise.all([ - fg.glob("**/{next,vite,astro}.config.*|gatsby-config.*|composer.json", { + fg.glob("**/{next,vite,astro,app}.config.*|gatsby-config.*|composer.json", { cwd, deep: 3, ignore: PROJECT_SHARED_IGNORE, @@ -116,6 +116,17 @@ export async function getProjectInfo(cwd: string): Promise { return type } + // TanStack Start. + if ( + configFiles.find((file) => file.startsWith("app.config."))?.length && + Object.keys(packageJson?.dependencies ?? {}).find((dep) => + dep.startsWith("@tanstack/start") + ) + ) { + type.framework = FRAMEWORKS["tanstack-start"] + return type + } + // Vite. // Some Remix templates also have a vite.config.* file. // We'll assume that it got caught by the Remix check above.