Components

Link Preview

Enable sighted users to preview content behind a link.

Structure

	<script lang="ts">
  import { LinkPreview } from "bits-ui";
</script>
 
<LinkPreview.Root>
  <LinkPreview.Trigger />
  <LinkPreview.Content />
</LinkPreview.Root>

	<script lang="ts">
  import { LinkPreview } from "bits-ui";
</script>
 
<LinkPreview.Root>
  <LinkPreview.Trigger />
  <LinkPreview.Content />
</LinkPreview.Root>

Component API

Root

The root component used to manage the state of the state of the link preview.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`openDelay`	`700`	`number` The amount of time in milliseconds to delay opening the preview when hovering over the trigger.
`closeDelay`	`300`	`number` The amount of time in milliseconds to delay closing the preview when the mouse leaves the trigger.
`positioning`	`{ position: "bottom", align: "center" }`	`FloatingConfig` The positioning configuration for the preview. (docs coming soon)
`closeOnOutsideClick`	`true`	`boolean` Whether or not to close the preview when clicking outside of it.
`closeOnEscape`	`true`	`boolean` Whether or not to close the preview when pressing the escape key.
`open`	`false`	`boolean` The open state of the link preview component.
`onOpenChange`	-	`(open: boolean) => void` A callback that fires when the open state changes.

Trigger

A component which triggers the opening and closing of the link preview on hover or focus.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

Data Attribute	Value/Description
`data-state`	`'open' \| 'closed'` The open state of the link preview.

Content

The contents of the link preview which are displayed when the preview is open.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

Data Attribute	Value/Description
`data-state`	`'open' \| 'closed'` The open state of the link preview.

Arrow

An optional arrow element which points to the trigger when the preview is open.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`size`	`8`	`number` The height and width of the arrow in pixels.

Data Attribute	Value/Description
`data-arrow`	Present on the arrow element.

🚧 UNDER CONSTRUCTION 🚧