DEV Community

Cover image for Launching Oxy-UI: A Powerful and Modern UI Library for Your Web Projects
Vishal Yadav
Vishal Yadav

Posted on

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

oxy
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:

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

oxy

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


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
gvsakhil profile image
G.V.S Akhil

This library is no where close to usage:

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

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

Collapse
 
vyan profile image
Vishal Yadav

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

Collapse
 
yxlow07 profile image
yxlow07

Just created and trusted by 10k users!?

Thread Thread
 
vyan profile image
Vishal Yadav

Yeah i know added dummy data for right now!

Thread Thread
 
stefanak-michal profile image
Michal Štefaňák

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

Thread Thread
 
vyan profile image
Vishal Yadav

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.

Collapse
 
programordie profile image
programORdie

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

Collapse
 
vyan profile image
Vishal Yadav

I think that was animation part!

Collapse
 
stefanak-michal profile image
Michal Štefaňák

Exactly

Collapse
 
phonescreenai profile image
PhoneScreen AI

Awesome post!

Collapse
 
vyan profile image
Vishal Yadav

Thanks

Collapse
 
stefanak-michal profile image
Michal Štefaňák

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.

Collapse
 
fridaycandours profile image
Friday candour

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

Collapse
 
stefanak-michal profile image
Michal Štefaňák

Of course i have only one phone.

Collapse
 
arindam_mitra_b7ee5c83231 profile image
Arindam Mitra

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/

Collapse
 
codernik profile image
Nikhil

Looks cool, but very laggy

Collapse
 
aravindhsiva profile image
Aravindh Sivalingam

Jurassic Park template :
Heyy All, See we have a new JavaScript UI Library.
....
....
...
See nobody cares 😅😅😅

Collapse
 
thomijasir profile image
Thomi Jasir

Why is the naming weird? button1, button2, button3. It's uncommon to use numbers at the end of component names. 🤔

Collapse
 
thomijasir profile image
Thomi Jasir

Why is the naming of button1 and button2 so weird? 🤔 It's very uncommon to use numbers at the end of component names. #badnaming #confusing

Collapse
 
vyan profile image
Vishal Yadav

Thanks for pointing out , I'm currently fixing this thing!

Collapse
 
slimgee profile image
Given Ncube

nice

Collapse
 
webjoyable profile image
webjoyable

Nothing exciting here, even their website is not aligned with the trends and pretty buggy. It appears that someone created entire thing with AI

Collapse
 
w3br00ts profile image
MW

Can we get a link to the github page for this library? this library needs some work and I wanted to help.

Collapse
 
anandhunt profile image
anandhunt

Good Work Buddy, keep on improving, Make it as useful as possible , take inspiration Shadcn, Make it Headless. Good Luck