shadcnを使用してみる

目的

プロジェクトでTailwind CSSを使用することになったが、Tailwindのみだとstate周りがつらいのでRadix UIを使うことにした。
shadcnであればコピペでTailwind+Radixのコンポーネントサンプルを使用することができるそうなので、使用方法を確認してみた。

インストール～コンポーネントの使用

参照：
Introduction - shadcn/ui

• ドキュメントのIntroductionより

Radix UIとTailwind CSSを使用して構築された再利用可能なコンポーネントです。
これはコンポーネントライブラリではありません。あなたのアプリにコピー＆ペーストできる再利用可能なコンポーネントのコレクションです。
コンポーネントライブラリではないとはどういう意味ですか？依存関係としてインストールしないという意味です。npm経由で利用することも、配布することもできません。
必要なコンポーネントを選んでください。コードをコピーしてプロジェクトに貼り付け、必要に応じてカスタマイズする。コードはあなたのものだ。

CLIで下記コマンドを叩くと、関連ライブラリがインストールされ、必要なファイルが作成される。

npx shadcn-ui@latest init

あとはshadcnに用意されているコンポーネントで、使用したいものをCLIで操作すると、/components/ディレクトリ配下にコンポーネントがインストールされる。

npx shadcn-ui@latest add [Component]

インストールされたコンポーネントのvariantやCSSを修正して、プロジェクト内のコンポーネントとして使用する。

また、components.jsonのaliasesを変更することで、管理するディレクトリの変更ができる。

{
  ～省略～
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}