Open Source Projects

I build and maintain open source libraries that fill gaps in the ecosystem — Vue component tooling, SCSS utilities, React packages, and Unicode infrastructure. All packages are published to npm and available under permissive licenses.


4

Packages

4

npm packages

3

Languages

MIT

License

Libraries & Tools

From Vue component toolkits to React utilities and CSS frameworks — all production-ready, typed, and documented.

vue-multiple-themes

Dynamic multi-theme support for Vue 2 & 3

61

Dynamic multi-theme support for Vue 2.7+ and Vue 3 via CSS custom properties. Ships with 7 preset themes, a TailwindCSS plugin, WCAG contrast utilities, a reactive composable API, and zero runtime dependencies beyond Vue.

  • Vue 2.7+ and Vue 3 via vue-demi
  • 7 preset themes — light, dark, sepia, ocean, forest, sunset, winter
  • Dynamic theme generation from a single brand color
  • WCAG contrast utilities (lighten, darken, contrastRatio, autoContrast)
VueTypeScriptCSSThemesTailwindCSS
$ pnpm add vue-multiple-themes

vue-star-rate

Zero-dependency Vue 3.5+ star rating component

41

WCAG 2.2 accessible star rating for Vue 3.5+ — TypeScript-first, half-star precision, Lucide/FontAwesome/custom icon providers, full keyboard navigation, and zero runtime dependencies.

  • Half-star precision with visual half-fill support
  • Five size presets: xs · sm · md · lg · xl
  • Lucide, FontAwesome, or custom icon providers via slot/render fn
  • WCAG 2.2 — role=group, aria-pressed per star, aria-live counter
VueTypeScriptAccessibilityRatingComponent
$ pnpm add vue-js-star-rating

dirham

UAE Dirham sign (U+20C3) as web font, CSS & React component

10

The UAE Dirham currency symbol (U+20C3, Unicode 18.0) as a web font, CSS utility class, and React component. Future-proof: the font is automatically dropped when operating systems ship native Unicode 18.0 glyph support in September 2026.

  • DirhamSymbol — inline SVG, SSR-compatible, tree-shakeable
  • DirhamIcon — font-based React component
  • CSS @font-face + .dirham-symbol helper class
  • SCSS @use entry point for Sass projects
ReactTypeScriptUnicodeCurrencyFontUAE
$ pnpm add dirham

scss-helper

Modern SCSS/CSS utility toolkit filling Tailwind's gaps

10

A modern SCSS/CSS utility toolkit complementing Tailwind CSS v3/v4 — design tokens, fluid clamp() typography, container queries, dark mode, golden ratio layouts, animations, and a 12-column grid. All classes use an sh- prefix. Only 5.1 KB gzipped.

  • 30+ CSS custom properties for colors, spacing & typography
  • 12-column CSS grid with responsive breakpoints and auto-fit layouts
  • Fluid clamp()-based typography — no breakpoints needed
  • Dark mode: data-theme attribute + prefers-color-scheme dual strategy
SCSSCSSGridTypographyTailwindCSSDesign Tokens
$ pnpm add scss-helper

Have an idea or want to contribute?

Open an issue, submit a pull request, or reach out directly. Contributions across all repositories are welcome.