Astro に shadcn/ui を導入するメモ

& npm create astro@latest

チュートリアルに沿って作ってた Astro のアプリに shadcn/ui を導入するメモ

KiKiKi KiKi

チュートリアルに従い Run the CLI を実行

$ npx shadcn@latest init
Need to install the following packages:
shadcn@2.5.0
Ok to proceed? (y) y

npm warn deprecated node-domexception@1.0.0: Use your platform's native DOMException instead
✔ Preflight checks.
✔ Verifying framework. Found Astro.
✖ Validating Tailwind CSS.
✔ Validating import alias.

Tailwind が必要っぽい

KiKiKi KiKi

既にある Astro のプロジェクトに Tailwind を追加する

どのパッケージをインストールしてよいのか分からなかったので Astro のドキュメントにあったコマンドを実行する

$ npx astro add tailwind
✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭────────────────────────────────────────────────────╮
 │ npm i @tailwindcss/vite@^4.1.4 tailwindcss@^4.1.4  │
 ╰────────────────────────────────────────────────────╯

? Continue? › (Y/n)
  # Y を選択
✔ Continue? … yes
✔ Installing dependencies...
  Astro will scaffold ./src/styles/global.css.

? Continue?  › (Y/n)
  # Y を選択
  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ // @ts-check                                  │
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import tailwindcss from '@tailwindcss/vite';  │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   output: 'static',                           │
 │                                               │
 │   vite: {                                     │
 │     plugins: [tailwindcss()],                 │
 │   },                                          │
 │ });                                           │
 ╰───────────────────────────────────────────────╯

? Continue? › (Y/n)
  # Y を選択
   success  Added the following integration to your project:
  - tailwind
   action required  You must import your Tailwind stylesheet, e.g. in a shared layout:
 ╭ src/layouts/Layout.astro ─────────╮
 │ ---                               │
 │ import './src/styles/global.css'  │
 │ ---                               │
 ╰───────────────────────────────────╯

astro.config.mjs に設定が追加され /src/styles/global.css が生成された
/src/pages/index.astro に global.css を読み込ませる

/src/pages/index.astro

---
+ import '../styles/global.css';
- 
---

npm run dev をして表示されたサイトで global.css が問題なく読み込まれているようだった

📝 Memo

KiKiKi KiKi

改めて shadcn ui を導入する

チュートリアルに従う

$ npx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Astro.
✔ Validating Tailwind CSS config. Found v4.
✔ Validating import alias.
✔ Which color would you like to use as the base color? › Neutral
✔ Writing components.json.
✔ Checking registry.
✔ Updating CSS variables in src/styles/global.css
✔ Installing dependencies.
✔ Created 1 file:
  - src/lib/utils.ts

Success! Project initialization completed.
You may now add components.

無事コマンドが通った

package.json に色々とライブラリが追加されている
components.json が作成された
/src/lib/utils.ts が作成された

Button を追加してみる

これもチュートリアルのまま

$ npx shadcn@latest add button
✔ Checking registry.
✔ Installing dependencies.
✔ Created 1 file:
  - src/components/ui/button.tsx

src/components/ui/button.tsx が生成されたので、src/pages/index.astro に追加する

src/pages/index.astro

---
import '@/styles/global.css';
import { Button } from '@/components/ui/button';
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1>Astro</h1>
   <Button>Button</Button>
  </body>
</html>

🚀 表示を確認

$ npm run dev

エラーになってた

KiKiKi KiKi

Astro に react を追加する

$ npx astro add react
✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭────────────────────────────────────────────────────╮
 │ npm i @astrojs/react@^4.2.5 @types/react@^19.1.2   │
 │ @types/react-dom@^19.1.2 react@^19.1.0             │
 │ react-dom@^19.1.0                                  │
 ╰────────────────────────────────────────────────────╯

╭ astro.config.mjs ─────────────────────────────╮
 │ // @ts-check                                  │
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import tailwindcss from '@tailwindcss/vite';  │
 │                                               │
 │ import react from '@astrojs/react';           │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   output: 'static',                           │
 │                                               │
 │   vite: {                                     │
 │     plugins: [tailwindcss()],                 │
 │   },                                          │
 │                                               │
 │   integrations: [react()],                    │
 │ });                                           │
 ╰───────────────────────────────────────────────╯
✔ Continue? … yes
  
   success  Added the following integration to your project:
  - @astrojs/react

  Astro will make the following changes to your tsconfig.json:
 ╭ tsconfig.json ──────────────────────────╮
 │ ...                                     │
 │     },                                  │
 │     "jsx": "react-jsx",                 │
 │     "jsxImportSource": "react"          │
 │   }                                     │
 │ }                                       │
 ╰─────────────────────────────────────────╯

Continue? … yes
   success  Successfully updated TypeScript settings

🚀 表示を確認

$ npm run dev

🎉 shadcn ui のコンポーネントが表示された 🎉