niui is a lightweight, powerful and accessible UI library

To use niui, get niui.min.css, niui.min.js and index.html and edit the latter. Or import the ES module js/niui.js. Check the homepage for details.

Prefixed BEM class names
Semantic structure
Unbreakable, flexible, responsive grid with alignment, embedding, borders option.
Baseline-aligned typography, quote block, drop caps.
Built for edge cases (overflowing headlines, images etc)
Flat default style without rounded edges, shadows etc
Optional rounded edges, border, shadow via Sass variables
Dark theme
Dynamic components, initialised by MutationObserver
(Mobile) navigation – horizontal, vertical, scrolling. Drop-down nav: Touch-first, CSS-only, JS enhanced, 1-3 levels, responsive, label/link items support
Buttons with group container for proper line wrap and optional ripple effect
Modal windows using the Dialog element with many options – shadow, blur, multiple data sources
Native carousel, swipeable on mobile and desktop, vertical and full window options, carousel inside carousel, auto height option etc
Lightbox gallery
Tabs
Tooltips with full HTML content, auto positioning and unaffected by overflow: hidden
Nested (un)ordered lists
Forms with validation, customisation and accessibility. Range input, file input, mandatory fields, optional fieldsets, rich select.
Accordions – nested, grouped, in a grid
Cards
Tables accessible on narrow screens by scrolling; optionally sortable.
Aspect ratio for image containers
Masonry (vertical track only)
Parallax scrolling
Fixed background
WordPress theme with lightbox gallery (Classic Editor only)
Notification bar
Click to copy to clipboard
RTL layout ready
Accessible by keyboard
14 KB first view CSS + optional 12 KB JS (combined, minified, gzipped)
Functional without JS and accessible without CSS
Seamless transition from CSS-only to JS enhancement
No dependencies