Skills
.Work. You
Rest

shadcn-syntax-popover-tooltip-hovercard

Official

Pick the right floating panel for shadcn UI

Design & Creative#accessibility#shadcn#focus management#radix#popover#tooltip#hovercard
AuthorImpertio-Studio
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Prevents broken UX and accessibility issues caused by choosing the wrong floating-panel primitive (Popover vs Tooltip vs HoverCard) or misconfiguring their providers, focus, and controlled state.

Core Features & Use Cases

  • Decision guidance: Choose between Popover, Tooltip, and HoverCard based on whether content is interactive, hoverable, or click-driven.
  • Robust implementation rules: Covers TooltipProvider placement, modal vs non-modal Popover behavior, touch-device visibility, and required use client boundaries.
  • Production debugging coverage: Fixes common failure modes like missing TooltipProvider (silent no-op), HoverCard flicker from delay defaults, Popover stuck open from missing onOpenChange, and Popover rendering behind Dialog overlays.

Quick Start

Use the skill to decide which shadcn primitive to install and how to configure it for your specific “small panel anchored to an element” UX, including accessibility and touch behavior.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: shadcn-syntax-popover-tooltip-hovercard
Download link: https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package/archive/main.zip#shadcn-syntax-popover-tooltip-hovercard

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.