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";
  import { flyAndScale } from "$lib/utils/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}
    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

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.