125k

Astro

PreviousNext

Astro 用の shadcn/ui をインストールして構成します。

開始地点に合うセットアップ方法を選択してください。

Use shadcn/create

プリセットを構築し、Astro プロジェクト コマンドを生成します。

Use the CLI

ターミナルから新しい Astro プロジェクトを直接作成します。

Existing Project

既存の Astro プロジェクトで shadcn/ui を手動構成します。

Use shadcn/create

プリセットを作成する

shadcn/createを開き、プリセットを視覚的に作成します。スタイル、色、フォント、アイコンなどを選択してください。

shadcn/create を開く

プロジェクトを作成する

Create Project をクリックし、パッケージ マネージャーを選択して、生成されたコマンドをコピーします。

生成されたコマンドは次のようになります。

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

正確なコマンドには、--base、--monorepo、--rtl などの選択したオプションが含まれます。

コンポーネントを追加する

プロジェクトに Card コンポーネントを追加します。

pnpm dlx shadcn@latest add card

モノレポを作成した場合は apps/web からコマンドを実行するか、リポジトリのルートからワークスペースを指定します。

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

上のコマンドで Card コンポーネントがプロジェクトに追加されます。次のようにインポートできます。

src/pages/index.astro
---
import Layout from "@/layouts/main.astro"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
---
 
<Layout>
  <Card className="max-w-sm">
    <CardHeader>
      <CardTitle>プロジェクト概要</CardTitle>
      <CardDescription>
        Astro アプリの進捗と最近のアクティビティを確認します。
      </CardDescription>
    </CardHeader>
    <CardContent>
      デザイン システムの準備ができました。次のコンポーネントの構築を始めましょう。
    </CardContent>
  </Card>
</Layout>

モノレポを作成した場合は apps/web/src/pages/index.astro を更新し、代わりに @workspace/ui/components/card からインポートします。apps/web/src/layouts/main.astro のモノレポ レイアウトでは、すでに @workspace/ui/globals.css がインポートされています。

Use the CLI

プロジェクトを作成する

init コマンドを実行して新しい Astro プロジェクトを作成します。プロンプトに従って、ベース、プリセット、モノレポなどを構成します。

pnpm dlx shadcn@latest init -t astro

モノレポ プロジェクトでは --monorepo フラグを使います。

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

コンポーネントを追加する

プロジェクトに Card コンポーネントを追加します。

pnpm dlx shadcn@latest add card

モノレポを作成した場合は apps/web からコマンドを実行するか、リポジトリのルートからワークスペースを指定します。

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

上のコマンドで Card コンポーネントがプロジェクトに追加されます。次のようにインポートできます。

src/pages/index.astro
---
import Layout from "@/layouts/main.astro"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
---
 
<Layout>
  <Card className="max-w-sm">
    <CardHeader>
      <CardTitle>プロジェクト概要</CardTitle>
      <CardDescription>
        Astro アプリの進捗と最近のアクティビティを確認します。
      </CardDescription>
    </CardHeader>
    <CardContent>
      デザイン システムの準備ができました。次のコンポーネントの構築を始めましょう。
    </CardContent>
  </Card>
</Layout>

モノレポを作成した場合は apps/web/src/pages/index.astro を更新し、代わりに @workspace/ui/components/card からインポートします。apps/web/src/layouts/main.astro のモノレポ レイアウトでは、すでに @workspace/ui/globals.css がインポートされています。

Existing Project

プロジェクトを作成する

新しい Astro プロジェクトが必要な場合は、先に作成します。既存のプロジェクトがある場合は、この手順を省略してください。

pnpm create astro@latest astro-app -- --template with-tailwindcss --install --add react --git

このコマンドで Tailwind CSS と React 統合が設定されます。古い Astro アプリやカスタム Astro アプリに shadcn/ui を追加する場合は、続行する前に両方が構成されていることを確認してください。

Tailwind スターターは、src/layouts/main.astro を通じてグローバル スタイルシートを読み込みます。そのレイアウトをそのまま維持するか、ページに @/styles/global.css がインポートされていることを確認してください。

tsconfig.json を編集する

プロジェクトに @/* エイリアスがすでに構成されている場合は、この手順を省略してください。

パスを解決するため、次のコードを tsconfig.json に追加します。

tsconfig.json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

CLI を実行する

shadcn の init コマンドを実行して、プロジェクトを設定します。

pnpm dlx shadcn@latest init

コンポーネントを追加する

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

pnpm dlx shadcn@latest add button

上のコマンドで Button コンポーネントがプロジェクトに追加されます。次のようにインポートできます。

src/pages/index.astro
---
import Layout from "@/layouts/main.astro"
import { Button } from "@/components/ui/button"
---
 
<Layout>
  <div class="grid h-screen place-items-center content-center">
    <Button>ボタン</Button>
  </div>
</Layout>