Floating UI vs Semantic UI
Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.
Open source · MIT
A small JavaScript library for positioning tooltips, popovers and dropdowns next to other elements.
Open source · MIT
A CSS and JavaScript UI component framework built around theming and readable HTML.
The short answer
Choose Floating UI if you need…
- Web developers building tooltips, popovers, or dropdown menus
- Teams that need positioning to work inside scrolling containers
- React developers who want both positioning and interaction hooks
- Developers who need a positioning engine for non-DOM platforms such as Canvas or WebGL
Choose Semantic UI if you need…
- Front-end developers who want prebuilt UI components they can restyle with themes
- Teams building responsive websites that need to work across many devices
- Developers integrating a UI layer into React, Angular, Meteor or Ember projects
- Projects that want to customize the look through CSS variables rather than rewriting styles
Side-by-side
| Floating UI | Semantic UI | |
|---|---|---|
| Type | Library | Library |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 32.8k | 51k |
| Setup difficulty | Intermediate | Beginner |
| How you get it | Install with a package manager | Install with a package manager |
| Main language | TypeScript | JavaScript |
| Last code update | 10 days ago | 24 months ago |
What each one is
Floating UI
Floating UI is a small JavaScript library for placing 'floating' elements such as tooltips, popovers, and dropdowns next to another element on a page. It keeps these elements attached to their anchor and adjusts their position so they stay visible when they would otherwise run off the edge of the viewport. For React users it also offers hooks and components for building accessible interactions.
Semantic UI
Semantic UI is a front-end framework that provides ready-made interface pieces such as buttons, menus, grids, dropdowns and popups, styled with CSS. Its README describes it as designed for theming, with many customizable CSS variables and a layered system where settings can be inherited and overridden. It is meant to help developers build responsive web pages using simple HTML markup and JavaScript.
Best for
Floating UI
- Web developers building tooltips, popovers, or dropdown menus
- Teams that need positioning to work inside scrolling containers
- React developers who want both positioning and interaction hooks
- Developers who need a positioning engine for non-DOM platforms such as Canvas or WebGL
Semantic UI
- Front-end developers who want prebuilt UI components they can restyle with themes
- Teams building responsive websites that need to work across many devices
- Developers integrating a UI layer into React, Angular, Meteor or Ember projects
- Projects that want to customize the look through CSS variables rather than rewriting styles
Strengths
Floating UI
- Handles collisions with the viewport so floating elements stay visible, as described in the README
- Supports several frameworks and platforms, including vanilla DOM, React, React Native, Vue, and a core package for custom platforms
- Has a visual test setup with Playwright screenshots, which the README describes as covering every state combination
Semantic UI
- Large set of prebuilt components (the README lists 50+ UI elements) with many CSS variables for theming
- Uses MIT license, which permits free commercial and personal use
- Includes official packages for CSS-only, LESS and several frameworks
Not ideal for
Floating UI
- People who only need a simple static CSS tooltip with no JavaScript, since this library adds a dependency for behavior plain CSS can cover
- Non-developers, because the library is used through code and the README assumes familiarity with npm and JavaScript frameworks
Semantic UI
- Projects that must support Internet Explorer 9 or older browsers, because the README says grids and flexbox components may not display correctly there
- Developers who want the newest component approach; the latest release noted in the README is from October 2022 and the last push was November 2024, so activity may be slower than mainstream alternatives
- Anyone who needs a support forum on GitHub, since the README asks users to avoid usage questions in Issues and to use Gitter or StackOverflow instead
Trade-offs
Floating UI
- Requires you to wire up the positioning yourself in code, so it is not a plug-and-play component set
- Feature details beyond the README overview, such as the full API, are only available in the external documentation site
- Popper v2 users need to follow a separate branch and migration guide
Semantic UI
- The README points to a 2022 release as the most recent, and browser support for older systems is limited
- Relies on a build workflow (Gulp, Node) for full customization, which adds setup work for beginners
- Documentation and community support are linked to external sites, so answers may be spread across several places
Getting started
Floating UI
Install for vanilla DOM
npm install @floating-ui/domInstall for React DOM with positioning and interactions
npm install @floating-ui/reactSemantic UI
Install the full framework with npm
npm install semantic-uiInstall the CSS-only package instead
npm install semantic-ui-cssFrequently asked questions
What is the difference between Floating UI and Semantic UI?
Floating UI: A small JavaScript library for positioning tooltips, popovers and dropdowns next to other elements. Semantic UI: A CSS and JavaScript UI component framework built around theming and readable HTML. Floating UI suits web developers building tooltips, popovers, or dropdown menus, while Semantic UI suits front-end developers who want prebuilt ui components they can restyle with themes.
Are Floating UI and Semantic UI free?
Floating UI: Free and open source. Semantic UI: Free and open source.
Which is easier to set up, Floating UI or Semantic UI?
Semantic UI is easier to get started with (rated beginner); Floating UI is rated intermediate and usually needs more setup.
Is Floating UI or Semantic UI more popular?
Semantic UI has more GitHub stars (51k) than Floating UI (32.8k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to Floating UI and Semantic UI?
Other options people compare them with include Driver.js, downshift, Bootstrap, Tailwind CSS, Material UI.
Keep comparing
Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.