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.

🎨 Foundation

Design System

The complete token reference — palette colors, typography scale, spacing, shapes, motion, themes, and semantic aliases. The single source of truth for all framework implementations.

  • Three-layer token cascade (Palette → Theme → Alias)
  • Live theme switching with swatches
  • Typography and spacing specimens
  • Button component in all states
 🧱 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 1

Hybrid (Lit)

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
 🌊 Hybrid Wrapper 2

Tailwind + ViewComponent

A pure Ruby ViewComponent rendered server-side that utilizes Tailwind CSS utility classes powered completely by the Neem design tokens.

  • Zero JavaScript Required
  • Tailwind Utility Classes (Atomic CSS)
  • No Custom Element / Shadow DOM
  • Extremely easy to rapidly customize
 ⚛ React 19

React

A React 18 button component using the Neem token system. Same shared button.css, same BEM classes — zero framework-specific styling.

  • Functional component + hooks
  • TypeScript props interface
  • Shared design token CSS
  • Theme via data-neem-theme
 🟢 Vue 3

Vue

A Vue 3 SFC button using the Composition API and the Neem token system. No <style scoped> needed — CSS custom properties resolve globally.

  • Composition API + defineProps
  • Single File Component (SFC)
  • Shared design token CSS
  • Reactive theme switching