StyleUI
Component Library
A comprehensive guide to the components, styles, and patterns that form the foundation of the StyleUI design system.
StyleUI is a lightweight, dependency-free component library built with vanilla JavaScript. It's designed for modularity and performance, allowing you to build modern, responsive interfaces without the overhead of a large framework. All components are self-contained and expose a simple, functional API.
To use a component, simply include the necessary CSS and JS files in your project. Components are available under the global UI object. For example, to create a button, you can call UI.button('Click Me', { variant: 'primary' }). Explore the sections in the navigation panel to see live examples and discover the full range of available components and their options.
More quick examples:
• Show a success toast: UI.toast('Saved!', 'success')
• Open a modal dialog: UI.modal({ title: 'Hello', content: 'Welcome!' })
• Create a collapsible panel: UI.panel('Details', 'Content', { collapsible: true })
• Display an icon toggle: UI.iconToggle({ iconOn: 'moon', iconOff: 'sun' })
Frequently Asked Questions
What is StyleUI?
StyleUI is a lightweight, dependency-free component library built with vanilla JavaScript and modular CSS. It provides a set of ready-made, fully stylable UI primitives that you can drop into any project.
How do I install StyleUI?
No installation or build step is required. Clone or download this repository and reference the CSS and JS files directly from the css/ and components/ folders.
Can I use only certain components?
Yes. Each component’s CSS and JavaScript live in their own files so you can include only what you need. Always include css/variables.css and components/core.js for shared tokens and helpers.
Does StyleUI work with frameworks like React or Vue?
Because the factories return plain DOM elements, you can integrate them in any framework by appending the returned element inside your component’s lifecycle or template.
How can I contribute?
Fork the repository, create a branch for your feature or fix, and open a pull request following the coding guidelines outlined in the README.