---
title: "Zunoy Design System & Internal Packages — case study by Srikanth V"
description: "Built and maintain the shared front-end platform behind every Zunoy product — a Tailwind-based design system, a composed component library, a real-time collaborative rich-text editor, icons, and framework-agnostic utilities, published as private packages and consumed org-wide."
url: "https://iamsrikanth.com/projects/zunoy-design-system"
role: "Senior Frontend Engineer"
stack: "TypeScript, Rollup, Storybook, Tailwind CSS, Yjs"
live: "https://zunoy.com"
updated: "2026-07-16"
---

# Zunoy Design System & Internal Packages

> Built and maintain the shared front-end platform behind every Zunoy product — a Tailwind-based design system, a composed component library, a real-time collaborative rich-text editor, icons, and framework-agnostic utilities, published as private packages and consumed org-wide.

- Role: Senior Frontend Engineer
- Stack: TypeScript, Rollup, Storybook, Tailwind CSS, Yjs
- Live site: https://zunoy.com
- Built by: Srikanth V (https://iamsrikanth.com/)

## zunoy-react-tw-ui — core design system
The foundation nearly every Zunoy webapp is built on: Tailwind CSS v4 theming via native `@theme`, full light/dark mode with a global `ConfigProvider`, and a Storybook + Vitest + Playwright pipeline for documentation and browser testing.

## zunoy-react-components-kit — composed components
Higher-level components built on top of the core kit — calendar/scheduling (FullCalendar + react-big-calendar), async-paginated selects, all documented in Storybook.

## react-lexical-editor — collaborative rich-text editor
The editor used across Uptime, Form API, Docs, HRMS, and Bug Tracker dashboards. Built on Meta's Lexical framework with **real-time multi-user collaborative editing** via Yjs + Hocuspocus (WebSocket sync, IndexedDB offline persistence), embedded CodeMirror code blocks, and MDX support.

## zunoy-canvas-kit — annotation engine
A zero-dependency canvas annotation component (freehand draw, shapes, text, undo/redo) that powers the Bug Tracker widget's screenshot markup.

## zunoy-icons & zunoy-web-utils
An automated SVG-to-React icon pipeline, and a small framework-agnostic utility package (timezone handling, SSE helpers) shared across products.

## Outcome
A layered internal platform — base UI kit, composed components, editor, icons, utils — that every product team consumes instead of rebuilding common pieces from scratch.