✨
知らないとやばい💦最強のUIライブラリであるshadcn/uiの導入(メリット、デメリットも解説)
shadcn-uiとは?
ReactやNext.jsなどで使われるUIライブラリです。
公式ドキュメントなどを見てもらうとわかるのですが、いちいち0からスタイリングする必要ないメリットがあります。状況によってTailwindなどでスタイリングすることも可能です。
極端に言うとコピペでも使えてしまうようなライブラリです。
公式ドキュメント
導入
以下のコマンドで導入できます。
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の中にログインボタンを作っていました。
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などでできます。
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のデメリット
-
導入して運用していく上でメンテナンスのコストがかかってしまうのがデメリットです。
アップデート対応を自分たちで運用(回す)する必要があります。
アップデートの対応をしたからと言ってサービスの売上向上につながらなかったりします。開発効率は高いけどメンテナンスではデメリットかなと個人的に思います。 -
Tailwind CSSに依存しているので、CSSはTailwind CSSにしなければいけないみたいです。Tailwindに慣れていない人だと苦戦するかなと思います。Tailwindに慣れていない人ばかりだと開発のキャッチアップ速度が落ちてしまうリスクがあります。
Discussion