Vishal Yadav

Posted on Sep 13

Launching Oxy-UI: A Powerful and Modern UI Library for Your Web Projects

#webdev #javascript #beginners #programming

Building a sleek, responsive, and engaging user interface is one of the biggest challenges in modern web development. Oxy-UI is here to simplify that process by offering a collection of highly customizable and easy-to-use components designed to enhance any project. Whether you're building a personal blog, an e-commerce platform, or a full-fledged web application, Oxy-UI has you covered.

Why Choose Oxy-UI

Oxy-UI is a feature-rich UI library that provides several benefits to developers:

Modern Design: Components are designed with the latest web design trends in mind, providing a polished and professional look.
Customizability: With built-in class props and flexible designs, you can easily customize components to suit your needs.
Ease of Integration: The library is simple to install and integrate into any project, ensuring you can start using it without hassle.
Performance: Optimized for speed, Oxy-UI ensures your web apps load quickly and perform well across devices.

Components Offered by Oxy-UI

Oxy-UI offers a wide range of components to help you build stunning user interfaces:

Buttons – Create interactive, animated buttons for CTAs and other important actions.
Cards – Design elegant content blocks with built-in hover effects.
Navbars – Implement responsive and customizable navigation bars.
Sidebars – Add off-canvas side navigation for better UX.
Inputs – Create form inputs with built-in validation and styles.
Loaders – Add loading animations for a smooth user experience during data fetches.
Login – Implement login forms with pre-designed styles and validation.
Footers – Customize the footer with social icons, links, and copyright information.
Social Icons – Display icons for popular social platforms with easy customization.
Toasts – Show notifications and alerts with animated toast messages.
Dropdowns – Build custom dropdown menus with ease.
Backgrounds – Add visual interest with grid and dot background options.

How to Integrate Oxy-UI into Your Projects

Oxy-UI is designed to be straightforward to integrate into any React project. Below is a step-by-step guide on how to get started:

Step 1: Install Oxy-UI

To start using Oxy-UI, first, install the library via npm:

npm install oxy-ui

Step 2: Import Oxy-UI Components and Styles

Once the library is installed, you can import the components you need and the global styles. Here's an example of how to use a button component:

import { Button1 } from "oxy-ui";
import "oxy-ui/dist/style.css";

function MyComponent() {
  return (
    <div>
      <Button1>Click Me</Button1>
    </div>
  );
}

export default MyComponent;

This simple example imports the Button1 component and displays it in your app. The same method applies to all other components in Oxy-UI.

Step 3: Customize the Components

One of the great features of Oxy-UI is its flexibility. Most components come with class props and customization options that allow you to tweak their appearance without writing a lot of custom CSS. For example, you can easily add custom styles or change the text inside a button:

import { Button1 } from "oxy-ui";
import "oxy-ui/dist/style.css";

function MyComponent() {
  return (
    <div>
      <Button1 className="bg-blue-500 hover:bg-blue-700">Sign Up</Button1>
    </div>
  );
}

export default MyComponent;

You can apply the same logic to other components like Navbar, Card, Sidebar, and more. Each component is designed to be easily adaptable to your project’s unique style and needs.

Step 4: Explore More Components

Here’s a quick example of how you can use multiple Oxy-UI components together:

import { Navbar1, Sidebar1, Card1, Footer1 } from "oxy-ui";
import "oxy-ui/dist/style.css";

function MyApp() {
  return (
    <>
      <Navbar1 />
      <Sidebar1 />
      <main>
        <Card1 title="Welcome to Oxy-UI" description="Building UI has never been easier!" />
      </main>
      <Footer1 />
    </>
  );
}

export default MyApp;

In this example, we integrate a Navbar, Sidebar, Card, and Footer together to create a complete layout for a web app. You can customize each component with class props to make it fit your design perfectly.

Conclusion

Oxy-UI is an excellent choice for developers looking to streamline their UI development process. With its modern components, ease of customization, and simple integration, it’s a powerful tool for creating polished, professional-looking user interfaces quickly.

Whether you're building small projects or large-scale applications, Oxy-UI can save you time and help you maintain consistent, beautiful designs. Install Oxy-UI today and start enhancing your project’s UI!

Top comments (24)

G.V.S Akhil • Sep 15

This library is no where close to usage:

Whole website is very slow
Getting Started does not work on mobile
Prime or ant design offers tons of components
These are not highly customisable

My suggestion is write posts only when it has some real content... Lets not waste our time...

Vishal Yadav • Sep 15

Yes , i just created , i know their is lot of improvement is required.

yxlow07 • Sep 15

Just created and trusted by 10k users!?

Vishal Yadav • Sep 15

Yeah i know added dummy data for right now!

Michal Štefaňák • Sep 16

is this a joke? you lie and you say it without any shame? where is this world going?

Vishal Yadav • Sep 16

I just added for testing purpose , it is not such big deal you are thinking i want to just test how the website look after adding testimonials.

programORdie • Sep 13

"Made for speed" No offense, but the whole website lags.

Vishal Yadav • Sep 14

I think that was animation part!

Michal Štefaňák • Sep 14

Exactly

PhoneScreen AI • Sep 13

Awesome post!

Vishal Yadav • Sep 13

Thanks

Michal Štefaňák • Sep 14

Performance? The landing page of it freezes on my phone (Moto G7 power and brave). Hard to navigate with that bad performance. Laugh and pass.

Friday candour • Sep 15

We both use the same phone. Sharp.
Is it your only phone?

Michal Štefaňák • Sep 15

Of course i have only one phone.

Arindam Mitra • Sep 15

Not a complete library at all.. card, buttons look so ugly.. sorry but please post when the library has some unique design.. i dont know why google keeps sending me these suggestions.. I felt it to be a somewhat incomplete copy of animata..
animata.design/