Preview Card

<NaviusPreviewCard>
    <NaviusPreviewCardTrigger href="https://github.com/lzitser23/navius"
        class="... underline-offset-4 hover:underline">@@navius</NaviusPreviewCardTrigger>

    <NaviusPreviewCardPositioner Side="bottom" SideOffset="8">
        <NaviusPreviewCardPopup class="... w-72 rounded-md border bg-popover p-4 shadow-md
                data-[open]:animate-in data-[closed]:animate-out">
            <div class="flex gap-4">
                <div class="... h-12 w-12 rounded-full bg-accent">NV</div>
                <div class="space-y-1">
                    <h4 class="text-sm font-semibold">Navius</h4>
                    <p class="text-sm text-muted-foreground">Headless UI primitives for Blazor.</p>
                    <span class="text-xs text-muted-foreground">Joined December 2025</span>
                </div>
            </div>
            <NaviusPreviewCardArrow class="fill-popover" />
        </NaviusPreviewCardPopup>
    </NaviusPreviewCardPositioner>
</NaviusPreviewCard>

Features

• Opens on hover after a configurable OpenDelay, and immediately on keyboard focus.
• Closes after a CloseDelay grace period so users can move from trigger to card.
• Can be controlled (@bind-Open) or uncontrolled (DefaultOpen).
• Custom side, alignment, offsets, and collision avoidance, with an optional arrow.
• The engine self-portals the Popup to document.body to escape overflow and stacking ancestors.
• Non-modal: no focus trap or scroll lock; dismisses on Escape or outside interaction.

Installation

Install the brain, or copy just this primitive in with the CLI.

navius add preview-card

Anatomy

Import the parts and assemble them. The Positioner and Popup replace the former Content; the Popup self-portals.

@using Navius.Primitives.Components.PreviewCard

<NaviusPreviewCard>
    <NaviusPreviewCardTrigger />
    <NaviusPreviewCardPositioner>
        <NaviusPreviewCardPopup>
            <NaviusPreviewCardArrow />
        </NaviusPreviewCardPopup>
    </NaviusPreviewCardPositioner>
</NaviusPreviewCard>

API Reference

Root

Contains all the parts of a preview card and owns the open state plus open/close timing. Renders no DOM.

Trigger

The link that opens the preview card on hover or focus. Renders an anchor.

Data attributes

Positioner

Owns placement (side / align / offsets / collision). A flag-setter; the Popup renders the positioning element the engine anchors and writes data-side / data-align + --anchor-* onto.

Popup

The card panel, self-portaled and positioned by the engine against the trigger. role="dialog" but non-modal. Renders a div.

Data attributes

Arrow

An optional arrow the positioner keeps pointing at the trigger. Renders an svg.

Data attributes

Accessibility

The preview card is intended for sighted, mouse and keyboard users to preview content behind a link; it is not exposed as a dialog to assistive technology and its content should be reachable by other means.

Keyboard interactions