@mangalcore/ui-utils
I built and shipped my own npm package.
@mangalcore/ui-utils is an open-source React + TypeScript micro-component library designed for modern SaaS dashboards and Next.js apps.
It delivers drop-in utility UI primitives — QR codes, avatars, latency indicators, JSON viewers, time formatting, and more — all packaged as a tree-shakable, typed npm module with CI/CD and automated releases.
This isn’t a tutorial project.
It’s a production-grade library I architected, published, and now maintain.
Why I Built This
Most teams re-implement the same UI utilities over and over.
I built @mangalcore/ui-utils to solve that problem once — clean APIs, strong typing, modern bundling, and zero-drama integration into Next.js and React apps.
This project let me go end-to-end:
- product ideation
- API design
- build tooling
- CI pipelines
- npm publishing
- documentation
- versioning
- demos
Founder energy means shipping, not just planning.
What’s Inside
- CopyToClipboardCopies text to clipboard with a customizable toast notification.
- TimeAgoLive relative time display updates automatically (e.g. 5m ago).
- QRCodeWrapperClient-safe QR code generation, perfect for Next.js SSR.
- AvatarFromNameGenerates consistent colored avatars with initials from any string.
- LatencyBadgeColor-coded status badge (Green/Yellow/Red) based on ms value.
- JsonViewerCollapsible, syntax-highlighted JSON tree for easy debugging.
- ProgressRingMinimal, responsive SVG circular progress indicator.
- SafeImageImage component that gracefully handles load errors with fallbacks.
- FileSizeFormats raw bytes into human-readable strings (KB, MB, GB).
- MaskedTextSecurely masks sensitive data like API keys or email addresses.
- TruncatedTextTruncates long text with a customizable "read more" toggle.
- StatusDotIndicates online/offline status with an optional pulse animation.
- KeyboardShortcutDisplays keyboard combinations (hotkeys) in a stylized badge.
- SkeletonLoaderPlaceholder loading state with customizable shape and animation.
- ClickOutsideDetects clicks outside a specific element to close menus or modals.
- PortalRenders children into a DOM node outside the parent hierarchy.
- CountUpAnimates numerical values counting up from a start to end number.
- GradientTextApplies a smooth color gradient to text with optional animation.
- MarqueeInfinite scrolling ticker for announcements or trusted-by sections.
- RippleButtonButton with a material-design inspired ripple effect on click.
- ReadingProgressTop bar indicating reading position as the user scrolls.
- SpotlightCardCard with a mouse-following spotlight effect for premium UI feel.
- FadeInAnimates elements into view as they enter the viewport.
Engineering Highlights
- Dual ESM + CJS builds via tsup
- Tree-shakable exports
- React 18 peer dependencies
- Automated publishing with GitHub Actions
- Live demo app with Vite
- ESLint + Prettier
- Semantic versioning + changelog
- MIT licensed open source
- Next.js compatibility notes
- Documentation-first development
Architecture Snapshot
What’s Next
- Toast system
- Skeleton loaders
- Theme tokens
- Chart primitives
- Server-safe wrappers
- Accessibility-first components
- Radix / React-Aria integrations
Shipping an npm package taught me how to design for strangers, maintain backward compatibility, automate releases, and document decisions.
@mangalcore/ui-utils is a signal of how I build — fast, opinionated, production-first.