125k

ブロック

Next

コンポーネントをブロック ライブラリに提供します。

ブロック ライブラリ に貢献するコミュニティを募集しています。コンポーネントとブロックを他の開発者と共有し、高品質で再利用可能なコンポーネントのライブラリの構築に役立ちます。

アプリケーション、マーケティング、製品など、あらゆる種類のブロックを見てみたいと思っています。

ワークスペースをセットアップする

リポジトリをフォークする

git clone https://github.com/shadcn-ui/ui.git

新しいブランチを作成する

git checkout -b username/my-new-block

依存関係をインストールする

pnpm install

開発サーバーを起動します

pnpm www:dev

ブロックを追加する

ブロックは、単一のコンポーネント (例: ui コンポーネントのバリエーション)、または複数のコンポーネント、フック、ユーティリティを含む複合コンポーネント (例: ダッシュボード) の場合があります。

新しいブロックを作成する

apps/www/registry/new-york/blocks ディレクトリに新しいフォルダーを作成します。フォルダーの名前がケバブケースで、new-york の下にあることを確認してください。

apps
└── www
    └── registry
        └── new-york
            └── blocks
                └── dashboard-01

ブロック ファイルを追加します

ファイルをブロック フォルダーに追加します。以下は、ページ、コンポーネント、フック、ユーティリティを含むブロックの例です。

dashboard-01
└── page.tsx
└── components
    └── hello-world.tsx
    └── example-card.tsx
└── hooks
    └── use-hello-world.ts
└── lib
    └── format-date.ts

ブロックをレジストリに追加します

ブロック定義を registry-blocks.tsx に追加します。

ブロックをレジストリに追加するには、ブロック定義を registry-blocks.ts に追加する必要があります。

これは、[https://ui.shadcn.com/schema/registry-item.json](https://ui.shadcn.com/schema/registry-item.json] のレジストリ スキーマに従います。

apps/www/registry/registry-blocks.tsx
export const blocks = [
  // ...
  {
    name: "dashboard-01",
    author: "shadcn (https://ui.shadcn.com)",
    title: "Dashboard",
    description: "A simple dashboard with a hello world component.",
    type: "registry:block",
    registryDependencies: ["input", "button", "card"],
    dependencies: ["zod"],
    files: [
      {
        path: "blocks/dashboard-01/page.tsx",
        type: "registry:page",
        target: "app/dashboard/page.tsx",
      },
      {
        path: "blocks/dashboard-01/components/hello-world.tsx",
        type: "registry:component",
      },
      {
        path: "blocks/dashboard-01/components/example-card.tsx",
        type: "registry:component",
      },
      {
        path: "blocks/dashboard-01/hooks/use-hello-world.ts",
        type: "registry:hook",
      },
      {
        path: "blocks/dashboard-01/lib/format-date.ts",
        type: "registry:lib",
      },
    ],
    categories: ["dashboard"],
  },
]

名前、説明、タイプ、registryDependency、依存関係、ファイル、およびカテゴリを必ず追加してください。これらのそれぞれについては、スキーマ ドキュメント (近日公開予定) で詳しく説明します。

ビルド スクリプトを実行する

pnpm registry:build

ブロックを表示する

ビルド スクリプトが完了すると、http://localhost:3333/blocks/[CATEGORY] でブロックを表示するか、http://localhost:3333/view/styles/new-york/dashboard-01 で全画面プレビューを表示できます。

ブロックのプレビュー

ブロックを構築する

これで、ブロック フォルダー内のファイルを編集し、ブラウザーで変更を表示することで、ブロックを構築できるようになります。

さらにファイルを追加する場合は、必ずブロック定義の files 配列に追加してください。

ブロックを公開する

ブロックを公開する準備ができたら、メイン リポジトリにプルリクエストを送信できます。

ビルド スクリプトを実行する

pnpm registry:build

スクリーンショットをキャプチャする

pnpm registry:capture

プルリクエストを送信する

変更をコミットし、メイン リポジトリにプルリクエストを送信します。

あなたのブロックはレビューされ、マージされます。マージされると、Web サイトに公開され、CLI 経由でインストールできるようになります。

カテゴリ

categories プロパティは、レジストリ内のブロックを整理するために使用されます。

カテゴリを追加する

新しいカテゴリを追加する必要がある場合は、それを apps/www/registry/registry-categories.ts の registryCategories 配列に追加します。

apps/www/registry/registry-categories.ts
export const registryCategories = [
  // ...
  {
    name: "Input",
    slug: "input",
    hidden: false,
  },
]

ガイドライン

ブロック ライブラリに貢献する際に従うべきガイドラインをいくつか示します。

  • ブロック定義には次のプロパティが必要です: name、description、type、files、および categories。
  • 必ずすべてのレジストリ依存関係を registryDependencies にリストしてください。レジストリの依存関係は、レジストリ内のコンポーネントの名前です。 input、button、cardなど
  • 必ずすべての依存関係を dependencies にリストしてください。依存関係は、レジストリ内のパッケージの名前です。 zod、sonnerなど
  • ブロックにページ (オプション) がある場合、それは files 配列の最初のエントリであり、target プロパティを持つ必要があります。これは、CLI がファイルベースのルーティングの正しい場所にページを配置するのに役立ちます。
  • インポートでは常に @/registry パスを使用する必要があります。 例: import { Input } from "@/registry/new-york/input"