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)
This library is no where close to usage:
My suggestion is write posts only when it has some real content... Lets not waste our time...
Yes , i just created , i know their is lot of improvement is required.
Just created and trusted by 10k users!?
Yeah i know added dummy data for right now!
is this a joke? you lie and you say it without any shame? where is this world going?
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.
"Made for speed" No offense, but the whole website lags.
I think that was animation part!
Exactly
Awesome post!
Thanks
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.
We both use the same phone. Sharp.
Is it your only phone?
Of course i have only one phone.
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/
Looks cool, but very laggy
Jurassic Park template :
Heyy All, See we have a new JavaScript UI Library.
....
....
...
See nobody cares 😅😅😅
Why is the naming weird? button1, button2, button3. It's uncommon to use numbers at the end of component names. 🤔
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
Thanks for pointing out , I'm currently fixing this thing!
nice
Nothing exciting here, even their website is not aligned with the trends and pretty buggy. It appears that someone created entire thing with AI
Can we get a link to the github page for this library? this library needs some work and I wanted to help.
Good Work Buddy, keep on improving, Make it as useful as possible , take inspiration Shadcn, Make it Headless. Good Luck