知らないとやばい💦最強のUIライブラリであるshadcn/uiの導入(メリット、デメリットも解説)

shadcn-uiとは?

ReactやNext.jsなどで使われるUIライブラリです。
公式ドキュメントなどを見てもらうとわかるのですが、いちいち0からスタイリングする必要ないメリットがあります。状況によってTailwindなどでスタイリングすることも可能です。
極端に言うとコピペでも使えてしまうようなライブラリです。

公式ドキュメント

https://ui.shadcn.com/docs

導入

以下のコマンドで導入できます。

npx shadcn@latest init

これでshadcn-uiを導入できます。
ベースカラーを今回Slateにしたのですが、状況によって変えてください。

コンポーネント

buttonなら

npx shadcn@latest add button

inputなら

npx shadcn@latest add button

他にもFormやDialog、Select、Card、Tabs、Tableなども同じやり方でできます。

全部入れるコマンド

npx shadcn@latest add --all

このコマンドを実行したら不要な時に消していけばいいです。

便利なコマンド入力

npx shadcn@latest add      

でエンターを押すと画像みたいにどのコンポーネントを使うのかを選べるようになります。

これをやるとcomponents/ui/*****.tsxが作成されていると思います。
dashboardの中にログインボタンを作っていました。

src/app/(dashboard)/dashboard/page.tsx

import { Button } from '@/components/ui/button'
import Link from 'next/link' 

const DashboardPage = () => {
    return (
        <div className="flex flex-col items-center justify-center h-screen">
            <Button>
                <Link href={'/login'}>ログインへ</Link>
            </Button>
        </div>
        );
}

export default DashboardPage

スタイリングはTailwind CSSなどでできます。

src/app/(dashboard)/dashboard/page.tsx

import { Button } from '@/components/ui/button'
import Link from 'next/link' 

const DashboardPage = () => {
    return (
        <div className="flex flex-col items-center justify-center h-screen">
            <Button className="bg-emerald-500 text-white p-10 rounded-md">
                <Link href={'/login'}>ログインへ</Link>
            </Button>
        </div>
        );
}

export default DashboardPage

shadcn/uiのデメリット

1. 導入して運用していく上でメンテナンスのコストがかかってしまうのがデメリットです。
   アップデート対応を自分たちで運用(回す)する必要があります。
   アップデートの対応をしたからと言ってサービスの売上向上につながらなかったりします。開発効率は高いけどメンテナンスではデメリットかなと個人的に思います。

2. Tailwind CSSに依存しているので、CSSはTailwind CSSにしなければいけないみたいです。Tailwindに慣れていない人だと苦戦するかなと思います。Tailwindに慣れていない人ばかりだと開発のキャッチアップ速度が落ちてしまうリスクがあります。

解説動画

今までで1番最高なUIコンポーネントかもしれません【shadcn/ui入門】