Frontend Template

React + TanStack Router + Tailwind CSS + shadcn/ui のフロントエンドテンプレート

Tech Stack

• Framework: React 19
• Router: TanStack Router
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui (New York style)
• Build Tool: Vite
• Linter/Formatter: Biome
• Package Manager: pnpm

Getting Started

# 依存関係のインストール
pnpm install

# 開発サーバーの起動
pnpm dev

# ビルド
pnpm build

# プレビュー
pnpm preview

Scripts

Script	Description
pnpm dev	開発サーバーを起動
pnpm build	プロダクションビルド
pnpm preview	ビルド結果をプレビュー
pnpm check	Biome でコードチェック
pnpm check/fix	Biome でコードを自動修正
pnpm ci	CI 用の Biome チェック
pnpm tsr	TanStack Router のルート生成

Directory Structure

src/
├── components/
│   ├── layout/     # レイアウトコンポーネント
│   └── ui/         # shadcn/ui コンポーネント
├── lib/            # ユーティリティ関数
├── routes/         # TanStack Router ルート
├── index.css       # グローバルスタイル
└── main.tsx        # エントリーポイント

Adding shadcn/ui Components

pnpm dlx shadcn@latest add <component-name>

Environment Variables

環境変数は .env.local に設定してください。.env.local.example を参考にしてください。

クライアントサイドでアクセスする環境変数は VITE_ プレフィックスが必要です。