TypeScript icon, indicating that this package has built-in type declarations

    37.9.1 • Public • Published

    ci-cd NPM

    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 uses Neptune CSS.


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

    Install @transferwise/components and its peer dependencies. Note: currency-flags is only required if you're using the Money Input or if you're using flags on the Select.

    # yarn
    yarn add @transferwise/components react react-dom prop-types currency-flags
    # npm
    npm install @transferwise/components react react-dom prop-types currency-flags
    // These CSS files should be imported once in your application
    import '@transferwise/neptune-css/dist/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

    TypeScript | Type Declarations

    This package exposes type declarations for all components.

    Note: types for some of components are not 100% accurate (some of them will be just any), this is due to fact that many of components written on JavaScript and types generated by react-to-typescript-definitions based of components PropTypes and unfortunatly the library doesn't resolve all PropTypes features and use cases (e.g custom validators, PropTypes.objectOf, requireIf, etc). But bear with us as eventually it would be fully on TypeScript.

    Please follow rules for JS components in order to generate accurate types for them.


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


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




    npm i @transferwise/components

    DownloadsWeekly Downloads






    Unpacked Size

    2.4 MB

    Total Files


    Last publish


    • tw-circleci
    • tw-circle-public