OSS TanbouOn this page
Overview
Blade is Razorpay's open-source design system for React Web and React Native. It packages UI components, themes, design tokens, and font assets under shared conventions, with white-label customization and accessibility built into the system.
Features and best fit
Based on official documentation; not hands-on tested · Content checked:
Key features
Use one component system across web and React Native
@razorpay/blade targets both React Web and React Native and exposes shared components such as buttons through platform-aware package exports.
Best fit
Fits product teams standardizing UI across React platforms
It is useful when web and native applications should share component, token, theme, and accessibility conventions instead of maintaining separate UI systems.
Sources: [2]
Before adoption
Align the 12.127.0 peer dependencies with the host application
The current package expects React 18+, styled-components 5, framer-motion, i18nify packages, and additional native dependencies when React Native support is used.
Official sources
- [1]razorpay/blade repository(2026-09-30)
- [2]Blade README(2026-09-30)
- [3]@razorpay/blade 12.127.0 package metadata(2026-09-30)
- [4]Blade installation guide(2026-09-30)
- [5]Blade basic example(2026-09-30)
- [6]Blade MIT license(2026-09-30)
Supplemental curator note
The core @razorpay/blade package is 12.127.0 and provides a shared design system for React 18+ across web and React Native. Current package metadata requires Node.js 20+, so use the package engines field rather than the older Node requirement still shown in the installation guide.
Try it in 3 steps
- 1
Install Blade 12.127.0 and peer dependencies
Add the core package and primary peer dependencies to a React project running Node.js 20+.
npm install @razorpay/blade@12.127.0 styled-components@5 @razorpay/i18nify-js@^1.12.3 @razorpay/i18nify-react@^4.0.12 framer-motion@^11.13.3 - 2
Import the provider, theme, and fonts
Use the same component, token, and font entrypoints shown in the official basic example.
import { BladeProvider, Button } from '@razorpay/blade/components'; import { bladeTheme } from '@razorpay/blade/tokens'; import '@razorpay/blade/fonts.css'; - 3
Render a component inside BladeProvider
Pass the theme to the provider and verify that a basic Button renders.
<BladeProvider themeTokens={bladeTheme} colorScheme="light"><Button>Continue</Button></BladeProvider>
Growth
Growth trends · Last 30 days
652 Stars
Trend data is still being collected.
Built with
Categories and tags
Categories
GitHub data
GitHub dataView detailed GitHub data
- Stars
- 652
- Forks
- 202
- Watchers
- 119
- Open issues
- 302
- Owner type
- Organization
- Primary language
- TypeScript
- License
- MIT
- Repository last updated
- Sep 30, 2026
Related information
Write a related articleShare a guide or use case for this OSS in Markdown. Articles are published after administrator approval.
Explore next
- Storybook91,178 Stars
4 shared tag(s) · 1 shared category(s) · Same language
capture UI states once and reuse them across docs, interaction tests, and agent tooling
TypeScript - Chakra UI40,674 Stars
3 shared tag(s) · 2 shared category(s) · Same language
Combine React components, Ark UI primitives, and design tokens in one accessible design system
TypeScript - Mantine31,786 Stars
3 shared tag(s) · 2 shared category(s) · Same language
Standardize React components, hooks, and theming in one UI ecosystem
TypeScript - Plasmic7,048 Stars
3 shared tag(s) · 2 shared category(s) · Same language
Bring existing React assets into a visual builder for sites, apps, and CMS workflows
TypeScript - React Native126,760 Stars
3 shared tag(s) · 2 shared category(s)
native mobile UI with React, stable 0.87.1, and a framework-first path
C++ - Motion33,775 Stars
3 shared tag(s) · 1 shared category(s) · Same language
build web animation with gestures, springs, layout transitions, scroll effects, and timelines across React, JavaScript, and Vue
TypeScript
Report incorrect information
Tell us if any listing information is incorrect or outdated.