UI Skillbook
2

Preview Card

Hovering or focusing a link opens this card with a preview of where it goes, so people stay on the page.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-preview-card and follow the Siteplane Preview Card skill it prints for this task.

Paste this into your agent.

Preview Card lets readers peek at linked people, projects or documents before opening them. Treat the preview as extra information. The link must make sense without it.

Install

bashnpx shadcn@4.18.0 add @siteplane/preview-card

Import it from @/siteplane/components/preview-card. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Tooltip: Pick Tooltip instead for a one-line label on a control.
  • vs Popover: Pick Popover instead when the content holds actions or fields people must reach by keyboard.

Rules

  • Keep the link text clear on its own; never hide required information in the card.
  • Do not place required buttons or actions in the card.
  • Tune delay and closeDelay on PreviewCardTrigger if the default timing feels slow or jumpy.
  • Give PreviewCardPopup a width class when the content needs more than the default width.

Reference

  • Preview Card docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Overlays & disclosure. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-preview-card

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

12 Principles of Animationby raphaelsalaja

Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.

MotionExternalGitHub stars: 42

Apple Designby emilkowalski

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.

MotionExternalGitHub stars: 51.4K

Better Uiby jakubkrehel

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, image outlines, box shadows.

VisualExternalGitHub stars: 9.2K

Bolderby pbakaus

Increase visual impact and personality for interfaces that feel too safe, bland, or generic.

VisualExternalGitHub stars: 95.1K

Back to Siteplane UI