shadcn/uiとは
shadcn/uiはReact + Tailwind CSS環境で利用できるコンポーネントライブラリです。
shadcn/uiを使用すれば視覚的に美しいUIコンポーネントと柔軟性の高いデザインのWebサイトが作成できます。
shadcn/uiの読み方
shadcn/uiの読み方は「シャドシーエヌ」です。
日本だけでなく欧米でもこの読み方をしている人が多数で、多くの人は語尾の「ユーアイ」の部分までは読みません。
ドキュメント通りにViteを設定するとエラーになる
shadcn/uiの公式サイトにはViteでのインストールおよび設定方法が記載されています。
しかし、設定の手順について間違っている箇所があるため、ドキュメント通りにインストールしようとしてもエラーになってインストールできません。
shadcn/uiの正しい設定手順
最初にViteを以下のコマンドでインストールしてください。
npm create vite@latest my-shadcn-ui -- --template react-swc-ts
cd my-shadcn-ui
npm installインストールしたら、tailwindcss postcss autoprefixer @types/nodeをインストールしてください。
npx tailwindcss init -p を実行するとtailwind.config.jsとpostcss.config.jsが生成されます。
npm i -D tailwindcss postcss autoprefixer @types/node
npx tailwindcss init -ptailwind.config.jsが生成されたらtailwind.config.js内のcontentにTailwind CSSを適用したいファイルのパスを指定してください。
shadcn/uiはTailwind CSSを使用しているので、適用したいファイルのパスを記載しないと適用されません。
/** @type {import('tailwindcss').Config} */
export default {
// Tailwindを適用したいファイルのパス
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}また、index.cssにはTailwind CSSを読み込むための以下のコードを書いてください。
shadcn/uiはTailwind CSSを使用しているので、@tailwindでCSSを読み込まないと使用できません。
@tailwind base;
@tailwind components;
@tailwind utilities;次に '@' のエイリアスを追加するのですが、公式サイトのドキュメントだと「import react from "@vitejs/plugin-react"」となっているため、SWC (stands for Speedy Web Compiler)を使用している場合はそのままコピーしてはいけません。
import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
})tsconfig.jsonとtsconfig.app.jsonのcompilerOptionsのbaseUrlとpathsを追加します。
間違えてtsconfig.node.jsonを修正しないように注意してください。
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
},
// 以降は同じ設定
}最後にnpx shadcn@latest initを実行して、shadcn/uiで使用するスタイルなどの設定を行います。
3つほど聞かれますが、初回はすべてEnterキーを押してデフォルト設定で問題ありません。
npx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Vite.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Neutral
✔ Would you like to use CSS variables for theming? … no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.js
✔ Updating src/index.css
✔ Installing dependencies.
✔ Created 1 file:
- src/lib/utils.ts
Success! Project initialization completed.
You may now add components.index.cssの@tailwindの読み込みが書かれていないと以下のエラーが発生します。
shadcn/uiのインストール手順で、「Validating Tailwind CSS.」のエラーを発生させてしまうケースが多いので、index.cssに@tailwindを書き忘れないよう注意が必要です。
npx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Vite.
✖ Validating Tailwind CSS.
✔ Validating import alias.
No Tailwind CSS configuration found at /Users/workspace/my-shadcn-ui.
It is likely you do not have Tailwind CSS installed or have an invalid configuration.
Install Tailwind CSS then try again.
Visit https://tailwindcss.com/docs/guides/vite to get started.Buttonコンポーネントを読み込む
ここまで完了したらshadcn/uiが使える状態になっているので、早速Buttonコンポーネントを読み込んで使用してみましょう。
まず、以下のコマンドでButtonコンポーネントを読み込みます。
npx shadcn@latest add buttonあとはApp.tsxを以下のように書き換えれば、Buttonコンポーネントの表示を確認できます。
import { Button } from "@/components/ui/button"
export default function App() {
return (
<div>
<Button onClick={() => alert('Hello!')}>Click</Button>
</div>
)
}
ほかのコンポーネントもインストールしてimportするだけで使えますので、色々試してみてください。
