Socket
Book a DemoInstallSign in
Socket

@juspay/blend-design-system

Package Overview
Dependencies
Maintainers
7
Versions
22
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@juspay/blend-design-system

A comprehensive React component library and design system by Juspay

0.0.14
latest
Source
npmnpm
Version published
Weekly downloads
134
-23.86%
Maintainers
7
Weekly downloads
 
Created
Source

Blend Design System

A comprehensive React component library and design system by Juspay, built with TypeScript and styled-components.

npm version License: MIT

🚀 Features

  • 50+ Production-ready Components - Buttons, Forms, Navigation, Data Display, and more
  • TypeScript Support - Full type safety and IntelliSense support
  • Accessible by Default - Built with accessibility best practices using Radix UI primitives
  • Customizable Theming - Flexible design tokens and theme system
  • Modern React - Built for React 19+ with hooks and modern patterns
  • Tree Shakeable - Import only what you need
  • Styled Components - CSS-in-JS with full theming support

📦 Installation

npm install @juspay/blend-design-system
# or
yarn add @juspay/blend-design-system
# or
pnpm add @juspay/blend-design-system

🎯 Quick Start

import React from 'react'
import { Button, Alert, ThemeProvider } from '@juspay/blend-design-system'
import '@juspay/blend-design-system/style.css'

function App() {
    return (
        <ThemeProvider>
            <div>
                <Alert variant="success">Welcome to Blend Design System!</Alert>
                <Button variant="primary" size="medium">
                    Get Started
                </Button>
            </div>
        </ThemeProvider>
    )
}

export default App

📚 Components

Form Components

  • Button - Primary, secondary, and various button styles
  • ButtonGroup - Group related buttons together
  • Inputs - Text, number, textarea, and specialized input components
  • Checkbox - Accessible checkbox with custom styling
  • Radio - Radio button groups
  • Switch - Toggle switches
  • Slider - Range and value sliders
  • SingleSelect - Dropdown selection
  • MultiSelect - Multiple option selection

Navigation

  • Tabs - Horizontal and vertical tab navigation
  • Breadcrumb - Navigation breadcrumbs
  • Menu - Dropdown and context menus
  • Sidebar - Collapsible sidebar navigation

Data Display

  • DataTable - Feature-rich data tables with sorting, filtering
  • StatCard - Statistical information cards
  • Charts - Data visualization components
  • Avatar - User profile pictures
  • AvatarGroup - Multiple avatar display
  • Tags - Label and category tags
  • SplitTag - Tags with actions

Feedback

  • Alert - Success, error, warning, and info alerts
  • Modal - Dialog and modal windows
  • Tooltip - Contextual help tooltips
  • Snackbar - Toast notifications
  • Popover - Floating content containers

Layout

  • Accordion - Collapsible content sections
  • DateRangePicker - Date range selection

🎨 Design Tokens

Blend includes a comprehensive set of design tokens for consistent styling:

import { foundationToken } from '@juspay/blend-design-system'

// Colors
foundationToken.colors.primary[500] // #2B7FFF
foundationToken.colors.gray[100] // #F2F4F8

// Typography
foundationToken.fontSize.headingLG // 24px
foundationToken.fontWeight[600] // 600

// Spacing
foundationToken.spacing[16] // 16px
foundationToken.borderRadius[8] // 8px

🔧 Theming

Customize the design system to match your brand:

import { ThemeProvider, createTheme } from '@juspay/blend-design-system'

const customTheme = createTheme({
    colors: {
        primary: {
            500: '#your-brand-color',
        },
    },
})

function App() {
    return <ThemeProvider theme={customTheme}>{/* Your app */}</ThemeProvider>
}

📖 Documentation

🛠️ Development

# Clone the repository
git clone https://github.com/juspay/blend-design-system.git

# Install dependencies
pnpm install

# Start development
pnpm dev

# Build the library
pnpm build

# Run tests
pnpm test

📝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT © Juspay Technologies

Built with ❤️ by the Juspay Design Team

Keywords

react

FAQs

Package last updated on 28 Aug 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.