Overview

EC React is a powerful, schema-driven framework for building enterprise-grade insurance applications. This library provides a comprehensive suite of dynamic forms and UI components designed to accelerate development and handle the full spectrum of policy lifecycle operations with unparalleled flexibility.

Core Philosophy

At its core, this library is engineered to translate Socotra’s flexible data model directly into a rich, interactive user interface. By leveraging your unique data model, we dynamically generate complex forms, eliminating the need to manually build and maintain forms for every product or data variation. This schema-driven approach ensures that as your insurance products evolve, your UI adapts automatically, dramatically reducing development overhead and increasing speed to market.

Our components are built with modern, robust technologies including React , TypeScript , Shadcn UI , and Tailwind CSS , ensuring a developer-friendly, performant, and highly customizable experience.

Key Features

  • Schema-Driven UI: Forms for quotes, policies, accounts, and transactions are generated dynamically from your data model, not hardcoded.

  • Complex Logic Handling: Built-in support for sophisticated insurance workflows, including constraint evaluation for real-time field dependency updates.

  • Highly Customizable: A powerful tag system allows for deep customization of field behavior directly from the data model—from conditional visibility to special UI controls like multi-select and currency inputs.

  • Enterprise-Ready: Designed to handle the intricate details of policy administration, including endorsements, payments, disbursements, and renewals.

  • Modern Tech Stack: A clean, modern, and performant codebase that is a pleasure to work with and extend.

Installation

This monorepo contains three core packages that can be installed from npm. For most applications, you will want to install all three:

  • @socotra/ec-react-components: The main library of schema-driven React components.

  • @socotra/ec-react-schemas: TypeScript interfaces and zod schemas for all data models.

  • @socotra/ec-react-utils: Helper functions for data transformation and API requests.

Install all packages with a single command:

npm i @socotra/ec-react-components @socotra/ec-react-schemas @socotra/ec-react-utils

For detailed setup instructions, such as Tailwind CSS configuration for the component library, please see the README.md file within each individual package directory.

Documentation

To contribute to the documentation, clone the repo and run the following command:

git clone https://github.com/socotra/ec-react.git
cd ec-react/packages/docs
pnpm run sync
pnpm run sync:rst

Follow instructions in the ec-react/packages/docs/README.md file to build the documentation and update the Socotra Documentation repo.