Blade is a cross-platform design system for React Web and React Native, providing UI components and tools to streamline development and ensure design consistency. It is targeted at developers and designers working within the Razorpay ecosystem or those seeking a robust, well-documented design system.

How It Works

Blade is structured as a monorepo, housing core UI components, AI-assisted development tools (blade-mcp), Figma plugins for design token publishing and component coverage analysis, a browser extension for usage measurement, and an ESLint plugin for enforcing coding standards. This integrated approach aims to bridge the gap between design and development.

Quick Start & Requirements

• Installation: npm install @razorpay/blade
• Prerequisites: React Web, React Native.
• Documentation: https://razorpay.github.io/blade/

Highlighted Details

• Cross-platform compatibility for React Web and React Native.
• Includes AI-assisted development tools (blade-mcp).
• Figma plugins for design token publishing and component coverage linting.
• Browser extension for component usage tracking.

Maintenance & Community

The project is maintained by Razorpay. Further community engagement details are not provided in the README.

Licensing & Compatibility

Licensed under the MIT License. This permissive license allows for commercial use and integration into closed-source projects.

Limitations & Caveats

The @razorpay/blade-old package is deprecated and private, indicating potential for breaking changes or migration efforts from older versions.