【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を実装した際に、コンポーネントが表示されない事象が発生しま ...
【Ruby on Railsチュートリアル】第3章で出てきたテストとは何か
Ruby on Railsチュートリアル第3章のテストについて、完全に独学の初心 ...
Git,Githubの使い方まとめ
Gitを使ったソースのバージョン管理を初心者がまとめてみます。
rustlingsの回答で学ぶプログラミング言語Rust
Rustlingsの回答(1~20)
【スマホゲーム開発#2】VSCodeでUnityのスニペットが使えるようにする
Unityエディタ上からVSCodeを開いてコード編集をする時、Unityのスニ ...
ディスカッション
コメント一覧
まだ、コメントがありません