Node.jsのインストール
node -v
上記でnode.jsのバージョンを確認します。バージョンが表示されない場合は以下からインストールします。
Next.jsのプロジェクト作成
npx create-next-app@13 shadcnui-app
上記を実行後、以下のように設定します。
重要な箇所は、「Tailwind CSS」の箇所です。shadcn/uiはtailwind cssを利用するため、yesと設定します。
上記が完了したら作成したshadcnui-appに移動し、サーバーを起動します。
cd shadcnui-app
npm i
npm run dev
以下のようになればNext.jsの準備は完了です。
shadcn/uiの導入
npx shadcn@latest init
上記を実行後、以下のように設定します。
これでshadcn/uiの導入は完了です。
コンポーネントをインストールしてみましょう。
コンポーネントのインストール
インストールするコンポーネントは何でもいいです。本記事ではaccordionをインストールします。
npx shadcn@latest add accordion
上記を実行するとcomponentsディレクトリ配下にuiフォルダが作成され、その中にアコーディオンで必要なshadcn/uiのコードが自動で格納されます。
page.tsxでアコーディオンを使っていきます。
page.tsx
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>こんにちはアコーディオン</AccordionTrigger>
<AccordionContent>どうもどうも、アコーディオンです</AccordionContent>
</AccordionItem>
</Accordion>
</main>
);
}
実行画面
以上で完了です。他にもコンポーネントは複数あるため、ぜひ使ってみてください。
おまけ
個人的にshadcn/uiはとても気に入っています。
理由としては何といってもtailwind cssでカスタマイズが効く点です。
UIコンポーネントライブラリのデメリットとしてUIのカスタマイズがそこまで柔軟ではないことが挙げられると思います。
shadcn/uiはこの点を払拭てくれたので感謝です。
また、UIコンポーネントライブラリとして有名なMaterial UIやchakura UIと比較しnpm依存が少なく軽量です。
まだ多くのサービスで使われているわけではないと思いますが、今後も目が離せないライブラリの一つですね★