アクションとオーバーレイ@neumorphism-ui/hover-card

Hover Card

リンク先を補足するプレビューカード。重要な情報や操作をホバーだけに置かず、元のリンクだけで目的が分かるようにします。

@neumorphism-ui/hover-card

Registry JSON

プレビュー

プロフィールを確認

インストール

npx shadcn@latest add @neumorphism-ui/hover-card

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

Import

"use client";

import * as React from "react";
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/ui/hover-card";

Example

export default function Example() {
  const id = React.useId();
  return (<HoverCard><HoverCardTrigger href="#profile-preview" className="inline-flex items-center gap-3 rounded-[var(--neu-radius-control)] border border-[color:var(--neu-edge)] bg-[var(--neu-surface)] px-4 py-3 font-semibold text-[var(--foreground)] [box-shadow:var(--neu-shadow-raised-sm)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]">{"プロフィールを確認"} <span aria-hidden="true">↗</span></HoverCardTrigger><HoverCardContent><strong id="profile-preview">Alex Kim</strong><p>{"プロダクトデザイナー · ソウル"}</p></HoverCardContent></HoverCard>);
}

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`HoverCard`	`open / defaultOpen`	`boolean`	`—`	制御状態または初期状態を指定します。
`HoverCardTrigger`	`delay / closeDelay`	`number`	`—`	開閉の遅延時間（ミリ秒）です。
`HoverCardContent`	`sideOffset`	`number`	`—`	画面境界を考慮した位置または間隔を設定します。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