Hop

Hop is a Vue component and styling library providing essential UI elements such as cards, modals, and form fields. It features a highly configurable and themable styling system designed for developers who prioritize clean, semantic code.

Learn more at hop.codingkiwi.dev.

Rationale

Existing frontend libraries often present a difficult trade-off: they are either too heavy and complex or lack the specific component coverage required for streamlined development. Hop is designed to be a lightweight, comprehensive alternative.

Beyond Utility-First CSS

Utility-first frameworks like Tailwind can lead to significant class bloat within templates. Instead of using intuitive, semantic classes - such as btn primary - developers are often forced to manage long strings of utility classes directly in the HTML. Hop prioritizes semantic clarity and a clean separation of concerns to ensure code remains readable and to avoid the visual homogenization common in many modern web applications.

The role of SCSS

While CSS variables are used to enable dynamic theming, SCSS is utilized to minimize redundancy within the library's core architecture. Rather than relying on a single global variable list, Hop uses SCSS logic so that each component part registers its own scoped CSS variables. This approach also enables advanced mathematical functions for precise layout and spacing control.