RSK World - Micro UI Gallery | Reusable Components, Buttons, Cards, Modal, Toasts | RSK World

Buttons & Cards Forms & Inputs Modal & Toasts Advanced Vanilla JS

Micro UI Gallery is a curated collection of reusable micro UI components: buttons (primary, secondary, success, danger, sizes, outline, icon, loading), cards (default, elevated, bordered), badges, alerts (dismissible), inputs, chips, tooltips, tabs, toggles, progress bars, skeleton loaders, avatars, breadcrumbs, pagination, modal, toasts, copy-code block; advanced: carousel, star rating, range slider, stepper, file upload (drag & drop), back-to-top; extra: notification badges, animated counter, pricing cards, data table, FAQ accordion, snackbar, keyboard shortcuts (?); showcase: dropdown, accordion, stats cards, timeline, empty state. Theme toggle (light/dark) persisted in localStorage. Fully responsive with mobile hamburger nav. HTML, CSS, Vanilla JavaScript. By rskworld.in.

If you find this Micro UI Gallery project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Micro UI Gallery

Core Components

Buttons (primary, secondary, success, danger; sm/lg, outline, icon, loading), cards (default with image, elevated, bordered), badges (status, sizes, pill, outline), alerts (success, info, warning, danger, dismissible), inputs (text, email, textarea, select; success/error states), chips (removable, primary/success).

Buttons: .btn .btn-primary, .btn-secondary, .btn-outline, .btn-sm, .btn-lg
Cards: .card .card-default, .card-elevated, .card-bordered
Alerts with .alert-close for dismiss; chips with .chip-remove
All use CSS variables (--color-primary, --radius, etc.)

Project Structure & Files

index.html (main gallery with all sections), showcase.html (dropdown, accordion, stats, timeline, empty state), about.html. CSS: style.css (base, variables, all components, light theme), responsive.css (breakpoints, mobile nav, touch targets), showcase.css. JS: main.js (alerts, chips, smooth scroll), components.js (tabs, modal, toasts, theme toggle, copy code), advanced.js (hamburger, search, carousel, rating, range, upload, back-to-top, counters, FAQ, snackbar, shortcuts), showcase.js (dropdown, accordion).

micro-ui-gallery/ – index.html, showcase.html, about.html, css/, js/
No build step – open index.html or serve folder
Fonts: DM Sans, JetBrains Mono (Google Fonts)
Zero dependencies; vanilla HTML, CSS, JavaScript

Theme Toggle

Light/dark theme via .theme-light on body. Preference stored in localStorage (micro-ui-theme). CSS variables in :root and body.theme-light override background, surface, text, borders for all components. Toggle button (☀/🌙) in header.

Dark by default; light theme via theme toggle
localStorage key: micro-ui-theme (light | dark)
All components use var(--color-bg), var(--color-surface), etc.
Showcase.css and responsive.css include light overrides

Advanced & Extra Components

Carousel (prev/next, dots), star rating (click + hover), range slider with output, stepper, file upload zone (drag & drop, multiple files). Extra: notification badges (count/dot), animated counter (reset & animate), pricing cards, data table, FAQ accordion, snackbar (with action), keyboard shortcuts (? key opens modal). Back-to-top FAB. Section search filter in hero.

advanced.js – carousel, rating, range, upload, back-to-top, counters, FAQ, snackbar, shortcuts
Copy code block – .btn-copy with data-copy-target
Modal and shortcuts modal – Escape to close
Press ? to open keyboard shortcuts help

Showcase Page

showcase.html includes dropdown menu (toggle, outside click close), accordion (one open at a time), stats cards grid, timeline (dot + content), empty state (icon, heading, CTA). Styled in showcase.css; behavior in showcase.js.

Dropdown – .dropdown-wrap, .dropdown-menu, trigger + aria-hidden
Accordion – .accordion-head, .accordion-body.is-open
Stats – .stat-card, .stat-value, .stat-label
Timeline – .timeline-item, .timeline-dot, .timeline-content

What You Get

Static HTML/CSS/JS: micro-ui-gallery/ folder with index.html, showcase.html, about.html, css/ (style, responsive, showcase), js/ (main, components, advanced, showcase). No build step. Open index.html or serve folder.

Complete source – micro-ui-gallery/ with HTML, CSS, JS
No build step – open index.html or static server
README.md, LICENSE (MIT) included
Technologies: HTML5, CSS3, Vanilla JS. © 2026 Molla Samser (RSK World).

Usage

Open index.html. Use hero search to filter sections. Use nav to jump to sections; on mobile, open hamburger menu. Try theme toggle (☀/🌙). Try Advanced (carousel, rating, range, stepper, upload, back-to-top) and Extra (badges, counter, pricing, table, FAQ, snackbar, ? shortcuts). Open Showcase for dropdown, accordion, stats, timeline, empty state. Copy HTML/CSS/JS as needed.

micro-ui-gallery/index.html – full component gallery
Search – filter sections by name (e.g. button, card)
Accessibility: focus-visible, reduced-motion, ARIA where needed
Author: Molla Samser | rskworld.in

Tooltips, Tabs, Toggles & More

Tooltips via data-tooltip and data-tooltip-pos (top/bottom/left/right). Tabs with role="tablist", data-tab, panels. Toggle switch (checkbox + .toggle-slider). Progress bars (default, success, striped). Skeleton loaders, avatars, breadcrumbs, pagination, divider. Modal and toasts in components.js.

Tooltips – [data-tooltip], [data-tooltip-pos]
Tabs – .tabs-tab.is-active, .tabs-panel.is-active
style.css – tooltips, tabs, toggle, progress, skeleton, avatars
components.js – tabs, modal open/close, showToast(), theme, copy

Project Features

24+ components: buttons, cards, badges, alerts, inputs, chips, tooltips, tabs, toggles, progress, skeleton, avatars, breadcrumbs, pagination, modal, toasts, copy-code; carousel, rating, range, stepper, file upload, back-to-top; notification badges, counter, pricing, table, FAQ, snackbar, shortcuts; dropdown, accordion, stats, timeline, empty state. Theme toggle, responsive (480/640/768/1024), touch-friendly, reduced-motion support.

Core – buttons, cards, badges, alerts, inputs, chips, tooltips, tabs, toggles
More – progress, skeleton, avatars, breadcrumbs, pagination, modal, toasts
Advanced – carousel, rating, range, stepper, upload, back-to-top
A11y – focus-visible, ARIA, prefers-reduced-motion

Credits & Acknowledgments

Micro UI Gallery by RSK World. Curated reusable micro UI components for learning and quick prototyping.

Micro UI Gallery – buttons, cards, badges, modal, toasts, carousel, theme toggle
RSK World – Project creator and educational platform
Author: Molla Samser (Founder - RSK World)
Website: https://rskworld.in
Email: help@rskworld.in | +91 93305 39277
© 2026 RSK World. All rights reserved.