Preview Card

Shows a rich preview when someone hovers or focuses a link.

Built on Base UI, the accessible foundation used by Oros UI.

Installation

Install Preview Card from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/preview-card

Usage

import {
  PreviewCard,
  PreviewCardTrigger,
  PreviewCardPortal,
  PreviewCardBackdrop,
  PreviewCardPositioner,
  PreviewCardPopup,
} from "@/components/ui/preview-card"

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
PreviewCard	The root component that owns the primary structure and state.
PreviewCardTrigger	Controls opening, selection, or disclosure behavior.
PreviewCardPortal	Moves overlay content to a stable document layer.
PreviewCardBackdrop	A composable part of the component anatomy.
PreviewCardPositioner	Positions floating content relative to its anchor.
PreviewCardPopup	A composable part of the component anatomy.
PreviewCardViewport	Defines the visible or scrollable content region.
PreviewCardArrow	A composable part of the component anatomy.
PreviewCardPrimitive	A composable part of the component anatomy.

API Reference

Preview Card exports 9 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

PreviewCard Component
PreviewCardTrigger Component
PreviewCardPortal Component
PreviewCardBackdrop Component
PreviewCardPositioner Component
PreviewCardPopup Component
PreviewCardViewport Component
PreviewCardArrow Component
PreviewCardPrimitive Component

Accessibility

Preview Card inherits focus management and keyboard support from Base UI; keep the provided trigger and content parts together.
Give icon-only triggers an accessible name, retain visible focus styles, and verify Escape and focus-return behavior in the final composition.

Source

Preview Card is maintained by Oros and follows the same conventions as the rest of the library. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Popover Progress