shadcn-ui-blocks

Hundreds of extra shadcn ui blocks & components. — shadcnblocks.com

1 — 概要
何か

shadcn-ui-blocks は、shadcn/ui の上に載る無料のマーケティング用ブロック・コンポーネント集。Tailwind と React 向けに、そのまま使えるブロックが多数用意されている。公式 shadcn CLI でブロックを追加するのと同じ流れで、shadcnblocks のブロックも CLI から取得できる。

55+無料ブロック数
Reactコンポーネント
Tailwind 4ビルド
CLI公式互換

ブロック一覧は shadcnblocks.com/blocks/free で確認できる。マーケティングページやランディング用のセクションを、コピペや CLI でプロジェクトに取り込める。

2 — 特徴
ポイント
  • shadcn/ui ベース — 既存の shadcn プロジェクトにそのまま組み込める。
  • 無料ブロック 55 以上 — ヒーロー・CTA・特徴紹介・FAQ・フッターなど、マーケ用のレイアウトが豊富。
  • 公式 shadcn CLI 対応 — npx shadcn@latest add と同様の流れでブロックを追加可能。
  • Tailwind 4 — 最新の Tailwind でビルドされている。
3 — CLI
ブロックの追加

shadcnblocks のブロックは、公式 shadcn CLI でダウンロードできる。使い方は shadcn のコンポーネント追加と同様。

CLI ドキュメント: docs.shadcnblocks.com/blocks/shadcn-cli/

プロジェクトで shadcn を導入済みなら、設定にブロックのレジストリを追加するだけで、npx shadcn@latest add <block-name> のようにブロックを追加できる。

4 — Tailwind 4
スタイル

shadcn-ui-blocks は Tailwind 4 でビルドされている。グローバル CSS やテーマの参考として、Tailwind の設定例が公開されている。

Tailwind 設定例: shadcnblocks.com/tailwind/globals.css

リポジトリ: shadcnblocks/shadcn-ui-blocks

ブロック一覧（無料）: shadcnblocks.com/blocks/free

CLI ドキュメント: docs.shadcnblocks.com/blocks/shadcn-cli/

Tailwind 4 設定: shadcnblocks.com/tailwind/globals.css