Open6
shadcn/ui について
ピン留めされたアイテム
shadcn/ui の導入について
tailwindcssがinstallされていない場合は、install & 初期セットアップする
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
その他、詳細手順はこちら💁
shadcn/uiの初期セットアップ
npx shadcn@latest init
npx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ 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? › Slate
✔ Would you like to use CSS variables for theming? … no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.js
✔ Updating src/styles/globals.css
✔ Installing dependencies.
✔ Created 1 file:
- src/lib/utils.ts
Success! Project initialization completed.
You may now add components.
shadcn/ui について
-shadcn/uiは、2023 JavaScript Rising StarsのReact Ecosystemで1位を獲得した今注目のUIコンポーネント集です。
- これまでのUIコンポーネント違うのはライブラリとして導入するのではなく、コピー&ペースとして使うことを特徴としています。
shadcn/ui を install
npx shadcn-ui@latest init
選択肢のLog
npx shadcn-ui@latest init
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Would you like to use CSS variables for colors? … no / yes
✔ Writing components.json...
✔ Initializing project...
✔ Installing dependencies...
Success! Project initialization completed. You may now add components.
components.json が生成される
components.json
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
参考・引用
shadcn/ui テーマカラー
shadcn/uiコンポーネントのインポート先ディレクトリを変更する方法
components.jsonの設定値について
shadcn add コマンドを使って v0 で作成したコンポーネントを追加する