【Next.js】shadcn-uiを使ってUIを簡単実装する
shadcn-ui(シャッドシーエヌユーアイ)は、アプリにコンポーネントを貼り付けるだけで簡単にUIを実装することができるOSSです。
shadcn-uiはパッケージではないため、npmなどのパッケージ管理ツールを使ってインストールする性質のものではありません。
上記の通り、コンポーネントをソースにペーストして使うことになります。
shadcn-uiのセットアップ
Next.jsを使用したプロジェクトに組み込む場合、以下のコマンドで初期設定します。
npx shadcn-ui@latest init
すると、いくつか質問されるので、自身のプロジェクトに合わせて選択します。
Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes
例えば、Buttonを実装してみる
初期設定が終わったら、とりあえず何か実装してみます。
ボタンを表示するためには、以下のように、まずはプロジェクトに対して組み込みをおこないます。
npx shadcn-ui@latest add button
すると以下のように@/components/uiディレクトリが作成され、Buttonコンポーネントが組み込まれます。
あとは、ソースにコンポーネントをペーストするだけで使えるようになります。
import { Button } from "@/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}
このように簡単にデザイン済のボタンを実装することができました。
shadcn-uiはカスタマイズも可能なので、それはまた別記事にしたいと思います。
関連記事
Uncaught Error: invariant expected app router to be mountedの対処法【Next.js】
App Routingを実装した際に、コンポーネントが表示されない事象が発生しま ...
【DockerCompose】Herokuコンテナデプロイとマイグレーション
こちらの記事ではHerokuにコンテナをデプロイ、また、マイグレーションを行う手 ...
SSLとは?SSLの働きについて理解を深めよう
そもそもSSLって何なのでしょうか? SSLはプロトコルの一種で、OSI参照モデ ...
IT企業は残業が多い?解消に向けた取り組みを紹介します
仕事には『問題』が付き物です。そして、その問題から『課題』が生まれます。 課題に ...
【Ruby】ハッシュの作成とキーワード引数を持つメソッドの作成
ここで学べるテーマは以下の通りです。Rubyにおけるハッシュの作り方 キーワード ...
ディスカッション
コメント一覧
まだ、コメントがありません