║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Preview Card description: A popup that appears when a link is hovered, showing a preview for sighted users.

links: doc: https://base-ui.com/react/components/preview-card#api-reference

<ComponentPreview name="preview-card-demo" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/preview-card

</TabsPanel> <TabsPanel value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install @base-ui-components/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="preview-card" title="components/ui/preview-card.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsPanel> </CodeTabs>

Usage

import { Button } from "@/components/ui/button"
import {
  PreviewCard,
  PreviewCardPopup,
  PreviewCardTrigger,
} from "@/components/ui/preview-card"

<PreviewCard>
  <PreviewCardTrigger>Open Preview Card</PreviewCardTrigger>
  <PreviewCardPopup>Preview Card Content</PreviewCardPopup>
</PreviewCard>

Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with coss ui quickly.

Quick Checklist

• Update import path from @/components/ui/hover-card → @/components/ui/preview-card
• Prefer PreviewCard* component names; HoverCard* remain for legacy
• Prefer PreviewCardPopup instead of HoverCardContent
• If you used asChild on parts, switch to the render prop

Comparison Example

<span data-lib="radix-ui"> ```tsx title="shadcn/ui" // [!code word:asChild] <HoverCard> <HoverCardTrigger asChild> <Button variant="outline">Open Preview Card</Button> </HoverCardTrigger> <HoverCardContent>Preview Card Content</HoverCardContent> </HoverCard> ``` </span> <span data-lib="base-ui"> ```tsx title="coss ui" // [!code word:render] <PreviewCard> <PreviewCardTrigger render={<Button variant="outline" />}> Open Preview Card </PreviewCardTrigger> <PreviewCardPopup>Preview Card Content</PreviewCardPopup> </PreviewCard> ``` </span>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║