Skip to content
Floating UI Plus
llms.txt
llms.txt

Demo walkthrough

The demo is an executable companion to the documentation. Each example has a dedicated guide with the behavior it demonstrates, the important API choices, and a direct link to the live route.

All routes accept framework=wc (Web Components, the default) or framework=vue. The previous framework=web-components value is still read as Web Components for bookmarked links, but new links use the shorter wc token. The combobox route also accepts source=fuzzy or source=server.

Reusing an example

Section titled “Reusing an example”

Install @floating-ui-plus/web-components for a Web Components example or @floating-ui-plus/vue for a Vue example. Each adapter resolves @floating-ui-plus/web through its own package dependency; the example code imports Floating UI Plus APIs only from its selected adapter. Vue itself is the Vue adapter’s peer dependency.

The source tabs show components from this demo application. Data, labels, styles, and the simulated server belong to the application rather than the adapter packages. If an example imports one of those files, copy the relevant application code or replace it with your own. The fuzzy Query and server Query guides show their supporting search code. The release check also builds the public imports used by every example from packed adapter packages in independent consumer projects.

Interaction demos

Section titled “Interaction demos”
  • Tooltip: hover, focus, safe polygon, and arrow.
  • Popover: root-owned template and native Popover.
  • Menu: list navigation, typeahead, and looping.
  • Nested menu: coordinated roots and focus restoration.
  • Client point: cursor-following virtual reference.
  • Combobox: fuzzy search: local typo-tolerant matching.
  • Combobox: server search: cancellable cursor-based requests.
  • Placement: all typed placement values.
  • Middleware: eight positioning middleware comparisons.
  • Modal: native dialog, nested surfaces, and focus traps.
  • Sheet: four edge positions, backdrop dismissal, and exit animation.
  • Toast: stacked notifications, opt-in hover/focus pause, a hit box sized to the current stack, readable paused row spacing, F6 navigation, and exit presence.
  • Command: searchable grouped actions in a keyboard-operable dialog palette.

The Usage recipes page covers reusable compositions; these pages explain what each demo is doing differently.