DOCSEARCHbyAlgolia
Submit Docs

Blade Design System

repository·master·Indexed 20 days ago

https://github.com/razorpay/blade

The design system powering Razorpay, providing a unified set of cross-platform UI components for React Web, React Native, and Svelte. It includes @razorpay/blade-core for design tokens and utilities, @razorpay/blade-svelte for Svelte components, and Blade MCP for AI-assisted development in Cursor and Claude Desktop. Additional tools include a Chrome extension for component coverage and project templates for React and Vite.

Tokens
551.8K
Snippets
1.6K
Records
2.2K
Agent score
68%

What's inside Blade

  1. Overview of the Table component

    master

    The Table component is designed to display data in a grid format using rows and columns. It is optimized for organizing large amounts of data, allowing users to scan, sort, compare, and perform actions on data efficiently.

    Key Features

    • Sorting: Column sorting support.
    • Selection: Single and multiple row selection.
    • Navigation: Pagination support.
    • Actions: Bulk actions toolbar.
    • Layout: Horizontally scrollable, sticky columns, sticky header, and sticky footer.
    • Density: Supports both Normal and Comfortable cell density.

    Out of Scope

    The following features are currently not supported:

    • Column reordering, resizing, filtering, or hiding.
    • Search functionality.
    • Row expansion or nested tables.
    • Editable rows.
    • React Native support (mobile apps should use Lists instead).

  2. Overview of the Blade Coverage Plugin

    master

    The Blade Coverage Plugin provides instantaneous coverage data for Blade components on a web page. It is architected as a Chrome extension consisting of two main parts:

    1. UI Layer (HTML, JS, CSS): Responsible for rendering the plugin's user interface, triggering the coverage process, and displaying the results.
    2. Background Script: Responsible for intercepting messages from the Chrome plugin, interacting with the DOM to extract Blade coverage, and relaying that data back to the UI.

  3. Overview of Motion Presets in Blade

    master

    Blade provides a suite of motion presets designed to simplify the integration of animations into your projects. These presets are built on top of Motion React and cover common UI patterns such as fading, moving, sliding, scaling, and morphing.

    Key presets include:

    • Fade: Animates the opacity of children for smooth appearance/disappearance.
    • Move: Animates both opacity and position.
    • Slide: Animates components sliding in from outside the viewport.
    • Scale: Animates the CSS scale property for enlarging or shrinking elements.
    • Elevate: Animates the CSS box-shadow property to highlight components.
    • Morph: An abstraction for layout animations that allows morphing between two elements.
    • AnimateInteractions: Enables animating child components based on parent interactions (similar to CSS .parent:hover .child logic).
    • Stagger: A utility preset that makes children appear sequentially; it can wrap other base presets like Move, Fade, or Slide.

  4. Overview of the Blade Design System

    master

    Blade is the design system used by Razorpay. It provides a cross-platform ecosystem of UI components and developer tools designed to ensure consistency across web and mobile applications.

    Key Features

    • Cross-Platform Support: Components work natively on both React Web and React Native.
    • White Labelling: Supports theming and white-labelling capabilities.
    • Accessibility: Built with accessibility standards in mind.
    • Transparent Decision Making: API decisions and architectural changes are documented via RFCs.

  5. Overview of Blade Design System

    master

    Blade is an open-source, cross-platform design system used by Razorpay. It is designed to work natively across different environments and supports advanced features like white-labeling and CSS variable usage for non-React projects.

    Key Features

    • Cross-Platform Support: Works with React Web and React Native.
    • White Labelling: Supports theming for different brand identities.
    • CSS Variables: Provides tokens via CSS variables for use in non-React projects.
    • Accessibility: Built with accessibility standards in mind.
    • Documented Decisions: API decisions and architectural changes are documented via RFCs.

  7. Use ChatInput for AI prompt interfaces

    master

    The ChatInput component is a composable input designed for conversational AI. It integrates a textarea, file uploads, ghost suggestion autocomplete, and a submit action. It can be used in a controlled mode by managing value and fileList via state.

    Key Features

    • Text Input: Controlled via value and onChange.
    • File Uploads: Supports file selection, previews, and removal. Uses accept, maxFileSize, and maxFileCount for constraints.
    • AI Generation State: When isGenerating is true, the submit button transforms into a stop button, triggering onStop when clicked.
    • Ghost Suggestions: Displays cycling text suggestions that users can accept by pressing TAB, triggering onSuggestionAccept.
    • Validation: Supports an error state with custom errorText.
    import { ChatInput } from '@razorpay/blade/components';

