Preview Card | COSS for Svelte

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/preview-card.json

Usage

<script lang="ts">
  import * as PreviewCard from "$lib/components/ui/preview-card/index.js";
</script>

<PreviewCard.Root>
  <PreviewCard.Trigger href="/">Open Preview Card</PreviewCard.Trigger>
  <PreviewCard.Popup>Preview Card Content</PreviewCard.Popup>
</PreviewCard.Root>

API Reference

PreviewCard.Root

Root component. Wraps PreviewCard.Root from Shards UI.

PreviewCard.Trigger

Trigger element that shows the preview card on hover. Wraps PreviewCard.Trigger from Shards UI.

Popup container that displays the preview content. Also exported as PreviewCard.HoverCardContent.

Prop	Type	Default	Description
`align`	`"start" \\| "center" \\| "end"`	`"center"`	Alignment relative to the trigger
`sideOffset`	`number`	`4`	Distance from the trigger in pixels
`portalProps`	`ComponentProps<typeof PreviewCard.PreviewCardPrimitive.Portal>`	-	Props forwarded to the internal portal (`keepMounted`, `container`, etc.); see the Shards UI Preview Card portal API