Bladeとは？RazorpayのReact・React Nativeデザインシステム

ページ内ナビ

概要

BladeはRazorpayが公開するdesign systemで、React WebとReact Native向けのUI component、theme、design token、font assetを共通のpackageから提供します。white labelingやaccessibilityを前提に、複数platformのUIを同じ設計ルールへ寄せられます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-09-30

主な特徴

WebとReact Nativeで共通のcomponent体系を使う

@razorpay/bladeはReact WebとReact Nativeの両方を対象にし、Button等のcomponentを共通packageから提供します。platformごとのexportをpackage側で切り替える構成です。

出典：[2][3]

theme・design token・fontをdesign systemとして統一する

BladeProviderへtheme tokenを渡し、color schemeやcomponent stylingを統一できます。font assetもpackageから提供され、white labeling向けのtheme customizationもdocument化されています。

出典：[2][4][5]

向いている用途

React WebとReact NativeをまたいでUI規約を揃えたいproduct teamに向く

複数platformでcomponent、token、theme、accessibilityの基準を共通化し、個別実装のばらつきを減らしたい場合に向きます。

出典：[2]

導入前の確認

12.127.0のpeer dependencyを既存stackと合わせる

current packageはReact 18以上、styled-components 5系、framer-motion、i18nify系package等をpeer dependencyとして持ちます。React Native利用時は追加のnative dependencyも必要です。

出典：[3][4]

Node.js要件はcurrent package metadataを基準にする

Installation guideには古いNode.js要件が残っていますが、12.127.0のpackage metadataはNode.js 20以上を要求しています。local・CI・build環境はpackageのenginesに合わせます。

出典：[3][4]

参考にした公式資料

[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)

編集部からの補足

core package @razorpay/blade は12.127.0で、React 18以上を前提にWebとReact Nativeのcomponentを同じdesign systemで提供します。現行package metadataはNode.js 20以上を要求しており、Installation guideに残る古いNode要件よりpackage側を優先して確認するのが安全です。

3ステップで試す

1
Blade 12.127.0とpeer dependencyを追加
Node.js 20以上のReact projectへcore packageと主要peer dependencyを追加します。
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
Provider・theme・fontを読み込む
公式basic exampleと同じ入口からcomponent、theme token、fontを読み込みます。
import { BladeProvider, Button } from '@razorpay/blade/components'; import { bladeTheme } from '@razorpay/blade/tokens'; import '@razorpay/blade/fonts.css';
3
BladeProvider内でcomponentを表示
themeをProviderへ渡し、最小のButtonが表示できることを確認します。
<BladeProvider themeTokens={bladeTheme} colorScheme="light"><Button>Continue</Button></BladeProvider>

公式READMEで確認

成長

成長の推移 · 直近30日

652 Stars

推移データを蓄積中です。

Built with

TypeScript

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

Stars: 652
Forks: 202
Watchers: 119
Open Issues: 302
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/09/30