<ChatInput
  value={text}
  onChange={({ value }) => setText(value)}
  onSubmit={({ value, fileList }) => handleSend(value, fileList)}
  placeholder="Ask a question..."
  isGenerating={isWaiting}
  onStop={() => abortGeneration()}
  fileList={files}
  onFileChange={({ fileList }) => setFiles(fileList)}
  onFileRemove={({ file }) => removeFile(file)}
  accept=".jpg,.png,.pdf,.xlsx"
  maxFileSize={5242880}
  maxFileCount={5}
  suggestions={
    [
      'How do I integrate payment gateway?',
      'Show me recent transactions',
      'Help me set up webhooks',
    ],
  }
  onSuggestionAccept={({ suggestion }) => acceptSuggestion(suggestion)}
  validationState="error"
  errorText="Something went wrong. Please try again."
/>;

  8. Use the ChatInput component for AI interfaces

    master

    ChatInput is a specialized component for AI chat interfaces. It provides a resizable textarea combined with several conversational features:

    • File Uploads: Supports attaching files with attachment previews and status tracking.
    • Ghost Suggestions: Displays cycling autocomplete suggestions that users can accept via the TAB key.
    • Generation Control: Swaps the submit button for a 'stop' button when isGenerating is true, allowing users to cancel in-flight AI responses.
    • Validation: Supports animated error popups for input validation.

    Important Constraints:

    • suggestions and onSuggestionAccept must be used together. If you provide suggestions without onSuggestionAccept, accepted suggestions will not be propagated back to your state.
    • Most functionality is controlled by the consumer.
    • The component does not handle automatic file uploads; you must manage the upload lifecycle and status manually.
    import { ChatInput } from '@razorpay/blade/components';

// Basic usage pattern
<ChatInput
  value={value}
  onChange={({ value }) => setValue(value)}
  onSubmit={({ value, fileList }) => handleSubmission(value, fileList)}
/>

  9. Features of the Dev Handoff Checklist

    master

    The Snowflake handoff checklist widget provides the following capabilities to assist designers and design leaders:

    • Raising requests: Facilitates the process of requesting specific design updates or clarifications.
    • Component hygiene: Ensures that components follow established design system standards and best practices.
    • Reviews: Provides a structured way to conduct final reviews before developer handoff.

  10. TextArea Component Overview

    master

    The TextArea component is used for collecting multi-line text input from users, such as comments, descriptions, or bio information. It supports validation states, character counting, and tagging functionality.

    Key Features

    • Multi-line support: Controlled via numberOfLines (values: 1 | 2 | 3 | 4 | 5).
    • Validation: Supports validationState ('none' | 'error' | 'success') with associated errorText and successText.
    • Character Limits: Use maxCharacters to enforce limits and display a counter.
    • Tagging: Enable isTaggedInput to allow users to enter multiple distinct items (e.g., email addresses) using the tags and onTagChange props.
    • Accessibility: Requires either a label or an accessibilityLabel.
    import { TextArea } from '@razorpay/blade/components';

  12. Features of the Dev Handoff Checklist widget

    master

    The Dev Handoff Checklist widget provides three primary functional areas for design teams:

    • Design reviews: Facilitates the final review process.
    • Edge-case scenario checklist: Ensures all technical and visual edge cases are accounted for.
    • Blade design system checklist: Verifies that the design adheres to the Blade design system standards.