## Link Preview (S—323)

Paste a URL and get a preview card: loading skeleton, editable title, large or compact layout, and remove the preview.

- URL: https://sundaeui.dev/components/link-preview
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/link-preview.json`
- Tags: card, og, link-preview, unfurl, url, composer

The resolver you pass returns title, description, site and an optional image. While it runs, a skeleton holds the space so the composer does not jump.
Title and description can be edited before sharing; the layout toggles between a large card and a compact row.

### Usage

```tsx
import { LinkPreview } from '@/components/sundae/link-preview'

<LinkPreview />
```

### Props

- `resolve` (`(url: string) => Promise<{ title: string; description?: string; site: string; image?: boolean }>`, required): Fetches metadata.
- `url` (`string`): Starting URL.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Message and post composers, CMS link fields.

### When not to use

- Untrusted URLs without server-side fetching.

### Accessibility

- The preview is an article with its title as a link; edits use labelled inputs.
- Loading state uses aria-busy.
- Reduced motion removes the movement and keeps every state change.