DELOGs

shadcn/ui関連 | Next.js関連

shadcn/ui関連の情報をまとめています。shadcn/uiはUI作成にかかっている時間の短縮には最適と思います。

current

このカテゴリーの記事一覧

[管理画面フォーマット制作編 #9] Shadcn/ui で作る管理画面フォーマット ─ デモ公開とカスタマイズ方法

これまで進めてきたログイン画面、ユーザー管理、ロール管理、サイドバー管理などをまとめ、「UIのみ版」デモを公開

2025/9/4 公開

[管理画面フォーマット制作編 #9] Shadcn/ui で作る管理画面フォーマット ─ デモ公開とカスタマイズ方法
[管理画面フォーマット制作編 #8] ログイン後404ページ + ログイン前のパスワード忘れ導線UI

管理画面に「ログイン後の404ページ」と、ログイン前にユーザが管理者へ依頼できる「パスワード忘れ導線UI」を追加

2025/9/2 公開

[管理画面フォーマット制作編 #8] ログイン後404ページ + ログイン前のパスワード忘れ導線UI
[管理画面フォーマット制作編 #7] サイドバーメニュー管理UI ─ 3層・並び順・priority可視制御まで

サイドバーに表示するメニューをUIから登録・編集・削除できる管理画面を作成

2025/8/29 公開

[管理画面フォーマット制作編 #7] サイドバーメニュー管理UI ─ 3層・並び順・priority可視制御まで
[管理画面フォーマット制作編 #6] マスタ管理-ロール管理（UIのみ）

ロールテーブルを管理画面から操作するためのUIを、Next.js 15 + shadcn/ui + React Hook Form + Zodで実装

2025/8/26 公開

[管理画面フォーマット制作編 #6] マスタ管理-ロール管理（UIのみ）
[管理画面フォーマット制作編 #5] ユーザープロフィールUI ─ 情報確認・編集・パスワード変更

管理画面に「プロフィール」ページを追加し、ユーザ自身が情報やパスワードを更新できるUIを作成

2025/8/22 公開

[管理画面フォーマット制作編 #5] ユーザープロフィールUI ─ 情報確認・編集・パスワード変更
[管理画面フォーマット制作編 #4] サイドバーのメニューと参照中ページの同期

Next.js App Router + shadcn/ui のサイドバーで「いま見ているページ」を正しくハイライト

2025/8/19 公開

[管理画面フォーマット制作編 #4] サイドバーのメニューと参照中ページの同期
[管理画面フォーマット制作編 #3] Shadcn/uiで作るユーザ管理UI ─ 詳細・新規・編集フォーム実装

管理者向けのユーザ詳細表示・新規登録・編集画面をShadcn/uiとReact Hook Form、Zodを組み合わせて実装

2025/8/16 公開

[管理画面フォーマット制作編 #3] Shadcn/uiで作るユーザ管理UI ─ 詳細・新規・編集フォーム実装
[管理画面フォーマット制作編 #2] Shadcn/uiで作るログイン後の管理画面レイアウト

Shadcn/uiで簡単に管理画面UIを構築。共通ヘッダ、サイドメニューなどの基本レイアウトを作成

2025/8/8 公開

[管理画面フォーマット制作編 #2] Shadcn/uiで作るログイン後の管理画面レイアウト
[管理画面フォーマット制作編 #1] Shadcn/uiで作るログイン画面

Shadcn/uiを利用してログインを画面作成。UIのほかZodによるバリデーションなどを実践

2025/7/24 公開

[管理画面フォーマット制作編 #1] Shadcn/uiで作るログイン画面
Next.js+shadcn/uiのインストールと基本動作のまとめ

開発環境（ローカルPC）にNext.js 15とshadcn/uiをインストールして、基本の動作を確認

2025/6/20 公開

Next.js+shadcn/uiのインストールと基本動作のまとめ
「Next.js関連」の記事一覧へ