Float UI: Now support RTL components

Monday, May 23, 2022

Few months ago, we worked hard on Float UI to build high quality, responsive, and beautiful React UI components to help developers, agencies ...etc to build their websites, web apps quickly, and it was a great experience to work on this project.

When we released The first version of Float UI, the components were only supporting LTR ( Left To Right ) direction, then we thought of building this feature, to allowing people creating their products using both directions LTR and RTL, and also for reach out to more people to use Float UI components.

Today we are very happy to announce the new feature, and now you can use RTL ( Right To Left ) in React with Tailwind CSS and React with pure CSS components, and to understand more about this new feature, let me give you an example.

Here is an example of LTR component

Success

Team member has been added successfully.


export default () => {
    return (
        <div className="mt-12 mx-4 px-4 rounded-md border-l-4 border-green-500 bg-green-50 md:max-w-2xl md:mx-auto">
            <div className="flex justify-between py-3">
                <div className="flex">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 rounded-full text-green-500" viewBox="0 0 20 20" fill="currentColor">
                            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                        </svg>
                    </div>
                    <div className="self-center ml-3">
                        <span className="text-green-600 font-semibold">
                            Success
                        </span>
                        <p className="text-green-600 mt-1">
                            Team member has been added successfully.
                        </p>
                    </div>
                </div>
                <button className="self-start text-green-500">
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
                    </svg>
                </button>
            </div>
        </div>
    )
}

And here is an example of RTL component

نجح

تمت إضافة عضو الفريق بنجاح


export default () => {
    return (
        <div className="mt-12 mx-4 px-4 rounded-md border-r-4 border-green-500 bg-green-50 md:max-w-2xl md:mx-auto">
            <div className="flex justify-between py-3">
                <div className="flex">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 rounded-full text-green-500" viewBox="0 0 20 20" fill="currentColor">
                            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                        </svg>
                    </div>
                    <div className="self-center mr-3">
                        <span className="text-green-600 font-semibold">
                            نجح
                        </span>
                        <p className="text-green-600 mt-1">
                            تمت إضافة عضو الفريق بنجاح
                        </p>
                    </div>
                </div>
                <button className="self-start text-green-500">
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
                    </svg>
                </button>
            </div>
        </div>
    )
}

You can copy the code to test it out, or visit Float UI components