Zenn
🐡

laravel12 starter kit(react)と使うshadcn/ui

2025/03/03に公開
Tailwind CSS
Tailwind CSS
shadcn/ui
v0
laravel12
tech

laravel12のstarter kitを使う場合絶対把握しておいた方がよい。これをベースに組まれているのでコピペする場合にもこれをちゃんとするかしないかでコードの統一性が変わってくる。vueでも多分使える。

なお、resources/js/components/ui/ 以下に放りこまれているものの解説。以下のコードは書けば即座に動作するので動作を把握しておく事に損は無いだろう。なお、フォームは別に分ける予定。ui以下に無いものはimportできるのだが、その辺は書く気力がなくなっちゃった。スターターキットのドキュメントに載ってるので調べてみてください。

アラート

通常のアラート

<Alert>
  <Info className="w-5 h-5" />
  <AlertTitle>通知</AlertTitle>
  <AlertDescription>これは通常のアラートです。</AlertDescription>
</Alert>

エラー

<Alert variant="destructive">
  <XCircle className="h-5 w-5 text-red-500" />
  <AlertTitle>エラー</AlertTitle>
  <AlertDescription>問題が発生しました。</AlertDescription>
</Alert>

アバター

画像付きアバター

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
  <AvatarFallback>SC</AvatarFallback>
</Avatar>

画像無しアバター

<Avatar>
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

アイコン付きアバター

<Avatar>
  <AvatarFallback>
    <User className="w-6 h-6" />
  </AvatarFallback>
</Avatar>

バッジ

見辛いものがあるのでダークモードにしたりしなかったり

デフォルトバッジ

<Badge>Default</Badge>

セカンダリバッジ

<Badge variant="secondary">Secondary</Badge>

破壊的バッジ

<Badge variant="destructive">Error</Badge>

アウトラインバッジ

<Badge variant="outline">Outline</Badge>

ボタン

デフォルトボタン

<Button>クリックしてください</Button>

アイコン付きボタン

<Button><Plus /> 追加</Button>

破壊的なボタン

<Button variant="destructive"><Trash /> {t('Delete')}</Button>

アウトラインボタン

<Button variant="outline">アウトラインボタン</Button>

セカンダリーボタン

<Button variant="secondary">セカンダリーボタン</Button>

ゴーストボタン

<Button variant="ghost">ゴーストボタン</Button>

リンクボタン

<Button variant="link">リンクボタン</Button>

異なるサイズのボタン

<Button size="sm">小</Button>
<Button size="default">デフォルト</Button>
<Button size="lg">大</Button>

アイコンボタン

<Button size="icon"><Plus /></Button>
<Button size="icon" variant="destructive"><Trash /></Button>

カード

シンプルなカード

<Card>
  <CardHeader>
    <CardTitle>カードタイトル</CardTitle>
    <CardDescription>これはカードの説明です。</CardDescription>
  </CardHeader>
  <CardContent>
    ここにコンテンツを入れることができます。
  </CardContent>
</Card>

ボタン付きカード

<Card>
  <CardHeader>
    <CardTitle>アクションカード</CardTitle>
    <CardDescription>ここにボタンを配置できます。</CardDescription>
  </CardHeader>
  <CardContent>
    ここに詳細や説明を追加できます。
  </CardContent>
  <CardFooter>
    <Button>クリックしてください</Button>
  </CardFooter>
</Card>

ユーザープロフィールカード

<Card className="w-80">
  <CardHeader className="flex items-center gap-3">
    <User className="w-8 h-8 text-gray-600" />
    <div>
      <CardTitle>John Doe</CardTitle>
      <CardDescription>@johndoe</CardDescription>
    </div>
  </CardHeader>
  <CardContent>
    フルスタックエンジニア。React と Laravel を使用しています。
  </CardContent>
  <CardFooter>
    <Button variant="outline">フォロー</Button>
  </CardFooter>
</Card>

ダイヤログ

シンプルなダイアログ

<Dialog>
  <DialogTrigger asChild>
    <Button>ダイアログを開く</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>ダイアログタイトル</DialogTitle>
      <DialogDescription>これはシンプルなダイアログです。</DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

警告ダイアログ

