-
Notifications
You must be signed in to change notification settings - Fork 5.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(shadcn): add support for TanStack Start (#6507)
* feat(shadcn): add TanStack Start support * docs(www): add docs for TanStack Start * chore: changeset
- Loading branch information
Showing
6 changed files
with
222 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "shadcn": minor | ||
| --- | ||
|
|
||
| add support for TanStack Start |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,181 @@ | ||
| --- | ||
| title: TanStack Start | ||
| description: Install and configure TanStack Start. | ||
| --- | ||
|
|
||
| <Callout> | ||
| **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`. | ||
| </Callout> | ||
|
|
||
| ## TanStack Start + Tailwind v4 | ||
|
|
||
| <Steps> | ||
|
|
||
| ### 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 ( | ||
| <div> | ||
| <Button>Click me</Button> | ||
| </div> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| </Steps> | ||
|
|
||
| ## Basic Starter | ||
|
|
||
| The [Basic Starter](https://tanstack.com/start/latest/docs/framework/react/examples/start-basic) template has Tailwind v3 already configured. | ||
|
|
||
| <Steps> | ||
|
|
||
| ### 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 ( | ||
| <div> | ||
| <Button>Click me</Button> | ||
| </div> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| </Steps> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters