Report an issue

Link Preview

Displays a summarized preview of a linked content's details or information.

	<script lang="ts">
  import { Avatar, LinkPreview } from "bits-ui";
  import { CalendarBlank, MapPin } from "$icons/index.js";
  let loadingStatusTrigger: Avatar.RootProps["loadingStatus"] = "loading";
  let loadingStatusContent: Avatar.RootProps["loadingStatus"] = "loading";
</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}
  >
    <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

LinkPreview.Root

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 null

Default: undefined
onOutsideClick
function

A callback function called when a click occurs outside of the element. If event.preventDefault() is called, the default behavior of closing the element will be prevented.

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

LinkPreview.Trigger

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 asChild prop with delegation.

Data Attribute Value Description
data-state
enum

The open state of the link preview.

data-link-preview-trigger
——

Present on the trigger element.

LinkPreview.Content

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 true, overrides the side and align options to prevent collisions with the boundary edges. Floating UI reference.

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 asChild prop with delegation.

Data Attribute Value Description
data-state
enum

The open state of the link preview.

data-link-preview-content
——

Present on the content element.

LinkPreview.Arrow

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 asChild prop with delegation.

Data Attribute Value Description
data-arrow
——

Present on the arrow element.

data-link-preview-arrow
——

Present on the arrow element.