<Dialog>
  <DialogTrigger asChild>
    <Button variant="destructive">削除</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>本当に削除してよろしいですか？</DialogTitle>
      <DialogDescription>この操作は元に戻せません。</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="secondary">キャンセル</Button>
      </DialogClose>
      <Button variant="destructive">削除</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

確認ダイアログ

<Dialog>
  <DialogTrigger asChild>
    <Button>確認</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>変更を保存しますか？</DialogTitle>
      <DialogDescription>変更を確認するには OK を押してください。</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="secondary">キャンセル</Button>
      </DialogClose>
      <Button>OK</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

ドロップダウン

これは自前で実装する機会は少ないかも

シンプルなドロップダウン

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>メニューを開く</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>プロフィール</DropdownMenuItem>
    <DropdownMenuItem>設定</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>ログアウト</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

アイコン付きドロップダウン

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>アイコン付きメニュー</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem><User className="mr-2 h-4 w-4" /> プロフィール</DropdownMenuItem>
    <DropdownMenuItem><Settings className="mr-2 h-4 w-4" /> 設定</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem><LogOut className="mr-2 h-4 w-4" /> ログアウト</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

プレースホルダー

画像などのサイズ一時確保。webサービスを使う方が一般的ではあるが

正方形プレースホルダー

<PlaceholderPattern className="w-40 h-40 bg-gray-200" />

カスタムサイズのプレースホルダー

<PlaceholderPattern className="w-64 h-32 bg-red-100" />

シート

これはアニgifを貼る

右側のシート

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">シートを開く</Button>
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>シートタイトル</SheetTitle>
      <SheetDescription>これは右から開くシートです。</SheetDescription>
    </SheetHeader>
    <div className="flex justify-end mt-4">
      <SheetClose asChild>
        <Button variant="destructive">閉じる</Button>
      </SheetClose>
    </div>
  </SheetContent>
</Sheet>

左側のシート

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">シートを開く</Button>
  </SheetTrigger>
  <SheetContent side="left">
    <SheetHeader>
      <SheetTitle>シートタイトル</SheetTitle>
      <SheetDescription>これは左から開くシートです。</SheetDescription>
    </SheetHeader>
    <div className="flex justify-end mt-4">
      <SheetClose asChild>
        <Button variant="destructive">閉じる</Button>
      </SheetClose>
    </div>
  </SheetContent>
</Sheet>

プレースホルダー

これは見辛いのでダークにしている

テキストプレースホルダー

<Skeleton className="w-32 h-4" />

ボックスプレースホルダー

<Skeleton className="w-48 h-24" />

アバタープレースホルダー

<Skeleton className="w-12 h-12 rounded-full" />

セパレーター

水平セパレーター

<div className="space-y-4">
  <div>トップコンテンツ</div>
  <Separator />
  <div>ボトムコンテンツ</div>
</div>

垂直セパレーター

<div className="space-y-4">
  <div>ダッシュボード</div>
  <Separator orientation="vertical" />
  <div>ドキュメント</div>
  <Separator orientation="vertical" />
  <div>リポジトリ</div>
</div>

トグル

これもちょっと見辛いのでダークで。あとアニgif

デフォルトトグル

<Toggle>トグル</Toggle>

異なるサイズのトグル

<Toggle size="sm">小</Toggle>
<Toggle>デフォルト</Toggle>
<Toggle size="lg">大</Toggle>

アイコントグル

<Toggle><Bold /></Toggle>
<Toggle><Italic /></Toggle>
<Toggle><Underline /></Toggle>

トグルグループ

これは普通のトグルと異なりグルーピングされている

シングルセレクトトグルグループ

<ToggleGroup type="single" defaultValue="bold">
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
  <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
</ToggleGroup>

マルチセレクトトグルグループ

<ToggleGroup type="multiple" defaultValue={["bold", "italic"]}>
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
  <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
</ToggleGroup>

ツールチップ

シンプルなツールチップ

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">ホバーしてください</Button>
    </TooltipTrigger>
    <TooltipContent>
      これはツールチップです！
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

最後に

これをまとめたstarter kitのデモをそのうちリリースします。まあスクショにあるように手元では大分出来てるんですがね。

あと、shadcn/uiを使ってるので当然？v0.dev の利用も視野に入ってきますね。そのまんま使うのは厳しいかもだけどテンプレートをちょいちょい移動する用途には十分なんじゃないでしょーか。。。つかれた

Discussion