µCSS Examples
Interactive demos for every component in the framework.
Themes
Each theme page shows all components with a specific color palette.
Layout & Utilities
| Colors | 11 color roles, swatches, variables, utility classes (.c-*, .bg-*, .border-*) |
| Typography | Headings, blockquote, lists, code, kbd, mark, inline text |
| Grid | 12-column responsive grid system |
Positioning utilities: .sticky-top, .fixed-top, .fixed-bottom — work on any element, with automatic z-index and box-shadow on navbars.
Navigation
| Breadcrumb | Navigation trail — 4 separators, boxed variant |
| Nav | Horizontal bar — brand, links, buttons, dropdown, burger, active, sticky/fixed |
| Dropdown | Dropdown menus via <details class="dropdown"> |
| Pagination | Aligned, sized, borderless, responsive |
| Tabs | Standard, pills, aligned, fullwidth |
Forms & Inputs
| Forms | Input sizes and validation states |
| Forms (advanced) | Color, date, time, file, search, helper text |
| Checkbox & Radio | Checkboxes, radios, indeterminate, validation |
| Switch | Toggle switches via <input role="switch"> |
| Range | Range sliders with output |
| Group | Input/button groups via role="group" and role="search" |
Buttons & Badges
| Button | Buttons — 11 colors, outline, link, 3 sizes |
| Badge | Inline labels — filled, outline, pill, sizes, attached |
Content
| Accordion | Collapsible sections using <details> |
| Card | Colored articles with header/body/footer |
| Hero | Full-width hero sections — 11 colors, gradient, responsive |
| Modal | Dialog sizes — sm, default, lg, fullscreen |
| Table | Hover, striped, bordered, compact, fullwidth |
| Tooltip | Tooltips via data-tooltip — 4 placements |
Feedback & Loading
| Alert | Notification banners — 11 colors, dismissible |
| Toast | Fixed-position notifications — 6 positions, 11 colors |
| Progress | Colored progress bars |
| Loading | Loading states via aria-busy="true" |
| Spinner | Loading spinners — 11 colors, 3 sizes |
| Skeleton | Loading placeholders — text, title, avatar, image |