# UIkit — Lightweight Modular Front-End Framework

> A lightweight and modular front-end framework for developing fast and powerful web interfaces. UIkit provides a comprehensive collection of HTML, CSS, and JS components with consistent styling.

## Install

Save in your project root:

# UIkit — Lightweight Modular Front-End Framework

## Quick Use
```bash
npm install uikit
# In your JS entry:
# import UIkit from 'uikit';
# import Icons from 'uikit/dist/js/uikit-icons';
# UIkit.use(Icons);
# Or CDN:
# <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3/dist/css/uikit.min.css" />
# <script src="https://cdn.jsdelivr.net/npm/uikit@3/dist/js/uikit.min.js"></script>
```

## Introduction
UIkit is a modular front-end framework that provides a clean, consistent set of components for building responsive websites. Developed by YOOtheme, it combines a Less/Sass-based CSS layer with a JavaScript component layer, offering everything from grid layouts to advanced interactive elements like lightboxes and parallax scrolling.

## What UIkit Does
- Provides 30+ UI components: accordion, dropdown, modal, navbar, slider, lightbox, and more
- Implements a responsive Flexbox grid with gap, width, and visibility utilities
- Ships a built-in SVG icon system with 200+ icons
- Offers JavaScript-driven interactivity via `uk-` HTML attributes (no manual init needed)
- Supports Less and Sass source files for deep theme customization

## Architecture Overview
UIkit uses a declarative attribute-based initialization system. Adding `uk-modal` to a `<div>` automatically wires up the modal component when the JS bundle loads. The CSS layer uses a BEM-inspired naming convention with a `uk-` prefix. Components communicate through a custom event system. The framework auto-discovers and initializes components via a MutationObserver, so dynamically added markup is handled without manual setup.

## Self-Hosting & Configuration
- Install via npm or use the CDN for quick prototyping
- Customize the theme by overriding Less or Sass variables and recompiling
- Use the UIkit customizer on the docs site to generate a custom build visually
- Cherry-pick JavaScript components by importing them individually from the source
- Configure component defaults globally via `UIkit.mixin` or per-instance via HTML attributes

## Key Features
- Attribute-driven initialization — no JavaScript boilerplate needed for most components
- Built-in SVG icon library loaded via a single plugin call
- Advanced components: parallax, scroll spy, sticky elements, sortable lists, and upload
- Consistent RTL support for right-to-left language layouts
- Well-documented API with interactive examples for every component

## Comparison with Similar Tools
- **Bootstrap** — larger community and plugin ecosystem; UIkit has a cleaner default aesthetic
- **Bulma** — CSS-only with no JS layer; UIkit includes interactive components
- **Foundation** — similar scope and component count; UIkit has simpler attribute-based APIs
- **Tailwind CSS** — utility-first, no prebuilt components; UIkit provides complete ready-made widgets
- **Materialize CSS** — follows Material Design language; UIkit has its own neutral design style

## FAQ
**Q: Does UIkit require a build step?**
A: No. You can use the pre-built CSS and JS bundles directly. A build step is only needed if you want to customize the theme from Less/Sass source.

**Q: Can I use UIkit with React or Vue?**
A: UIkit works with any framework since it initializes via HTML attributes. However, it does not provide framework-specific bindings like Vue or React components.

**Q: How does the icon system work?**
A: Import `uikit-icons` and call `UIkit.use(Icons)`. Then use `<span uk-icon="icon: check"></span>` to render any built-in SVG icon.

**Q: Is UIkit free for commercial use?**
A: Yes. UIkit is MIT licensed and free for both personal and commercial projects.

## Sources
- https://github.com/uikit/uikit
- https://getuikit.com/

---
Source: https://tokrepo.com/en/workflows/8e9001d7-41cf-11f1-9bc6-00163e2b0d79
Author: AI Open Source