Neumorphism UI

Hover Card

プロフィールなど、リンク先に関する補助情報をプレビューする場合に使います。

プレビュー

プロフィールのプレビュー

プロフィールリンクのそばに名前と役割を表示します。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

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

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

HoverCardTrigger は意味のあるリンクにし、HoverCardContent に任意の補足を置きます。開かなくてもリンクの目的を理解して移動できるようにします。

"use client";

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

export default function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger href="/team/alex">Alex Kim</HoverCardTrigger>
      <HoverCardContent>Product designer based in Seoul.</HoverCardContent>
    </HoverCard>
  );
}

API リファレンス

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

コンポーネントプロパティ型デフォルト説明
HoverCardopen / defaultOpenboolean—制御状態または初期状態を指定します。
HoverCardTriggerdelay / closeDelaynumber—開閉の遅延時間（ミリ秒）です。
HoverCardContentsideOffsetnumber—画面境界を考慮した位置または間隔を設定します。

アクセシビリティ

  • 01

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

  • 02

    render や className を変更する際もラベルと可視フォーカスを保ちます。