Framework Comparison

The same Neem Button design system implemented using two different web approaches — both 100% token-driven and sharing the exact same tokens.json source of truth.

🧱 Pure ViewComponent

BEM (HTML/CSS)

Plain <button> elements styled via global BEM CSS classes. Rendered by Neem::BEMButtonComponent in Rails. Zero JavaScript is required.

  • Zero-JS rendering (CSS-only)
  • No Shadow DOM encapsulation
  • Strict BEM class naming
  • Requires global CSS
 ⚡ Pure Lit Component

Lit

A native custom element built with Lit 3. Uses Shadow DOM so styles are encapsulated. CSS custom properties from global tokens are inherited automatically.

  • Shadow DOM encapsulation
  • Reactive properties (@property)
  • Works in React, Vue, Angular, etc.
  • TypeScript source + decorators
 💎 Hybrid Wrapper

Hybrid

The best of both worlds. A Ruby ViewComponent Acts as a server-side wrapper that simply outputs the <neem-button> custom element.

  • Rails-native developer syntax
  • Encapsulated client-side UI (Lit)
  • Abstracts away DOM complexity
  • Instantly themeable via attributes