Popover

npx shadcn@latest add https://kasumi-ui.vercel.app/r/popover.json

import {
Popover,
PopoverTrigger,
PopoverContent,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";

<Popover>
<PopoverTrigger asChild>
  <Button variant="outline">開く</Button>
</PopoverTrigger>
<PopoverContent>
  <div className="space-y-2">
    <p className="text-sm font-semibold">表示設定</p>
    <p className="text-sm text-muted-foreground">
      お好みの表示オプションを設定できます。
    </p>
  </div>
</PopoverContent>
</Popover>

<Popover>
<PopoverTrigger asChild>
  <Button variant="outline">サイズ変更</Button>
</PopoverTrigger>
<PopoverContent className="w-80">
  <div className="space-y-4">
    <p className="text-sm font-semibold">サイズ</p>
    <div className="space-y-2">
      <div className="flex items-center gap-4">
        <Label className="w-16 shrink-0">幅</Label>
        <Input variant="outline" placeholder="100%" className="h-8" />
      </div>
      <div className="flex items-center gap-4">
        <Label className="w-16 shrink-0">高さ</Label>
        <Input variant="outline" placeholder="auto" className="h-8" />
      </div>
    </div>
  </div>
</PopoverContent>
</Popover>