Skip to main content
The Preview Card component displays a popup with rich content when hovering over or focusing on a trigger element. It’s perfect for showing user profiles, link previews, or additional context.

​
Basic Usage

import reflex_ui as ui

ui.preview_card(
    trigger=ui.link("@username"),
    content=rx.vstack(
        rx.text("John Doe", font_weight="600"),
        rx.text("Software Engineer", font_size="0.875rem", color="gray.600"),
        spacing="0.25rem"
    )
)

​
User Profile Preview

ui.preview_card(
    trigger=rx.hstack(
        ui.gradient_profile(seed="user123", class_name="size-8"),
        rx.text("@johndoe"),
        spacing="0.5rem"
    ),
    content=rx.vstack(
        rx.hstack(
            ui.gradient_profile(seed="user123", class_name="size-16"),
            rx.vstack(
                rx.text("John Doe", font_weight="600", font_size="1.125rem"),
                rx.text("@johndoe", color="gray.600", font_size="0.875rem"),
                align_items="flex-start",
                spacing="0.125rem"
            ),
            spacing="0.75rem"
        ),
        rx.text(
            "Building amazing web apps with Reflex. Love Python and open source.",
            font_size="0.875rem",
            line_height="1.5"
        ),
        rx.hstack(
            rx.text("1.2K", font_weight="600"),
            rx.text("Followers", color="gray.600", font_size="0.875rem"),
            rx.text("•", color="gray.400"),
            rx.text("432", font_weight="600"),
            rx.text("Following", color="gray.600", font_size="0.875rem"),
            spacing="0.5rem"
        ),
        align_items="flex-start",
        spacing="1rem",
        width="100%"
    ),
    delay=600
)

ui.preview_card(
    trigger=ui.link("reflex.dev", show_icon=True),
    content=rx.vstack(
        rx.image(
            src="https://reflex.dev/og.png",
            width="100%",
            height="120px",
            object_fit="cover",
            border_radius="0.5rem"
        ),
        rx.text("Reflex", font_weight="600"),
        rx.text(
            "Build web apps in pure Python",
            font_size="0.875rem",
            color="gray.600"
        ),
        align_items="flex-start",
        spacing="0.75rem",
        width="100%"
    )
)

​
Component Structure

For more control, use the component parts: 
ui.preview_card.root(
    ui.preview_card.trigger(
        render_=ui.link("Hover me")
    ),
    ui.preview_card.portal(
        ui.preview_card.positioner(
            ui.preview_card.popup(
                rx.text("Preview content here"),
                # Your preview content
            ),
            side="top",
            align="center"
        )
    ),
    delay=600,
    close_delay=300
)

​
Props Reference

​
Root Props

​
open
bool
Whether the preview card is currently open (controlled)
​
default_open
bool
default:"False"
Whether the preview card is initially open (uncontrolled)
​
on_open_change
EventHandler
Event handler called when the preview card is opened or closed
​
delay
int
default:"600"
How long to wait before the preview card opens in milliseconds
​
close_delay
int
default:"300"
How long to wait before closing the preview card in milliseconds

​
High-Level Props

​
trigger
Component
The component that triggers the preview card on hover
​
content
str | Component
The content to display in the preview card popup

​
Positioning Props

​
side
Literal['bottom', 'inline-end', 'inline-start', 'left', 'right', 'top']
default:"bottom"
Which side of the trigger to display the preview card
​
align
Literal['start', 'center', 'end']
default:"center"
How to align the popup relative to the trigger
​
side_offset
int
default:"8"
Distance between the trigger and the popup in pixels
​
sticky
bool
default:"False"
Whether to maintain the popup in the viewport after scrolling

​
Styling

From source code at reflex_ui/components/base/preview_card.py:18-27:
  • Popup has rounded corners, border, shadow, and smooth transitions
  • Minimum width of 16rem (256px)
  • Padding of 0.75rem
  • Scale and opacity animations on open/close
  • Smooth transform origin transitions

​
Common Patterns

​
Repository Card

ui.preview_card(
    trigger=ui.link("awesome-project"),
    content=rx.vstack(
        rx.text("awesome-project", font_weight="600"),
        rx.text(
            "A collection of awesome things",
            font_size="0.875rem",
            color="gray.600"
        ),
        rx.hstack(
            ui.badge("Python", color="blue", size="xs"),
            rx.text("⭐ 1.2k", font_size="0.875rem"),
            rx.text("🍴 234", font_size="0.875rem"),
            spacing="0.75rem"
        ),
        align_items="flex-start",
        spacing="0.75rem",
        width="100%"
    )
)

​
Implementation Details

From source code at reflex_ui/components/base/preview_card.py:199-257:
  • High-level API automatically creates all subcomponents
  • Opens on hover with configurable delay
  • Closes after mouse leaves with close delay
  • Smooth animations for better UX
  • Portal support for proper layering
  • Automatic collision detection and repositioning

Build docs developers (and LLMs) love

Get started for freeTalk to us