Floatui
Beautiful and responsive UI components and templates for React and Vue (soon) with Tailwind CSS.
Install / Use
/learn @MarsX-dev/FloatuiREADME
Float UI is a collection of modern UI components and website templates built on top of React, and soon, Vue. With Tailwind CSS, the components are beautifully designed and expertly crafted, allowing you to build beautiful websites.
Why Float UI?
Float UI is fully free and open source. You don't need to pay anything to use it, and we are working on it full-time, so we'll keep improving and adding more UIs. If you’re working on a large project that requires a high level of UI customization or you find yourself repeating the same UI patterns across projects, consider creating an internal UI library. In this case, Float UI is a great choice. You should definitely use it.
Prerequisites
Before you begin, ensure you have met the following requirements:
- You have installed the latest version of npm/yarn/pnpm.
- You have a
Windows/Linux/Macmachine.
Getting Started
First, install the dependencies. We highly recommend using pnpm, and run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
Open http://localhost:3000 with your browser to see the result.
Quick start
-
<strong>UI components :</strong> UI components for React and Vue (soon) with Tailwind, every example support both directions LTR and RTL.
-
<strong>Website templates :</strong> A collection of professional and beautifully designed website templates, built on top of React, Next.js and Nuxt (soon) with Tailwind CSS.
Contributing
If you're interested in contributing to Float UI, please read our contributing guide to learn about our development process before submitting a pull request.
Related Skills
bluebubbles
333.3kUse when you need to send or manage iMessages via BlueBubbles (recommended iMessage integration). Calls go through the generic message tool with channel="bluebubbles".
slack
333.3kUse when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
frontend-design
82.0kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Agent Development
82.0kThis skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
