はじめに

shadcnを触ってみたので、備忘録として書いていきます。

shadcnとは

shadcn/ui はReact の UI コンポーネントライブラリ Radix UI とTailwind CSS をベースに利用した再利用可能なコンポーネントのコレクションです。

ライブラリではなくツールなので、使いたいUIをインストールして、カスタマイズすることで使用することができます。

以下のReact をサポートする任意のフレームワークを使用できます。
Next.js、Astro、Remix、Gatsbyなど

今回はViteを使用したプロジェクトを作成します。

以下のサイトを参考にしました。

以下の2つのコマンドで、TailwindCSSをインストールして、
tailwind.config.jsファイルを生成します

パスを解決するために、tsconfig.jsonを以下のように編集します。

アプリがエラーなしでパスを解決できるように、次のコードを vite.config.ts に追加します。

init コマンドを実行してshadcn-uiプロジェクトをセットアップします。

これで、プロジェクトへのコンポーネントの追加を開始できるようになりました。
試しに、ボタンをインストールして使ってみます。

以下のようにボタンが表示されるはずです！

スクリーンショット 2024-01-27 0.06.36.png

他にも色々な記事を書いているので、よければ読んでいってください、、、

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。