# Preview Card

A rich preview component for displaying linked content.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<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>

```

## 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. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Bits UI LinkPreview.Root](https://bits-ui.com/docs/components/link-preview#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`. |

**Composition and refs**

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

Inherits from [Bits UI LinkPreview.Content](https://bits-ui.com/docs/components/link-preview#content).

### PreviewCardTrigger

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

**Composition and refs**

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

Inherits from [Bits UI LinkPreview.Trigger](https://bits-ui.com/docs/components/link-preview#trigger).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | bits |
| Category | Overlays & Popups |
| Particles | 1 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/preview-card.json` for the complete local file and dependency closure.
- Preview Card is stable in the current source catalog.