Web Components

React

Vue

@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; } starlight-menu-button { 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.

<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