Skeleton

Floating UI Svelte

Please note this section will be the future home of the Floating UI Svelte integrateion guide, an upcoming open-source library from Skeleton Labs. While this project is in development, we have provided several Svelte-specific components to act as temporary substitutions. Note that these components will remain available until our next major release (Skeleton v4.x). However, the goal will be to replace these with Floating UI Svelte as soon as possible.

Components

Triggers an anchored popover when you click the trigger element. View API Reference.

<script lang="ts">
  import { Popover } from '@skeletonlabs/skeleton-svelte';
  import IconX from 'lucide-svelte/icons/x';

  let openState = $state(false);

  function popoverClose() {
    openState = false;
  }
</script>

<Popover
  bind:open={openState}
  positioning={{ placement: 'top' }}
  triggerBase="btn preset-tonal"
  contentBase="card bg-surface-200-800 p-4 space-y-4 max-w-[320px]"
  arrow
  arrowBackground="!bg-surface-200 dark:!bg-surface-800"
>
  {#snippet trigger()}Click Me{/snippet}
  {#snippet content()}
    <header class="flex justify-between">
      <p class="font-bold type-scale-5">Popover Example</p>
      <button class="btn-icon hover:preset-tonal" onclick={popoverClose}><IconX /></button>
    </header>
    <article>
      <p class="opacity-60">
        This will display a basic popover with a header and body. This also includes a title, description, and close button.
      </p>
    </article>
  {/snippet}
</Popover>

// Use the following settings to populate the `positioning` component property.
// See also: https://floating-ui.com/docs/middleware

export type PositioningOptions = {
  /** Whether the popover should be hidden when the reference element is detached */
    hideWhenDetached?: boolean;
    /** The strategy to use for positioning */
    strategy?: "absolute" | "fixed";
    /** The initial placement of the floating element */
    placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
    /** The offset of the floating element */
    offset?: {  mainAxis?: number; crossAxis?: number; };
    /** The main axis offset or gap between the reference and floating elements */
    gutter?: number;
    /** The secondary axis offset or gap between the reference and floating elements */
    shift?: number;
    /** The virtual padding around the viewport edges to check for overflow */
    overflowPadding?: number;
    /** The minimum padding between the arrow and the floating element's corner. */
    arrowPadding?: number;
    /** Whether to flip the placement */
    flip?: boolean | Placement[];
    /** Whether the popover should slide when it overflows. */
    slide?: boolean;
    /** Whether the floating element can overlap the reference element */
    overlap?: boolean;
    /** Whether to make the floating element same width as the reference element */
    sameWidth?: boolean;
    /** Whether the popover should fit the viewport. */
    fitViewport?: boolean;
    /** The overflow boundary of the reference element */
    boundary?: () => Boundary;
    /** Options to activate auto-update listeners */
    listeners?: boolean | AutoUpdateOptions;
    /** Function called when the placement is computed */
    onComplete?(data: ComputePositionReturn): void;
    /** Function called when the floating element is positioned or not */
    onPositioned?(data: {  placed: boolean; }): void;
    /** Function that returns the anchor rect */
    getAnchorRect?: (element: HTMLElement | VirtualElement | null) => AnchorRect | null;
    /** A callback that will be called when the popover needs to calculate its position. */
    updatePosition?: (data: { updatePosition: () => Promise<void>; }) => void | Promise<void>;
}

Triggers an anchored popover when you hover the trigger element. View API Reference.

<script lang="ts">
  import { Tooltip } from '@skeletonlabs/skeleton-svelte';
  let openState = $state(false);
</script>

<Tooltip
  bind:open={openState}
  positioning={{ placement: 'top' }}
  triggerBase="underline"
  contentBase="card preset-filled p-4"
  openDelay={200}
>
  {#snippet trigger()}Hover Me{/snippet}
  {#snippet content()}This is a tooltip.{/snippet}
</Tooltip>

// Use the following settings to populate the `positioning` component property.
// See also: https://floating-ui.com/docs/middleware

export type PositioningOptions = {
  /** Whether the popover should be hidden when the reference element is detached */
    hideWhenDetached?: boolean;
    /** The strategy to use for positioning */
    strategy?: "absolute" | "fixed";
    /** The initial placement of the floating element */
    placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
    /** The offset of the floating element */
    offset?: {  mainAxis?: number; crossAxis?: number; };
    /** The main axis offset or gap between the reference and floating elements */
    gutter?: number;
    /** The secondary axis offset or gap between the reference and floating elements */
    shift?: number;
    /** The virtual padding around the viewport edges to check for overflow */
    overflowPadding?: number;
    /** The minimum padding between the arrow and the floating element's corner. */
    arrowPadding?: number;
    /** Whether to flip the placement */
    flip?: boolean | Placement[];
    /** Whether the popover should slide when it overflows. */
    slide?: boolean;
    /** Whether the floating element can overlap the reference element */
    overlap?: boolean;
    /** Whether to make the floating element same width as the reference element */
    sameWidth?: boolean;
    /** Whether the popover should fit the viewport. */
    fitViewport?: boolean;
    /** The overflow boundary of the reference element */
    boundary?: () => Boundary;
    /** Options to activate auto-update listeners */
    listeners?: boolean | AutoUpdateOptions;
    /** Function called when the placement is computed */
    onComplete?(data: ComputePositionReturn): void;
    /** Function called when the floating element is positioned or not */
    onPositioned?(data: {  placed: boolean; }): void;
    /** Function that returns the anchor rect */
    getAnchorRect?: (element: HTMLElement | VirtualElement | null) => AnchorRect | null;
    /** A callback that will be called when the popover needs to calculate its position. */
    updatePosition?: (data: { updatePosition: () => Promise<void>; }) => void | Promise<void>;
}

Combobox

Triggers an anchored popover list when you tap the arrow. Includes auto-suggestion via typeahead. View API Reference.

Select Country

<script lang="ts">
  import { Combobox } from '@skeletonlabs/skeleton-svelte';

  interface ComboxData {
    label: string;
    value: string;
  }

  const comboboxData: ComboxData[] = [
    { label: 'United States', value: 'US' },
    { label: 'Germany', value: 'DE' },
    { label: 'Japan', value: 'JP' }
  ];

  let selectedCountry = $state(['US']);
</script>

<Combobox data={comboboxData} bind:value={selectedCountry} label="Select Country" placeholder="Select..." />

Generate modals or dialogs that require a user’s immediate attention. View API Reference.

<script lang="ts">
  import { Modal } from '@skeletonlabs/skeleton-svelte';

  let openState = $state(false);

  function modalClose() {
    openState = false;
  }
</script>

<Modal
  bind:open={openState}
  triggerBase="btn preset-tonal"
  contentBase="card bg-surface-100-900 p-4 space-y-4 shadow-xl max-w-screen-sm"
  backdropClasses="backdrop-blur-sm"
>
  {#snippet trigger()}Open Modal{/snippet}
  {#snippet content()}
    <header class="flex justify-between">
      <h2 class="h2">Modal Example</h2>
    </header>
    <article>
      <p class="opacity-60">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, ab adipisci. Libero cumque sunt quis error veritatis amet, expedita
        voluptatem. Quos repudiandae consequuntur voluptatem et dicta quas, reprehenderit velit excepturi?
      </p>
    </article>
    <footer class="flex justify-end gap-4">
      <button type="button" class="btn preset-tonal" onclick={modalClose}>Cancel</button>
      <button type="button" class="btn preset-filled" onclick={modalClose}>Confirm</button>
    </footer>
  {/snippet}
</Modal>

<script lang="ts">
  import { Modal } from '@skeletonlabs/skeleton-svelte';

  let drawerState = $state(false);

  function drawerClose() {
    drawerState = false;
  }
</script>

<!--
Tips for Drawer modals:
- Use `contentBase` to set styles, incuding height/width
- Set justify-start to align to the left
- Clear the align and padding styles
- Use `positionerClasses` to set the
- Set transition.x values that matches content width in pixels
-->

<Modal
  bind:open={drawerState}
  triggerBase="btn preset-tonal"
  contentBase="bg-surface-100-900 p-4 space-y-4 shadow-xl w-[480px] h-screen"
  positionerJustify="justify-start"
  positionerAlign=""
  positionerPadding=""
  transitionsPositionerIn={{ x: -480, duration: 200 }}
  transitionsPositionerOut={{ x: -480, duration: 200 }}
>
  {#snippet trigger()}Open Drawer{/snippet}
  {#snippet content()}
    <header class="flex justify-between">
      <h2 class="h2">Drawer Example</h2>
    </header>
    <article>
      <p class="opacity-60">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, ab adipisci. Libero cumque sunt quis error veritatis amet, expedita
        voluptatem. Quos repudiandae consequuntur voluptatem et dicta quas, reprehenderit velit excepturi?
      </p>
    </article>
    <footer>
      <button type="button" class="btn preset-filled" onclick={drawerClose}>Close Drawer</button>
    </footer>
  {/snippet}
</Modal>

Native Browser APIs

Skeleton will always favor native browser APIs over third-party libraries such as Floating UI Svelte. The following is a list of current and upcoming incoming APIs we will aim to support in the future, but are not quite standardized cross-browser yet.

API Reference

Popover

Property	Type	Description
`open`		Set the open state of the popover.
`arrow`		Enable display of the popover arrow.
`triggerBase`	string	Set base classes for the trigger.
`triggerBackground`	string	Set background classes for the trigger.
`triggerClasses`	string	Provide arbitrary classes for the trigger.
`positionerBase`	string	Set base classes for the positioner.
`positionerZIndex`	string	Set z-index classes for the positioner.
`positionerClasses`	string	Provide arbitrary classes for the positioner.
`contentBase`	string	Set base classes for the content.
`contentBackground`	string	Set background classes for the content.
`contentClasses`	string	Provide arbitrary classes for the content.
`arrowBase`	string	Set base classes for the arrow.
`arrowBackground`	string	Set background classes for the arrow.
`arrowClasses`	string	Provide arbitrary classes for the arrow.
`trigger`		Provide the the trigger element, such as a button.
`content`		Provide the template contents of the popover itself.
`ids`		The ids of the elements in the popover. Useful for composition.
`modal`		Whether the popover should be modal. When set to `true`: - interaction with outside elements will be disabled - only popover content will be visible to screen readers - scrolling is blocked - focus is trapped within the popover Default: false
`portalled`		Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position of the popover content. Default: true
`autoFocus`		Whether to automatically set focus on the first focusable content within the popover when opened. Default: true
`initialFocusEl`		The element to focus on when the popover is opened.
`closeOnInteractOutside`		Whether to close the popover when the user clicks outside of the popover. Default: true
`closeOnEscape`		Whether to close the popover when the escape key is pressed. Default: true
`onOpenChange`		Function invoked when the popover opens or closes
`positioning`		The user provided options used to position the popover content
`open.controlled`		Whether the popover is controlled by the user
`getRootNode`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`dir`		The document's text/writing direction. Default: "ltr"
`onEscapeKeyDown`		Function called when the escape key is pressed
`onPointerDownOutside`		Function called when the pointer is pressed down outside the component
`onFocusOutside`		Function called when the focus is moved outside the component
`onInteractOutside`		Function called when an interaction happens outside the component
`persistentElements`		Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event

Tooltip

Property	Type	Description
`open`		Set the open state of the tooltip.
`triggerBase`	string	Set base styles for the trigger.
`triggerBackground`	string	Set background styles for the trigger.
`triggerClasses`	string	Provide arbitrary styles for the trigger.
`positionerBase`	string	Set base classes for the positioner.
`positionerZIndex`	string	Set z-index classes for the positioner.
`positionerClasses`	string	Provide arbitrary classes for the positioner.
`contentBase`	string	Set base styles for the content.
`contentBackground`	string	Set background styles for the content.
`contentClasses`	string	Provide arbitrary styles for the content.
`trigger`		Provide the the trigger element, such as a button.
`content`		Provide the template contents of the tooltip itself.
`ids`		The ids of the elements in the tooltip. Useful for composition.
`openDelay`	number	The open delay of the tooltip. Default: 1000
`closeDelay`	number	The close delay of the tooltip. Default: 500
`closeOnPointerDown`		Whether to close the tooltip on pointerdown. Default: true
`closeOnEscape`		Whether to close the tooltip when the Escape key is pressed. Default: true
`closeOnScroll`		Whether the tooltip should close on scroll Default: true
`closeOnClick`		Whether the tooltip should close on click Default: true
`interactive`		Whether the tooltip's content is interactive. In this mode, the tooltip will remain open when user hovers over the content. Default: false
`onOpenChange`		Function called when the tooltip is opened.
`aria-label`	string	Custom label for the tooltip.
`positioning`		The user provided options used to position the popover content
`disabled`		Whether the tooltip is disabled
`open.controlled`		Whether the tooltip is controlled by the user
`dir`		The document's text/writing direction. Default: "ltr"
`getRootNode`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

Combobox

Property	Type	Description
`data`		Provide the list of label and value data
`value`		Bind the selected value.
`label`	string	Set the label to display.
`base`	string	Set base classes for the root element.
`width`	string	Set width classes for the root element.
`classes`	string	Provide arbitrary classes for the root element.
`labelBase`	string	Set base classes for the label.
`labelText`	string	Set text and font classes for the label.
`labelClasses`	string	Provide arbitrary classes for the label.
`inputGroupBase`	string	Set base classes for the input group.
`inputGroupInput`	string	Set input classes for the input group.
`inputGroupButton`	string	Set button classes for the input group.
`inputGroupArrow`	string	Set arrow classes for the input group.
`inputGroupClasses`	string	Provide arbitrary classes for the input group.
`positionerBase`	string	Set base classes for the positioner.
`positionerZIndex`	string	Set z-index classes for the positioner.
`positionerClasses`	string	Provide arbitrary classes for the positioner.
`contentBase`	string	Set base classes for the content.
`contentBackground`	string	Set background classes for the content.
`contentSpaceY`	string	Set space-y classes for the content.
`contentClasses`	string	Provide arbitrary classes for the content.
`optionBase`	string	Set base classes for the option.
`optonFocus`	string	Set focus classes for the option.
`optionHover`	string	Set hover classes for the option.
`optionActive`	string	Set active classes for the option.
`optionClasses`	string	Provide arbitrary classes for the option.
`arrow`		Provide a custom arrow icon.
`open`		Whether the combobox is open
`open.controlled`		Whether the combobox open state is controlled by the user
`ids`		The ids of the elements in the combobox. Useful for composition.
`inputValue`	string	The current value of the combobox's input
`name`	string	The `name` attribute of the combobox's input. Useful for form submission
`form`	string	The associate form of the combobox.
`disabled`		Whether the combobox is disabled
`readOnly`		Whether the combobox is readonly. This puts the combobox in a "non-editable" mode but the user can still interact with it
`invalid`		Whether the combobox is invalid
`required`		Whether the combobox is required
`placeholder`	string	The placeholder text of the combobox's input
`highlightedValue`	string	The active item's id. Used to set the `aria-activedescendant` attribute
`inputBehavior`		Defines the auto-completion behavior of the combobox. - `autohighlight`: The first focused item is highlighted as the user types - `autocomplete`: Navigating the listbox with the arrow keys selects the item and the input is updated Default: "none"
`selectionBehavior`		The behavior of the combobox input when an item is selected - `replace`: The selected item string is set as the input value - `clear`: The input value is cleared - `preserve`: The input value is preserved Default: "replace"
`autoFocus`		Whether to autofocus the input on mount
`openOnClick`		Whether to open the combobox popup on initial click on the input Default: false
`openOnChange`		Whether to show the combobox when the input value changes Default: true
`allowCustomValue`		Whether to allow typing custom values in the input
`loopFocus`		Whether to loop the keyboard navigation through the items Default: true
`positioning`		The positioning options to dynamically position the menu
`onInputValueChange`		Function called when the input's value changes
`onValueChange`		Function called when a new item is selected
`onHighlightChange`		Function called when an item is highlighted using the pointer or keyboard navigation.
`onOpenChange`		Function called when the popup is opened
`translations`		Specifies the localized strings that identifies the accessibility elements and their states
`multiple`		Whether to allow multiple selection. Good to know: When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`. It is recommended to render the selected items in a separate container.
`closeOnSelect`		Whether to close the combobox when an item is selected.
`openOnKeyPress`		Whether to open the combobox on arrow key press Default: true
`scrollToIndexFn`		Function to scroll to a specific index
`composite`		Whether the combobox is a composed with other composite widgets like tabs Default: true
`disableLayer`		Whether to disable registering this a dismissable layer
`dir`		The document's text/writing direction. Default: "ltr"
`getRootNode`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`onPointerDownOutside`		Function called when the pointer is pressed down outside the component
`onFocusOutside`		Function called when the focus is moved outside the component
`onInteractOutside`		Function called when an interaction happens outside the component

Modal

Property	Type	Description
`open`		Set the open state of the dialog.
`triggerBase`	string	Set base classes for the trigger.
`triggerBackground`	string	Set background classes for the trigger.
`triggerClasses`	string	Provide arbitrary classes for the trigger.
`backdropBase`	string	Set base classes for the backdrop.
`backdropBackground`	string	Set background classes for the backdrop.
`backdropClasses`	string	Provide arbitrary classes for the backdrop.
`positionerBase`	string	Set base classes for the positioner.
`positionerDisplay`	string	Set display classes for the positioner.
`positionerJustify`	string	Set justify classes for the positioner.
`positionerAlign`	string	Set align classes for the positioner.
`positionerPadding`	string	Set padding classes for the positioner.
`positionerZIndex`	string	Set z-index classes for the positioner.
`positionerClasses`	string	Provide arbitrary classes for the positioner.
`contentBase`	string	Set base classes for the content.
`contentBackground`	string	Set background classes for the content.
`contentClasses`	string	Provide arbitrary classes for the content.
`transitionsBackdropIn`
`transitionsBackdropOut`
`transitionsPositionerIn`
`transitionsPositionerOut`
`trigger`		Provide the template contents of the trigger element.
`content`		Provide the template contents of the dialog itself.
`ids`		The ids of the elements in the dialog. Useful for composition.
`trapFocus`		Whether to trap focus inside the dialog when it's opened Default: true
`preventScroll`		Whether to prevent scrolling behind the dialog when it's opened Default: true
`modal`		Whether to prevent pointer interaction outside the element and hide all content below it Default: true
`initialFocusEl`		Element to receive focus when the dialog is opened
`finalFocusEl`		Element to receive focus when the dialog is closed
`restoreFocus`		Whether to restore focus to the element that had focus before the dialog was opened
`onOpenChange`		Callback to be invoked when the dialog is opened or closed
`closeOnInteractOutside`		Whether to close the dialog when the outside is clicked Default: true
`closeOnEscape`		Whether to close the dialog when the escape key is pressed Default: true
`aria-label`	string	Human readable label for the dialog, in event the dialog title is not rendered
`role`		The dialog's role Default: "dialog"
`open.controlled`		Whether the dialog is controlled by the user
`dir`		The document's text/writing direction. Default: "ltr"
`getRootNode`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`onEscapeKeyDown`		Function called when the escape key is pressed
`onPointerDownOutside`		Function called when the pointer is pressed down outside the component
`onFocusOutside`		Function called when the focus is moved outside the component
`onInteractOutside`		Function called when an interaction happens outside the component
`persistentElements`		Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event