From UIkit3 to ncss

ncss deliberately does NOT ship a class shim for UIkit3 (reasoning below) - instead this overview helps port typical UIkit3 layouts to ncss by hand. To combine both systems on the SAME page (instead of a full migration), see <ncss-container> in UIkit3 instead - there ncss runs isolated in the Shadow DOM alongside existing UIkit3 markup, without either system interfering with the other.

Why not a 1:1 class shim

A shim that makes e.g. .uk-button visually look like .ncss-btn would be feasible for purely visual/static classes (grid, card, button, text utilities). Two structural reasons argue against shipping it as a complete system:

JS-bound components. Off-canvas, modal, accordion, tab, slider, sticky, scrollspy run on UIkit3's own attribute-driven JS (uk-toggle, uk-offcanvas, uk-modal, ...). A plain CSS class can't reproduce that behavior - ncss uses native <dialog>/<details> instead, with a FUNDAMENTALLY different markup structure (see below), no 1:1 class-name substitute possible.
Breakpoint-suffix system. UIkit3's class@s/@m/@l/@xl grid contradicts ncss' own core principle of "no class@breakpoint matrix" - ncss relies on intrinsic grid (.ncss-grid, auto-fit) or container queries instead. A shim for that would undermine ncss' own architecture.

Container & Grid

UIkit3's uk-grid is an attribute with either a fixed column width per child (uk-width-1-2) or evenly distributed widths (uk-child-width-1-3), usually combined with a breakpoint suffix (uk-child-width-1-2@s uk-child-width-1-3@m). .ncss-grid needs NO breakpoint suffix for this - auto-fit/minmax() makes the wrapping decision itself, based on available space.

UIkit3

<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
  <div>
    <div class="uk-card uk-card-default uk-card-body">Item</div>
  </div>
  ...
</div>

ncss

<div class="ncss-grid" style="--ncss-grid-min: 16rem;">
  <div class="ncss-card ncss-border ncss-radius-md">
    <div class="ncss-card-body">Item</div>
  </div>
  ...
</div>

A GENUINELY fixed column count (no intrinsic wrapping): .ncss-grid--cols-2/-3/-4/-6 (needs an ancestor with .ncss-container, see Layout). An incomplete last row CENTERED instead of left-aligned: .ncss-flex-grid + .ncss-width-1-2/-1-3/... (details: Layout). uk-container → .ncss-container (.ncss-container--narrow for UIkit3's uk-container-small equivalent).

Card & Button

UIkit3

<div class="uk-card uk-card-default">
  <div class="uk-card-body">
    <h3 class="uk-card-title">Title</h3>
    <p>Text</p>
  </div>
</div>
<button class="uk-button uk-button-primary">Submit</button>

ncss

<div class="ncss-card ncss-border ncss-radius-md ncss-shadow-sm">
  <div class="ncss-card-body">
    <h3>Title</h3>
    <p>Text</p>
  </div>
</div>
<button class="ncss-btn ncss-btn--primary">Submit</button>

Border/corners/shadow are deliberately NOT part of .ncss-card's default (unlike uk-card-default) - separate, freely combinable utilities from helpers/elevation.css, see Cards. uk-button-secondary/-danger → .ncss-btn--secondary/--danger.

Navbar

UIkit3

<nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
      <li class="uk-active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</nav>

ncss

<nav class="ncss-nav">
  <ul class="ncss-nav-list">
    <li class="ncss-nav-item"><a href="#" aria-current="page">Home</a></li>
    <li class="ncss-nav-item"><a href="#">About</a></li>
  </ul>
</nav>

uk-active has no direct class equivalent - ncss uses the semantic aria-current="page" attribute instead of a purely visual marker class (styled by nav.css itself). A uk-navbar-container with its own logo/actions area → .ncss-topbar (-inner/-brand/-actions), see Component Reference. Many nav items that no longer fit in one row: <ncss-nav-priority> instead of hand-rolling UIkit3's uk-navbar-toggle-icon + dropdown, see Priority navigation.

Off-Canvas & Modal

The biggest structural difference: UIkit3 activates off-canvas/modal via a uk-offcanvas/uk-modal ATTRIBUTE plus UIkit3's own JS, driven by uk-toggle="target: #id". ncss uses the native <dialog> element for this - showModal()/close() come straight from the browser, no component JS needed. Opening/closing runs through the native command/commandfor attribute pair (Baseline in current browsers, js/command-fallback.js as an opt-in polyfill for older ones).

UIkit3 (off-canvas)

<a href="#panel" uk-toggle>Menu</a>
<div id="panel" uk-offcanvas>
  <div class="uk-offcanvas-bar">
    <button class="uk-offcanvas-close" uk-close></button>
    ...
  </div>
</div>

ncss (native dialog)

<button command="show-modal" commandfor="panel">Menu</button>
<dialog id="panel" class="ncss-offcanvas ncss-offcanvas--start">
  <button class="ncss-dialog-close" command="close" commandfor="panel">&times;</button>
  ...
</dialog>

Same for modal: uk-modal/uk-modal-dialog/-header/-body/-footer/-close-default → <dialog class="ncss-modal">/.ncss-modal-header/-body/-footer/.ncss-dialog-close. Details including entrance-animation variants (--slide-up etc.): Component Reference.

Accordion & Tab

UIkit3

<ul uk-accordion>
  <li>
    <a class="uk-accordion-title" href>Question</a>
    <div class="uk-accordion-content">Answer</div>
  </li>
</ul>

ncss

<details class="ncss-disclosure">
  <summary>Question</summary>
  <p>Answer</p>
</details>

Native <details>/<summary> instead of UIkit3's JS component - no uk-accordion init needed, works without JS. For "only one open at a time" (UIkit3's multiple: false option): <details name="group"> (native attribute, closes siblings automatically). uk-tab has NO direct 1:1 equivalent as a plain CSS/HTML component - depending on the need, either the same <details name="..."> group (reads as tabs when laid out horizontally via .ncss-nav--scroll) or Web Awesome's <wa-tab-group> (see Web Awesome Bridge) if genuine ARIA tab behavior is needed.

Text & spacing utilities

UIkit3	ncss
`uk-text-center`/`-left`/`-right`	`.ncss-text-center`/`-start`/`-end`
`uk-text-muted`	`.ncss-text-muted`
`uk-text-lead`	`.ncss-text-lead`
`uk-text-small`	`.ncss-text-sm`
`uk-margin`/`uk-margin-small-top` etc.	`.ncss-mb-md`/`-sm`/`-lg`/`-xl` (`margin-block-end`, logical instead of physical direction)
`uk-grid-small`/`-medium` (grid gap)	`.ncss-gap-sm`/`-md`/`-lg`/`-xl`
`uk-flex`/`uk-flex-middle`/`-between`	`.ncss-cluster` (horizontal, wrapping) or `.ncss-flex`/`--center`/`--between`, see Layout
`uk-hidden`	`.ncss-hidden`
`uk-visible@m`/`uk-hidden@s`	`.ncss-hide-below-md`/`-from-md` (viewport) - see the note below on breakpoints

The biggest mindset difference is in the visibility utilities: UIkit3's @s/@m/@l/@xl suffixes allow ARBITRARY combinations (uk-hidden@s uk-hidden@m), ncss deliberately offers only the fixed -below/-from split per threshold (sm/md/lg/xl) instead - enough for most layouts; for a genuinely exotic breakpoint pattern, a rule of your own in your own, unlayered theme file remains the right answer (see Tune individual components), rather than adding a whole extra utility matrix.