Open6

shadcn/ui について

ピン留めされたアイテム
まさぴょんまさぴょん

shadcn/ui の導入について

tailwindcssがinstallされていない場合は、install & 初期セットアップする

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

その他、詳細手順はこちら💁
https://tailwindcss.com/docs/guides/nextjs

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 について

https://ui.shadcn.com/

-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"
  }
}

参考・引用

https://ui.shadcn.com/

https://reffect.co.jp/react/shadcn-react