Link Preview
Displays a summarized preview of a linked content's details or information.
<script lang="ts">
import { LinkPreview, Avatar } from "bits-ui";
import { flyAndScale } from "@/utils/index.js";
import { MapPin, CalendarBlank } from "$icons/index.js";
let loadingStatusTrigger: Avatar.Props["loadingStatus"] = undefined;
let loadingStatusContent: Avatar.Props["loadingStatus"] = undefined;
</script>
<LinkPreview.Root>
<LinkPreview.Trigger
href="https://github.com/sveltejs"
target="_blank"
rel="noreferrer noopener"
class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
>
<Avatar.Root
bind:loadingStatus={loadingStatusTrigger}
class="h-12 w-12 rounded-full border {loadingStatusTrigger === 'loaded'
? 'border-foreground'
: 'border-transparent'} bg-muted text-[17px] font-medium uppercase text-muted-foreground"
>
<div
class="flex h-full w-full items-center justify-center overflow-hidden rounded-full border-2 border-transparent"
>
<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
<Avatar.Fallback class="border border-muted">HB</Avatar.Fallback>
</div>
</Avatar.Root>
</LinkPreview.Trigger>
<LinkPreview.Content
class="w-[331px] rounded-xl border border-muted bg-background p-[17px] shadow-popover"
sideOffset={8}
transition={flyAndScale}
transitionConfig={{ duration: 150, y: -8 }}
>
<div class="flex space-x-4">
<Avatar.Root
bind:loadingStatus={loadingStatusContent}
class="h-12 w-12 rounded-full border {loadingStatusContent === 'loaded'
? 'border-foreground'
: 'border-transparent'} bg-muted text-[17px] font-medium uppercase text-muted-foreground"
>
<div
class="flex h-full w-full items-center justify-center overflow-hidden rounded-full border-2 border-transparent"
>
<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
<Avatar.Fallback class="border border-muted">HB</Avatar.Fallback>
</div>
</Avatar.Root>
<div class="space-y-1 text-sm">
<h4 class="font-medium">@huntabyte</h4>
<p>I do things on the internet.</p>
<div
class="flex items-center gap-[21px] pt-2 text-xs text-muted-foreground"
>
<div class="flex items-center text-xs">
<MapPin class="mr-1 size-4" />
<span> FL, USA </span>
</div>
<div class="flex items-center text-xs">
<CalendarBlank class="mr-1 size-4" />
<span> Joined May 2020</span>
</div>
</div>
</div>
</div>
</LinkPreview.Content>
</LinkPreview.Root>
Structure
<script lang="ts">
import { LinkPreview } from "bits-ui";
</script>
<LinkPreview.Root>
<LinkPreview.Trigger />
<LinkPreview.Content />
</LinkPreview.Root>
API Reference
The root component used to manage the state of the state of the link preview.
| Property | Type | Description |
|---|---|---|
openDelay | number | The amount of time in milliseconds to delay opening the preview when hovering over the trigger. Default:
700 |
closeDelay | number | The amount of time in milliseconds to delay closing the preview when the mouse leaves the trigger. Default:
300 |
closeOnOutsideClick | boolean | Whether or not to close the preview when clicking outside of it. Default:
true |
closeOnEscape | boolean | Whether or not to close the preview when pressing the escape key. Default:
true |
open | boolean | The open state of the link preview component. Default:
false |
onOpenChange | function | A callback that fires when the open state changes. Default:
—— undefined |
portal | union | Where to render the link preview when it is open. Defaults to the body. Can be disabled by passing Default:
—— undefined |
onOutsideClick | function | A callback function called when a click occurs outside of the element. If Default:
—— undefined |
| Slot Property | Type | Description |
|---|---|---|
ids | object | The ids of the elements within the component, useful when you don't necessarily want to provide a custom ID, but still want access to the ID being assigned (if any). |
A component which triggers the opening and closing of the link preview on hover or focus.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLAnchorElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
—— undefined |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-state | enum | The open state of the link preview. |
data-link-preview-trigger | —— | Present on the trigger element. |
The contents of the link preview which are displayed when the preview is open.
| Property | Type | Description |
|---|---|---|
transition | function | A Svelte transition function to use when transitioning the content in and out. Default:
—— undefined |
transitionConfig | TransitionConfig | The configuration to apply to the transition. Default:
—— undefined |
inTransition | function | A Svelte transition function to use when transitioning the content in and out. Default:
—— undefined |
inTransitionConfig | TransitionConfig | The configuration to apply to the transition. Default:
—— undefined |
outTransition | function | A Svelte transition function to use when transitioning the content in and out. Default:
—— undefined |
outTransitionConfig | TransitionConfig | The configuration to apply to the transition. Default:
—— undefined |
side | enum | The preferred side of the anchor to render against when open. Will be reversed when collisions occur. Floating UI reference. Default:
—— undefined |
sideOffset | number | The amount of offset to apply to the menu's position on the x-axis. Floating UI reference. Default:
0 |
align | enum | The preferred alignment of the anchor to render against when open. Floating UI reference. Default:
—— undefined |
alignOffset | number | An offset in pixels from the 'start' or 'end' alignment options. Floating UI reference. Default:
0 |
avoidCollisions | boolean | When Default:
true |
collisionBoundary | union | A boundary element or array of elements to check for collisions against. Floating UI reference. Default:
—— undefined |
collisionPadding | number | The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision. Floating UI reference. Default:
0 |
fitViewport | boolean | Whether the floating element should be constrained to the viewport. Floating UI reference. Default:
false |
sameWidth | boolean | Whether the content should be the same width as the trigger. Floating UI reference. Default:
false |
strategy | enum | The positioning strategy to use for the floating element. Floating UI reference. Default:
absolute |
overlap | boolean | Whether the floating element can overlap the reference element. Floating UI reference. Default:
false |
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
—— undefined |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-state | enum | The open state of the link preview. |
data-link-preview-content | —— | Present on the content element. |
An optional arrow element which points to the trigger when the preview is open.
| Property | Type | Description |
|---|---|---|
size | number | The height and width of the arrow in pixels. Default:
8 |
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
—— undefined |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-arrow | —— | Present on the arrow element. |
data-link-preview-arrow | —— | Present on the arrow element. |