MDX 詳解
Shadcn UIを使う
1
npmパッケージをインストールします。以下のコマンドを、プロジェクトのルートで実行してください。
Shell
2
componentsディレクトリを作成し、lib/utils.tsを作成します
src/components/lib/utils.ts
3
使いたいコンポーネントをコピーします。
shadcn/uiのコンポーネントのページから、 “Manual” タブの手順に従います。
たとえばButtonであれば、
- 追加のパッケージをインストール
Shell
- コンポーネントをコピーする。
lib/util
や 他のコンポーネントのインポートを相対パスに書き換えないといけないので注意する。
現在のバージョン (v0.1.x) では、shadcn/uiでセットアップするカスタムカラースキーマ (bg-primary, text-primary-foregroundなど) に対応していません。
そのため、コンポーネントのスタイルのうち、カスタムカラースキーマに関する部分は手動で書き換えてください。 例: bg-primary -> bg-zinc-900
近日中のアップデートでこの問題を解決します!
src/components/button.tsx
4
mdxファイルでコンポーネントを使う。
index.mdx