125k

TanStack Router

PreviousNext

TanStack Router 用に shadcn/ui をインストールして構成します。

プロジェクトの作成

まず、新しい TanStack Router プロジェクトを作成します:

pnpm create tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn

コンポーネントの追加

これで、プロジェクトへのコンポーネントの追加を開始できます。

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>
      <Button>Click me</Button>
    </div>
  )
}