Which frameworks and technologies does Float UI support?

Updated

Float UI supports HTML, React.js, Vue.js, and Svelte.js. All components are built with Tailwind CSS, and you copy and paste the code you need directly into your project. The website templates, by contrast, are built on React and Next.js with Tailwind CSS.

Component support by framework

The Float UI homepage lists four targets under "Use your favorite framework":

  • HTML
  • React.js
  • Vue.js
  • Svelte.js

The workflow is copy-and-paste rather than package installation. You pick a component, copy its markup and Tailwind classes, and paste it into your app. Because the components are styled with Tailwind CSS utility classes, the same component can be adapted across these frameworks as long as your project already has Tailwind CSS configured.

Templates use a narrower stack

The component library is framework-agnostic in the sense above, but the ready-made website templates are not. Float UI describes its template collection as "built on top of React, Next.js with Tailwind CSS." So if you want a full page or site template rather than individual components, plan for a React/Next.js project.

What you need Supported stack
Individual UI components HTML, React.js, Vue.js, Svelte.js
Styling layer Tailwind CSS
Website templates React, Next.js, Tailwind CSS

What this means for your choice

  • If you use React or Next.js: you can use both the components and the templates.
  • If you use Vue, Svelte, or plain HTML: the components are usable, but the templates are not built for your stack — you would need to port them.
  • If you don't use Tailwind CSS: the components depend on Tailwind utility classes, so you would need to add Tailwind or convert the styles.

Float UI's own framing is speed: "Build and ship fast with Tailwind CSS UI components," with components described as responsive, customizable, and copy-and-paste ready. That copy-and-paste model is what makes multi-framework support possible — there is no framework-specific package to install, so the same component code can be dropped into different projects.

Quick check before you start

  1. Confirm your project uses Tailwind CSS (or you're willing to add it).
  2. Match your framework to the list above — HTML, React, Vue, or Svelte for components.
  3. If you want a full template, confirm you're on React/Next.js.
  4. Copy the component, paste it in, and adjust the Tailwind classes to fit your design.