Protagram

shadcn/uiの導入方法

公開日:2024年5月29日 更新日:2024年9月8日
programming
JavaScriptTypeScript

shadcn/uiとは

shadcn/uiの導入方法

今回はnext.jsに導入してみる

https://ui.shadcn.com/docs/installation/next

ドキュメントに全部書いているが一応。

npx shadcn-ui@latest init
Need to install the following packages:
shadcn-ui@0.8.0
Ok to proceed? (y) 
✔ 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
  • src/lib/utils.ts

の2つのファイルが追加された。

そして以下が変更された

src/app/globals.css

tailwind.config.ts

package.json

package-lock.json

まずpackage.jsonに以下が追加された。

    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-react": "^0.379.0",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7"

globals.cssとtailwind.config.tsは上書きされる。

tailwind.config.tsのcontentの部分はsrc階層を無視して上書きされていたので前の記述に戻した。

    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",

navigation-menuで感じた使いにくさ。

npx shadcn-ui@latest add navigation-menu

これとか実行すると勝手にpackageに

"@radix-ui/react-navigation-menu": "^1.1.4",

が追加されてた。

uiが追加されるだけかと思いきやめちゃ他のパッケージに依存してる。

なんか使いにくい。

error

Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error

In HTML,

cannot be a descendant of

. This will cause a hydration error.

...
  <CardDescription>
    <p>
        <div>

実際のコード

       <CardDescription className="flex">
          <div>test</div>
        </CardDescription>

CardDescriptionはpタグが使われているのでその中でdivは使えないとか。

どこぞのコンポーネントがpタグで作らててるとかパッと見わからんし、vueではこういうことでは怒られないのでなんかストレス。

普通にcss当てるだけでいいdaisyUIの方がやっぱり楽でいい。