@transferwise/components

Neptune Web React Components

Neptune is the Design System built by and used at TransferWise. Neptune Web is the Neptune framework for Web. Neptune Web provides a way to build high quality, consistent user experiences on the web with ease.

This is the Neptune Web React component library. It includes all necessary base CSS styles.

Usage

Neptune Components are published to npm as @transferwise/components.

# pnpm
pnpm install @transferwise/components react react-dom prop-types @wise/art

# yarn
yarn add @transferwise/components react react-dom prop-types @wise/art

# npm
npm install @transferwise/components react react-dom prop-types @wise/art

// These CSS files should be imported once in your application
import '@transferwise/components/build/styles/css/neptune.css';
import '@transferwise/components/build/main.css';

import en from '@transferwise/components/build/i18n/en.json';
import { Provider, Button, Size } from '@transferwise/components';

export default function Hello() {
  return (
    <Provider i18n={{ locale: 'en-UK', messages: en }}>
      <Button size={Size.SMALL} block={true}>
        Hello Neptune
      </Button>
    </Provider>
  );
}

Mocks for testing

We expose reusable mocks for Jest and Vitest under an isolated entry point. They can be applied by passing the testing framework as the parameter:

import { mockMatchMedia, mockResizeObserver } from '@transferwise/components/build/mocks';
import { jest } from '@jest/globals';
import { vi } from 'vitest';

mockMatchMedia(jest); // With Jest
mockResizeObserver(vi); // With Vitest

Documentation

Visit the docs for information on getting started, usage information and examples for each component.

Contributing

We love contribution! 🙏 Read the guide to get started.