113k
New

TanStack Start

PreviousNext

安装并配置 shadcn/ui 以用于 TanStack Start。

选择符合你起点的设置。

使用 shadcn/create

构建你的预设并生成 TanStack 项目命令。

使用 CLI

从终端搭建一个新的 TanStack 项目。

现有项目

在现有的 TanStack 项目中手动配置 shadcn/ui。

使用 shadcn/create

构建你的预设

打开 shadcn/create 并以可视化方式构建你的预设。选择你的风格、颜色、字体、图标等。

打开 shadcn/create

创建项目

点击 Create Project，选择你的包管理器，并复制生成的命令。

生成的命令将类似于这样：

pnpm dlx shadcn@latest init --preset [CODE] --template start

确切命令将包含你选择的选项，例如 --base、--monorepo 或 --rtl。

添加组件

将 Card 组件添加到你的项目：

pnpm dlx shadcn@latest add card

如果你创建了 monorepo，请从 apps/web 运行命令或从仓库根目录指定工作区：

pnpm dlx shadcn@latest add card -c apps/web

上面的命令会将 Card 组件添加到你的项目。然后你可以像这样导入它：

src/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router"
 
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
export const Route = createFileRoute("/")({
  component: App,
})
 
function App() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Project Overview</CardTitle>
        <CardDescription>
          Track progress and recent activity for your TanStack Start app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}

如果你创建了 monorepo，请更新 apps/web/src/routes/index.tsx 并改为从 @workspace/ui/components/card 导入。

使用 CLI

创建项目

运行 init 命令来搭建一个新的 TanStack Start 项目。按照提示配置你的项目：base、preset、monorepo 等。

pnpm dlx shadcn@latest init -t start

对于 monorepo 项目，使用 --monorepo 标志：

pnpm dlx shadcn@latest init -t start --monorepo

添加组件

将 Card 组件添加到你的项目：

pnpm dlx shadcn@latest add card

如果你创建了 monorepo，请从 apps/web 运行命令或从仓库根目录指定工作区：

pnpm dlx shadcn@latest add card -c apps/web

上面的命令会将 Card 组件添加到你的项目。然后你可以像这样导入它：

src/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router"
 
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
export const Route = createFileRoute("/")({
  component: App,
})
 
function App() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Project Overview</CardTitle>
        <CardDescription>
          Track progress and recent activity for your TanStack Start app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}

如果你创建了 monorepo，请更新 apps/web/src/routes/index.tsx 并改为从 @workspace/ui/components/card 导入。

现有项目

创建项目

如果你需要一个新的 TanStack Start 项目，请先创建一个。否则，跳过此步骤。

pnpm dlx @tanstack/cli@latest create

选择 TanStack Start、React 框架和推荐的默认值，以便为你配置 Tailwind CSS 和 @/* 导入别名。

TanStack CLI 已经为你配置了 Tailwind CSS 和默认的 @/* 导入别名。如果你要将 shadcn/ui 添加到较旧或自定义的 TanStack Start 应用中，请确保在继续之前两者都已配置。

运行 CLI

运行 shadcn init 命令在你的项目中设置 shadcn/ui。

pnpm dlx shadcn@latest init

添加组件

你现在可以开始向项目添加组件了。

pnpm dlx shadcn@latest add button

上面的命令会将 Button 组件添加到你的项目中。然后可以这样导入它：

src/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router"
 
import { Button } from "@/components/ui/button"
 
export const Route = createFileRoute("/")({
  component: App,
})
 
function App() {
  return (
    <div className="flex min-h-svh items-center justify-center p-6">
      <Button>Click me</Button>
    </div>
  )
}