Preview Card

A rich preview component for displaying linked content.

<script lang="ts">
import { PreviewCard, PreviewCardPopup, PreviewCardTrigger } from "coss-svelte";
</script>

<PreviewCard>
	<PreviewCardTrigger href="/docs/introduction">coss-svelte</PreviewCardTrigger>
	<PreviewCardPopup>
		<div class="flex flex-col gap-1">
			<h4 class="font-medium text-sm">coss-svelte</h4>
			<p class="text-muted-foreground text-sm">
				Svelte components for clean product interfaces.
			</p>
		</div>
	</PreviewCardPopup>
</PreviewCard>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { PreviewCard, PreviewCardPopup, PreviewCardTrigger } from "coss-svelte";

Anatomy

PreviewCard
PreviewCardPopup
PreviewCardTrigger

API Reference

PreviewCard

A rich preview component for displaying linked content.

Prop	Type	Default	Description
`href`	`string`	`"#"`	Renders the component as a link target when provided.
`label`	`string`	`"Preview"`	Accessible label or fallback visible label for the control.
`title`	`string`	`"Preview"`	Title text rendered by the component's built-in fallback layout.
`description`	`string`	`""`	Supporting text rendered by the component's built-in fallback layout.

children : Snippet<[]>

Inherits from Bits UI LinkPreview.Root.

PreviewCardPopup

Renders the floating or modal surface for the parent component.

Prop	Type	Default	Description
`portalProps`	`{ disabled?: boolean; to?: PortalTarget }`	`{}`	Configures the exact Bits Portal target (`to`) or renders inline when `disabled`.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI LinkPreview.Content.

PreviewCardTrigger

Renders the control that opens, closes, or selects related content.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI LinkPreview.Trigger.

Implementation Details

Status: Stable
Foundation: bits
Category: Overlays & Popups
Particles: 1