Component 38 of 60

Hover Card

Previews content behind a link or trigger.

site/src/previews/preview_card.rs

Starting the preview. GPUI compiles to WebAssembly, so the first load takes a few seconds. This browser has neither WebGPU nor WebGL 2, so the live preview cannot run. The code on this page still works. The preview did not start.

fn preview_card_preview(&self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
    preview_card("profile-card")
        .trigger(
            Button::new("profile-card.trigger")
                .variant(ButtonVariant::Link)
                .label("@gpuicn"),
        )
        .content(|_, _, cx| {
            preview_card_popup("profile-card.popup", cx).child(
                div()
                    .flex()
                    .flex_col()
                    .gap(px(8.))
                    .child("gpuicn")
                    .child("Open-code Nova components for native GPUI applications."),
            )
        })
}

Hover Card, running in the browser. The second tab shows the preview's own source, which includes its layout and demo state. For the smallest working example, see Usage below. Download the whole showcase for its imports and helpers.

Installation

After the one-time setup, run the command from your app root. The CLI writes the modules and keeps src/ui/mod.rs in step.

gpuicn add preview-card button

If you prefer to copy the files by hand, declare them yourself:

// src/ui/mod.rs
pub mod theme;
pub mod preview_card;
pub mod button;

// src/main.rs
mod ui;

Usage

Put this in a view module and return example() from its render method.

use crate::ui::button::Button;
use crate::ui::preview_card::*;
use gpui_kit::{IntoElement, ParentElement};

fn example() -> impl IntoElement {
    preview_card("profile")
        .trigger(Button::new("profile.link").label("@gpuicn"))
        .content(|_, _, cx| {
            preview_card_popup("profile.popup", cx).child("Native GPUI components")
        })
}

API reference

pub fn preview_card(id: impl Into<ElementId>) -> HoverCard

Supply a trigger and a content builder to the Kit hover card.

pub fn preview_card_popup(id: impl Into<ElementId>, cx: &App) -> Stateful<Div>

The 256px Nova preview surface.

Installed source, 15 lines

//! Nova hover-card surfaces using Kit's delayed hover lifecycle.
use super::theme::{UiTheme, primitives::surface};
pub use gpui_kit::base::{HoverCard, HoverCardState};
use gpui_kit::{App, Div, ElementId, InteractiveElement as _, Stateful, Styled, div};

/// Supply a trigger and a content builder to the Kit hover card.
pub fn preview_card(id: impl Into<ElementId>) -> HoverCard {
    HoverCard::new(id)
}
/// The 256px Nova preview surface.
pub fn preview_card_popup(id: impl Into<ElementId>, cx: &App) -> Stateful<Div> {
    let t = UiTheme::read(cx);
    surface::popover(div().id(id).w(t.space(64.)).p(t.space(2.5)), t)
}

Platform notes

Visual reference: shadcn/ui 4.19.0, Neutral Nova. Implementation: crates/ui/registry/preview_card/preview_card.rs, using GPUI Kit 0.6.4.

Kit HoverCard owns hover/focus timing, trigger and positioning. gpuicn supplies the Nova surface. The application provides trigger content and the preview closure.

The Rust source and Usage example define the supported API. Browser DOM/CSS behavior, exact exit animations and cross-platform screen-reader parity are not implied by the native component. See migration qualification for the checks completed on this revision.