laravel 12 starter kit(react)のui(shadcn/ui)以外に最初からあるcomponentの使い方

resources/js/components/ 以下

resources/js/components/
├── appearance-dropdown.tsx
├── appearance-tabs.tsx
...
└── ui
    ├── alert.tsx
    ├── avatar.tsx
...

このような構成で諸々配置されている。

この中でresources/js/components/ui/ 以下は shadcn/ui(vueでは shadcn-vue)のファイルになっている。これに関しては後日解説を書くとして、その上位に追いてあるコンポーネントをどのように呼び出すとよいかという点にフォーカスした記事にしている。といっても大量にあるけど実際には3つ(4つ)しかない。

全てダークモードで試している。

ヘッダ系 (heading.tsx, heading-small.tsx)

<h2 className="text-xl font-bold">H2: components/ui/alert.tsx</h2>
<Heading title="Heading: components/ui/alert.tsx" />
<HeadingSmall title="HeadingSmall: components/ui/alert.tsx" />

こんな感じでmargin付きのヘッダーが与えられてh2とかをベタで書くより調整される。それとdescriptionがある

<h2 className="text-xl font-bold">H2: components/ui/alert.tsx</h2>
<Heading
  title="Heading: components/ui/alert.tsx"
  description="This is a primary heading used for main sections."
/>

<HeadingSmall
  title="HeadingSmall: components/ui/alert.tsx"
  description="This is a secondary heading used for smaller sections."
/>

このようにタイトル + 説明というデザインで統一できるので、h2、h3を使うなら使っといてもいいかもしれない。

TextLinkコンポーネント

<div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
  <Heading title="components/ui/alert.tsx" />
  <p>
    <strong>TextLink:</strong>{' '}
    <TextLink href="#">Link</TextLink>
  </p>

  <p>
    <strong>A tag:</strong>{' '}
    <a href="#" className="text-blue-600 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
      Link
    </a>
  </p>
</div>

結構シンプルさがある。

中身は

    <Link
      className={cn(
        'text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500',
        className
      )}
      {...props}
    >
      {children}
    </Link>

このようにダークモード対応になっている。このcn^[1]によりクラスをmergeできる。たとえば赤にする場合

<p>
  <strong>TextLink:</strong>{' '}
  <TextLink href="#">Link</TextLink>
</p>
<p>
  <strong>TextLink (Red):</strong>{' '}
  <TextLink href="#" className="text-red-500">Link</TextLink>
</p>

<p>
  <strong>A tag:</strong>{' '}
  <a href="#" className="text-blue-600 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
    Link
  </a>
</p>

となるわけだ。

InputError

これは基本的にフォームと一緒に使われるのだが、基本的にエラーメッセージが無いときは出ないようになっている。

<div className="space-y-2">
  <Label htmlFor="example-input">Example Input</Label>
  <Input
    id="example-input"
    type="text"
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
    onBlur={validateInput}
    className="w-full"
  />
  <InputError message={error} />
</div>

これは後日formの組み立て型と一緒に解説するつもりだが(余裕あれば)、このようにdefaultでは赤を基調とした色でエラーメッセージを出す仕様になっている。

その他のコンポーネントを含むまとめ

レイアウトを弄るとか以外の自作のビューで呼び出されるのはここまでで紹介したコンポーネントでほとんど完了する(もちろん自分で追加してもよいが、あくまで最初から配置されているものの解説)。それ以外を以下の表でまとめる。

コンポーネント名	説明	主な用途
appearance-dropdown.tsx	テーマ切り替え用のドロップダウンメニューを提供する	ダークモード/ライトモードの変更
appearance-tabs.tsx	テーマ切り替え用のタブUIを提供する	テーマ設定
app-content.tsx	レイアウトのコンテンツ部分を管理	main エリアの管理
app-header.tsx	アプリケーションのヘッダー部分	ナビゲーションやアバターの表示
app-logo-icon.tsx	アプリケーションのロゴアイコンを提供	小サイズのロゴ表示
app-logo.tsx	アプリケーションのロゴコンポーネント	メインロゴの表示
app-shell.tsx	アプリケーション全体のレイアウト管理	レイアウト全体の構成
app-sidebar-header.tsx	サイドバーのヘッダー部分	サイドバーのタイトルや操作ボタン
app-sidebar.tsx	アプリケーションのサイドバー	メニューやナビゲーションの管理
breadcrumbs.tsx	パンくずリストの表示	ユーザーが現在のページを確認
delete-user.tsx	ユーザーアカウント削除のUI	アカウント削除の確認と実行
heading-small.tsx	小サイズの見出しコンポーネント	セクションタイトルの表示
heading.tsx	通常サイズの見出しコンポーネント	大きめのセクションタイトル表示
icon.tsx	アイコンコンポーネント	汎用的なアイコン表示
input-error.tsx	入力エラー表示	フォームエラーの表示
nav-footer.tsx	フッターナビゲーション	ドキュメントや外部リンクの表示
nav-main.tsx	メインナビゲーション	メインのメニュー項目管理
nav-user.tsx	ユーザーナビゲーション	ユーザー情報や設定メニュー
text-link.tsx	a タグのラッパー	スタイル付きのリンク表示
user-info.tsx	ユーザー情報表示	ユーザーのアイコンと名前を表示
user-menu-content.tsx	ユーザーメニューの内容	設定やログアウトメニュー

結局

同じディレクトリにばばっと置いてあるのでちょっとわかり辛いんだよね...

脚注

1. resources/js/lib/utils.tsに存在