Code Monkey home page Code Monkey logo

floatui's Introduction

Float UI logo

Float UI is collection of modern UI components and website templates built on top of React, and Vue (soon) with Tailwind CSS, the components are beautiful designed, expertly crafted, allow you to build beautiful websites.

Why Float UI?

First, 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, the second thing 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, and in this case Float UI is a great choice. You should definitely use it.

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

  • UI components : UI components for React and Vue (soon) with Tailwind, every example support both directions LTR and RTL.

  • Website templates : 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.

floatui's People

Contributors

florianbeme avatar ijkml avatar jayadipsahoo avatar lockieluke avatar roileo avatar shaikahmadnawaz avatar shubhamnagota avatar sididev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

floatui's Issues

Error when running

Warning: Invalid DOM property clip-path. Did you mean clipPath?
at g
at svg
at IconGithub (webpack-internal:///./components/icons/IconGithub.tsx:8:23)
at a
at div
at nav
at header
at WEBPACK_DEFAULT_EXPORT
at main
at Home
at AppProvider (webpack-internal:///./context/contextApp.tsx:19:13)
at App (webpack-internal:///./pages/_app.tsx:16:16)
at StyleRegistry (F:\React\floatui-main_3\floatui-main\node_modules.pnpm\[email protected][email protected]\node_modules\styled-jsx\dist\index\index.js:449:36)
at PathnameContextProviderAdapter (F:\React\floatui-main_3\floatui-main\node_modules.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\shared\lib\router\adapters.js:60:11)
at AppContainer (F:\React\floatui-main_3\floatui-main\node_modules.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\render.js:290:29)
at AppContainerWithIsomorphicFiberStructure (F:\React\floatui-main_3\floatui-main\node_modules.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\render.js:326:57)
at div
at Body (F:\React\floatui-main_3\floatui-main\node_modules.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\render.js:613:21)
Warning: Invalid DOM property fill-rule. Did you mean fillRule?
at path
at g
at svg
at IconGithub (webpack-internal:///./components/icons/IconGithub.tsx:8:23)
at a
at div
at nav
at header
at WEBPACK_DEFAULT_EXPORT
at main
at Home
at AppProvider (webpack-internal:///./context/contextApp.tsx:19:13)
at App (webpack-internal:///./pages/_app.tsx:16:16)
at StyleRegistry (F:\React\floatui-main_3\floatui-main\node_modules.pnpm\[email protected][email protected]\node_modules\styled-jsx\dist\index\index.js:449:36)
at PathnameContextProviderAdapter (F:\React\floatui-main_3\floatui-main\node_modules.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\shared\lib\router\adapters.js:60:11)
at AppContainer (F:\React\floatui-main_3\floatui-main\node_modules.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\render.js:290:29)
at AppContainerWithIsomorphicFiberStructure (F:\React\floatui-main_3\floatui-main\node_modules.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\render.js:326:57)
at div
at Body (F:\React\floatui-main_3\floatui-main\node_modules.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\render.js:613:21)
Warning: Invalid DOM property clip-rule. Did you mean clipRule?
at path
at g
at svg
at IconGithub (webpack-internal:///./components/icons/IconGithub.tsx:8:23)
at a
at div
at nav
at header
at WEBPACK_DEFAULT_EXPORT
at main
at Home
at AppProvider (webpack-internal:///./context/contextApp.tsx:19:13)
at App (webpack-internal:///./pages/_app.tsx:16:16)
at StyleRegistry (F:\React\floatui-main_3\floatui-main\node_modules.pnpm\[email protected][email protected]\node_modules\styled-jsx\dist\index\index.js:449:36)
at PathnameContextProviderAdapter (F:\React\floatui-main_3\floatui-main\node_modules.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\shared\lib\router\adapters.js:60:11)
at AppContainer (F:\React\floatui-main_3\floatui-main\node_modules.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\render.js:290:29)
at AppContainerWithIsomorphicFiberStructure (F:\React\floatui-main_3\floatui-main\node_modules.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\render.js:326:57)
at div
at Body (F:\React\floatui-main_3\floatui-main\node_modules.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\render.js:613:21)

I am getting this error after building

FloatUI Vue

Hi 👋, read that you want to add vue components. It's something (I think) I can help with. Please can you provide guidelines? Is there any template or pattern to follow?

Support for svelte

Hey there,

Would you consider adding svelte as a supported web framework? And if so, are accepting pull requests?

Work on responsive Sidebar

Hello,

I'd like to work on the responsive Sidebars already on the site.
At the moment, in the mobile version, the sidebars cover the screen and other content no longer appears.

I'd like to turn the sidebar into a burger menu in the mobile version.

Import UI components figma?

Hello, the project is amazing.
Congratulations to all those responsible.

Sorry if my question is amateur, but I would like to know if it is possible to import the design components in figma and when adjusting, color, titles, block, spacing, the update would be noticed in the online model.

I would like to use the project to assemble internal frameworks before the complete modeling of a page.

thank you for your attention

CDN

Does float-ui have public CDN ?

Angular Support

Hey there,

Would you consider adding angular as a supported web framework?

Opening a UI component shows nothing

Every time I open a component to see the examples and code I can't see anything, I remember that a couple of days ago it was working fine. I tried on 3 browsers, Brave, Safari and Firefox, all of them I get the same problem, I also tried on my phone.

Screenshot 2023-03-28 at 10 10 06 PM

Typo on floatui.com Homepage

There is a typo on the floatui.com's homepage.
If you scroll down a bit to features to see the demonstration image of Modern UI Components (LTR/RTL feature) you will find "Software" is spelled as "Softaware".

Screenshot_2023-03-26-19-58-18_1920x1080

Could not clone the repository

invalid index-pack output
Unlink of file 'floatui/.git/objects/pack/tmp_pack_ahDJyT' failed.

this error is being shown after writing the git clone command in the terminal/powershell.

Components are not tested

Hi,

Thanks for sharing your components and themes for free.

I was thinking about testing some of your components and wanted to check with you first: Is there a reason why components haven't been tested yet? Is it because there hasn't been enough time or do you feel it's not necessary for this project?

Float UI: the next version improvements

Float UI is now 2 years old, which means it's enough time to understand what people need, and what are their problems with UI libraries, and in this case we decided to take the next curve for Float UI to improve it.

What's next in Float UI

  • Rebuild the website
  • Support Radix with Reactjs
  • Support HTML with Alpinejs
  • Support Vuejs
  • Support Svelte

Empty folder with submodule icon in FloatUI repository

Description

The templates/mailgo folder in the FloatUI repository contains a submodule icon but is empty. There is no .gitmodules file in the repository to initialize the submodule. As a result, the contents of the folder cannot be accessed.

Steps to Reproduce

Fork or clone the FloatUI repository from https://github.com/MarsX-dev/floatui
Navigate to the templates/mailgo folder
Observe that the folder is empty and the submodule icon is present

Expected Behavior

The templates/mailgo folder should contain files relevant to the FloatUI project.

Actual Behavior

The templates/mailgo folder is empty.

Environment

Operating system: macOS Ventura 13.2.1
Git version 2.37.0

Attempts

A commit message has been found which confirms that the templates/mailgo folder is a submodule in the FloatUI repository. The commit message states that the submodule was added in commit ce7759e with the commit hash b31757 as the reference for the submodule.

git submodule init and git submodule update have been executed, but it seems that the submodule reference is not being properly initialized or updated in the local copy of the repository. Further investigation may be needed to determine the cause of the issue.

Error Messages or Logs

The following error message was encountered when executing the git submodule init command:
fatal: No se encontró url para la ruta del submódulo 'templates/mailgo' en .gitmodules

This translates to fatal: No URL found for submodule path 'templates/mailgo' in .gitmodules

This error message suggests that the submodule reference for templates/mailgo may not be properly configured in the .gitmodules file.

References

There are no additional references.

Homepage 'Get Started' Button Does Not Navigate to Components Page in CTA section

@sidiDev, I just found another similar navigation issue,

Screenshot (1384)

Steps to Reproduce:

  1. Visit the homepage of floatui.com.
  2. Locate the 'Get Started' button.
  3. Click on the 'Get Started' button.

Expected Behavior:
After clicking on the 'Get Started' button, the user should be redirected to the following URL: https://www.floatui.com/components.

Actual Behavior:
After clicking on the 'Get Started' button, there is no redirection, and the user remains on the homepage.

Pull Request Offer:
I am ready and willing to contribute a pull request to address this issue. If there are any specific guidelines or preferences for contributing to the project, please provide them.

change in modal

as I remember a couple of times I used Modal component,
there was not such a thing like:
import * as Dialog from "@radix-ui/react-dialog";

advantage o using floatui for me was not using anything but tailwindcss itself

Homepage 'Get Started' Button Does Not Navigate to Components Page

Steps to Reproduce:

  1. Visit the homepage of floatui.com.
  2. Locate the 'Get Started' button.
  3. Click on the 'Get Started' button.

Screenshot (1382)

Expected Behavior:
After clicking on the 'Get Started' button, the user should be redirected to the following URL: https://www.floatui.com/components.

Actual Behavior:
After clicking on the 'Get Started' button, there is no redirection, and the user remains on the homepage.

Pull Request Offer:
I am ready and willing to contribute a pull request to address this issue. If there are any specific guidelines or preferences for contributing to the project, please provide them.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.