shadcn/ui + React Hook Form + Zod で作る簡単な入力フォーム

はじめに shadcn/uiが提供するフォーム関連コンポーネントを使いながら、React Hook Form + Zodを組み合わせてバリデーション付きのフォームを作成する方法をご紹介します。 shadcn/uiとは Tailwind CSS + Radix UIをベースにしたコンポーネントライブラリ。フォーム周りのコンポーネントも整っているため、UI/UXを向上させやすい。 公式ドキュメントでは、各コンポーネントの使い方が詳しく解説されています。 前提条件 Reactプロジェクトが作成されていること shadcn/uiの導入が完了していること 完了していない場合は、下記を参考に導入する。 https://ui.shadcn.com/docs/installation 事前準備 フォーム関連コンポーネントの追加