A lightweight and modern CSS framework designed to streamline your development process effortlessly.
StyleXui, also known as Style You, is a CSS framework built to enhance your workflow with pre-designed components and utility classes. Whether you're an experienced developer or just starting out, StyleXui helps you build stunning, responsive UIs with ease.
Created by Richard Gigi, co-founder of Xnyder, StyleXui was developed to tackle common design inefficiencies in modern web development.
Dive in and see how StyleXui can bring your projects to life! 🎨✨
✔ Fully Responsive – Built with a mobile-first approach, ensuring flawless adaptability across all screen sizes. Whether on a phone, tablet, or desktop, your design remains pixel-perfect and seamless.
✔ Pre-Built Components – Speed up development with a library of ready-to-use elements like buttons, modals, and navigation bars. No need to build from scratch—just plug, customize, and launch.
✔ Effortless Customization – A utility-first framework that lets you style elements with ease, keeping your code clean and efficient. Define your own colors, spacing, and units—your design, your way.
✔ Accessibility-First – Designed with inclusivity in mind, ensuring smooth navigation and interaction for all users, regardless of ability.
✔ Seamless Light & Dark Mode – Instantly switch between bright and dark themes for a comfortable viewing experience, day or night.
✔ Comprehensive Documentation – A well-structured, beginner-friendly guide to help you get started effortlessly and make the most out of StyleXui.
✔ JavaScript Enhancements – Optional JavaScript for interactive components with smooth animations and behaviors.
Add the following <link> tag to your HTML file:
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.stylexui.com/@v1.0.0-stable/css/xui.css" />
<!-- Optional JavaScript (for interactive components) -->
<script src="https://cdn.stylexui.com/@v1.0.0-stable/js/xui.js" defer></script>✅ Best for: Prototyping, static HTML projects, minimal dependencies.
Using NPM:
npm install @richaadgigi/stylexuiUsing Yarn:
yarn add @richaadgigi/stylexuiThen, import it in your project:
import '@richaadgigi/stylexui/css/xui.min.css';
import { apply } from '@richaadgigi/stylexui';
apply();✅ Best for: React, Vue, Angular, scalable projects, and version control.
- Download the latest version from the official website or the zip file.
- Extract the files and link the CSS in your HTML file:
<!-- CSS -->
<link rel="stylesheet" href="path/to/xui.css" />
<!-- Optional JavaScript (for interactive components) -->
<script src="path/to/xui.js" defer></script>✅ Best for: Legacy systems, static projects, or custom hosting.
Copy and paste the following template to start using StyleXui:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My StyleXui Project</title>
<link rel="stylesheet" href="path/to/xui.css">
</head>
<body>
<div class="xui-container">
<h1>Welcome to StyleXui</h1>
<p>Build modern, responsive, and accessible UIs with ease.</p>
<button class="xui-btn xui-btn-primary">Get Started</button>
</div>
<!-- Optional StyleXui JS (for interactive components) -->
<script src="path/to/xui.js"></script>
</body>
</html>Visit our documentation to learn more.
✅ Initial release of StyleXui! 🚀
✅ Includes core CSS utilities and components
✅ Optional JavaScript for interactive elements
✅ Comprehensive documentation
We welcome contributions! Feel free to submit issues or pull requests to help improve StyleXui.
StyleXui is open-source and distributed under the MIT License, ensuring flexibility for both personal and commercial use.
- ✅ Permitted Uses: Personal, commercial, and enterprise applications. Modification, distribution, and sublicensing allowed.
- ❌ Restrictions: No warranty or liability for damages. Must retain copyright notices.
StyleXui utilizes normalize.css v3.0.1 to ensure consistent styling across browsers. Normalize.css is also licensed under the MIT License.
For full licensing details, refer to the MIT License documentation.
📌 Official Website: StyleXui
📌 Support & Issues: GitHub Issues
✨ Enjoy building with StyleXui! 🎨🚀