/* Without measurements, keep document navigation in normal flow so enlarged headings cannot scroll behind an estimated sticky header. */ .site-page-frame > .container-wrapper > header:has([data-docs-site-header]) { position: static !important; } @media (max-width: 63.999rem) { [data-page-frame-layout] { flex-direction: column !important; } .docs-sidebar { width: 100% !important; } .mobile-sidebar-pane { position: static !important; inset: auto !important; display: flex !important; width: 100% !important; max-height: min(60svh, 32rem); border-bottom: 1px solid var(--color-border); } .main-frame { width: 100% !important; } [data-site-contents-command] { display: none !important; } }

Hover Card

Shadcn hover-card reconstructed on Proto UI.

This entry shows the current shadcn hover-card implementation in Proto UI. It supports the official controlled/uncontrolled Root API, openDelay, closeDelay, and the Content side/align subset while matching the official width, popover colors, border, shadow, and direction-aware motion. Portal, collision handling, Arrow, forceMount, and numeric offsets are not yet supported by the Base layer.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

<wc-shadcn-hover-card-root class="relative inline-flex items-start">
  <wc-shadcn-hover-card-trigger>@proto-ui</wc-shadcn-hover-card-trigger>
  <wc-shadcn-hover-card-content>
    Host-neutral interaction protocols for adaptable UI components.
  </wc-shadcn-hover-card-content>
</wc-shadcn-hover-card-root>

View code