@massalabs/react-ui-kit NPM

Massa React TS ui-kit

Tech:

React typescript
tailwind

How to use it?

npm install @massalabs/react-ui-kit -D
update your tailwind configuration file tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@massalabs/react-ui-kit/src/**/*.{js,ts,jsx,tsx}",
  ],
  presets: [require("@massalabs/react-ui-kit/presets/massa-station-preset.js")],
};

update your vite.config.ts file:

export default ({ mode }) => {
  ...
  return defineConfig({
    ...
    optimizeDeps: {
      include: ['react-dom', 'dot-object', 'copy-to-clipboard'],
    },

import the global css in you main tsx file (main.tsx or App.tsx):

import "@massalabs/react-ui-kit/src/global.css";

use the components:

import { Amount } from "@massalabs/react-ui-kit";

Contribute

You can add global CSS in src/global.css.

How to clean code

use tailwind alias to avoid long className string
create react function component: export function PrimaryButton(props: PrimaryButtonProps) {}
- or export const PrimaryButton = (props: PrimaryButtonProps) => {}
create one folder per component with
- component
- unit tests
- storybook stories

Theme

To apply a theme, use the class theme-light or theme-dark. All nested elements will apply the theme.

See https://github.com/L-Blondy/tw-colors#nested-themes for details.

Massa's design system color palette in implemented in presets/massa-station-preset.js thanks to tw-colors plugin.

You can now use our custom colors thanks to className:

<p className="bg-primary"></p>
<p className="text-neutral"></p>

Create your own theme

You can create your own theme by creating a new file in the presets directory.

Copy this file https://github.com/massalabs/ui-kit/blob/main/presets/massa-station-preset.js.

Update the tailwind.config.js file to use your new theme to change preset:

  presets: [require('./src/themes/preset.js')],

Typography

All typographies are defined in the tailwind preset.

To use them, simple add the name of the typography in the className prefixed by mas-:

<h1 className="mas-banner">My title</h1>

Icons

Icons are imported via the react-icons library See https://react-icons.github.io/react-icons/ for details & https://github.com/react-icons/react-icons for specific use cases

@headlessui/react @massalabs/massa-web3 @massalabs/wallet-provider @types/dot-object copy-to-clipboard currency.js dot-object minidenticons react react-currency-input-field react-dom react-hot-toast react-icons react-number-format tw-colors zustand

@everything-registry/sub-chunk-583

1.0.3-dev.20250210094928

10 months ago

1.1.1-dev.20250507214833

7 months ago

1.0.1-dev.20241219145708

12 months ago

1.0.3-dev.20250408164416

8 months ago

1.0.3-dev.20250122150606

11 months ago

1.0.3-dev.20250206151336

10 months ago

1.0.3-dev.20250402102333

8 months ago

1.1.1-dev.20250417120856

8 months ago

1.1.1-dev.20250507212051

7 months ago

1.0.3-dev.20250414101727

8 months ago

1.1.1-dev.20250519111806

7 months ago

1.0.3-dev.20250321102643

9 months ago

1.0.3-dev.20250416134107

8 months ago

1.0.3-dev.20250312155346

9 months ago

1.0.1-dev.20241118122138

1 year ago

1.0.1-dev.20241128140249

1 year ago

1.0.2-dev.20250117101315

11 months ago

1.1.1-dev.20250507233801

7 months ago

1.0.3-dev.20250120211855

11 months ago

1.0.1-dev.20241106091332

1 year ago

1.0.1-dev.20241115095210

1 year ago

1.1.0

8 months ago

1.0.3-dev.20250409143242

8 months ago

1.0.2

11 months ago

1.0.1

11 months ago

1.1.1-dev.20250523120945

6 months ago

1.0.3-dev.20250326052633

8 months ago

1.0.1-dev.20241220151114

12 months ago

0.1.1-dev.20241030100406

1 year ago

1.0.1-dev.20241031090157

1 year ago

1.0.0

1 year ago

0.1.1-dev.20241015101242

1 year ago

0.1.1-dev.20241010094448

1 year ago

0.1.1-dev.20241014105429

1 year ago

0.1.1-dev.20240830155640

1 year ago

0.1.1-dev.20240830152053

1 year ago

0.1.1-dev.20240827113035

1 year ago

0.0.5-dev.20240531135100

2 years ago

0.0.5-dev.20240523122641

2 years ago

0.0.5-dev.20240605165214

1 year ago

0.0.5-dev.20240531154425

2 years ago

0.0.5-dev.20240531134832

2 years ago

0.0.6-dev.20240725152458

1 year ago

0.0.5-dev.20240530141135

2 years ago

0.1.1-dev.20240805180614

1 year ago

0.1.1-dev.20240730135858

1 year ago

0.0.5-dev.20240607130226

1 year ago

0.0.5-dev.20240528073937

2 years ago

0.0.5

1 year ago

0.1.1-dev.20240715145239

1 year ago

0.1.1-dev.20240821131612

1 year ago

0.0.5-dev.20240611224415

1 year ago

0.0.6-dev.20240715144827

1 year ago

0.1.1-dev.20240729230201

1 year ago

0.1.1-dev.20240729140204

1 year ago

0.1.1-dev.20240729230237

1 year ago

0.1.1-dev.20240819115541

1 year ago

0.0.5-dev.20240529153122

2 years ago

0.0.5-dev.20240523123420

2 years ago

0.0.5-dev.20240527212745

2 years ago

0.1.1-dev.20240726132720

1 year ago

0.0.5-dev.20240607130127

1 year ago

0.0.5-dev.20240607130255

1 year ago

0.1.1-dev.20240730073348

1 year ago

0.0.5-dev.20240523170836

2 years ago

0.1.1-dev.20240725132850

1 year ago

0.0.5-dev.20240522140200

2 years ago

0.1.1-dev.20240806073800

1 year ago

0.0.5-dev.20240521145845

2 years ago

0.0.5-dev.20240521171816

2 years ago

0.0.5-dev.20240521171843

2 years ago

0.0.5-dev.20240521100010

2 years ago

0.0.5-dev.20240521130643

2 years ago

0.0.5-dev.20240517003813

2 years ago

0.0.4-next.20240516004856

2 years ago

0.0.4-next.20240515224719

2 years ago

0.0.4

2 years ago

0.0.5-next.20240516202234

2 years ago

0.0.4-next.20240516201431

2 years ago

0.0.5-next.20240516212853

2 years ago

0.0.4-dev.20240515124838

2 years ago

0.0.4-next.20240516005117

2 years ago

0.0.4-next.20240515220303

2 years ago

0.0.4-dev.20240515124107

2 years ago

0.0.4-dev.20240516122715

2 years ago

0.0.4-next.20240516001747

2 years ago

0.0.5-next.20240516213908

2 years ago

0.0.4-next.20240516201000

2 years ago

0.0.4-next.20240515171248

2 years ago

0.0.4-next.20240516002224

2 years ago

0.0.4-dev.20240515123117

2 years ago

0.0.4-dev.20240515123357

2 years ago

0.0.4-next.20240515215913

2 years ago

0.0.4-next.20240516123225

2 years ago

0.0.4-dev.20240514152025

2 years ago

0.0.4-dev.20240513132823

2 years ago

0.0.4-dev.20240510134438

2 years ago

0.0.4-dev.20240510134418

2 years ago

0.0.4-dev.20240510143231

2 years ago

0.0.4-dev.20240510130151

2 years ago

0.0.4-dev.20240510140915

2 years ago

0.0.4-dev.20240506210918

2 years ago

0.0.4-dev.20240506125218

2 years ago

0.0.4-dev.20240502125229

2 years ago

0.0.4-dev.20240429153446

2 years ago

0.0.4-dev.20240426205130

2 years ago

0.0.4-dev.20240426205806

2 years ago

0.0.4-dev.20240426205727

2 years ago

0.0.4-dev.20240423135642

2 years ago

0.0.4-dev.20240418091746

2 years ago

0.0.4-dev.20240417132033

2 years ago

0.0.4-dev.20240417143213

2 years ago

0.0.4-dev.20240417124653

2 years ago

0.0.4-dev.20240305151809

2 years ago

0.0.4-dev.20240305170308

2 years ago

0.0.4-dev.20240305151623

2 years ago

0.0.4-dev.20240226111628

2 years ago

0.0.4-dev.20240206151923

2 years ago

0.0.4-dev.20240206152002

2 years ago

0.0.4-dev.20240206152007

2 years ago

0.0.4-dev.20240130125901

2 years ago

0.0.4-dev.20240126141746

2 years ago

0.0.4-dev.20240126130850

2 years ago

0.0.4-dev.20240125142536

2 years ago

0.0.4-dev.20240125094119

2 years ago

0.0.4-dev.20240125094132

2 years ago

0.0.4-dev.20240122100723

2 years ago

0.0.4-dev.20240119143253

2 years ago

0.0.4-dev.20240110095646

2 years ago

0.0.4-dev.20240108130349

2 years ago

0.0.4-dev.20240108130221

2 years ago

0.0.4-dev.20240108130257

2 years ago

0.0.4-dev.20240108130129

2 years ago

0.0.4-dev.20240108130243

2 years ago

0.0.4-dev.20240108130317

2 years ago

0.0.4-dev.20240108110930

2 years ago

0.0.4-dev.20240104133417

2 years ago

0.0.4-dev.20231220150834

2 years ago

0.0.4-dev.20231220170304

2 years ago

0.0.4-dev.20230804084949

2 years ago

0.0.4-dev.20230926155657

2 years ago

0.0.4-dev.20231107163719

2 years ago

0.0.4-dev.20230925150415

2 years ago

0.0.4-dev.20230926154316

2 years ago

0.0.4-dev.20231030213253

2 years ago

0.0.4-dev.20231010160552

2 years ago

0.0.4-dev.20230811065604

2 years ago

0.0.4-dev.20230810131526

2 years ago

0.0.4-dev.20230811073814

2 years ago

0.0.4-dev.20231011141325

2 years ago

0.0.4-dev.20231103232937

2 years ago

0.0.4-dev.20231009130438

2 years ago

0.0.4-dev.20231108171236

2 years ago

0.0.4-dev.20230925152938

2 years ago

0.0.4-dev.20230721081925

2 years ago

0.0.4-dev.20231009131405

2 years ago

0.0.4-dev.20231106131021

2 years ago

0.0.4-dev.20230801092205

2 years ago

0.0.4-dev.20231010143519

2 years ago

0.0.4-dev.20230731142738

2 years ago

0.0.4-dev.20230719084322

2 years ago

0.0.4-dev.20230821154934

2 years ago

0.0.4-dev.20230807090141

2 years ago

0.0.4-dev.20230816164332

2 years ago

0.0.4-dev.20231009125603

2 years ago

0.0.4-dev.20231108171118

2 years ago

0.0.4-dev.20230808091339

2 years ago

0.0.4-dev.20231023094202

2 years ago

0.0.4-dev.20230724194112

2 years ago

0.0.4-dev.20230717100029

2 years ago

0.0.4-dev.20231011133428

2 years ago

0.0.4-dev.20231018155437

2 years ago

0.0.4-dev.20230713123010

2 years ago

0.0.4-dev.20230724195328

2 years ago

0.0.4-dev.20230921103309

2 years ago

0.0.4-dev.20230821153617

2 years ago

0.0.4-dev.20230926132541

2 years ago

0.0.4-dev.20230719081758

2 years ago

0.0.4-dev.20230802150548

2 years ago

0.0.4-dev.20231009164647

2 years ago

0.0.4-dev.20230803082508

2 years ago

0.0.4-dev.20230717123849

2 years ago

0.0.4-dev.20230703090732

2 years ago

0.0.4-dev.20230811073642

2 years ago

0.0.4-dev.20230629081614

2 years ago

0.0.4-dev.20230731081248

2 years ago

0.0.4-dev.20231009144418

2 years ago

0.0.4-dev.20231106131405

2 years ago

0.0.4-dev.20230919144732

2 years ago

0.0.4-dev.20231010101556

2 years ago

0.0.4-dev.20230825093059

2 years ago

0.0.4-dev.20230801154229

2 years ago

0.0.4-dev.20231009130102

2 years ago

0.0.4-dev.20230801142519

2 years ago

0.0.4-dev.20231024085221

2 years ago

0.0.4-dev.20230821165308

2 years ago

0.0.4-dev.20230705131950

2 years ago

0.0.4-dev.20230921110319

2 years ago

0.0.4-dev.20230717165538

2 years ago

0.0.4-dev.20231012143605

2 years ago

0.0.4-dev.20230822084100

2 years ago

0.0.4-dev.20231106130912

2 years ago

0.0.4-dev.20231010092341

2 years ago

0.0.4-dev.20230630121225

2 years ago

0.0.4-dev.20231023091802

2 years ago

0.0.4-dev.20230822101655

2 years ago

0.0.4-dev.20230629142120

2 years ago

0.0.4-dev.20230803085510

2 years ago

0.0.4-dev.20230801091445

2 years ago

0.0.4-dev.20230801140120

2 years ago

0.0.4-dev.20230717104011

2 years ago

0.0.4-dev.20231010112939

2 years ago

0.0.4-dev.20231012095334

2 years ago

0.0.4-dev.20230717173148

2 years ago

0.0.4-dev.20230824130602

2 years ago

0.0.4-dev.20230919155025

2 years ago

0.0.4-dev.20231108170454

2 years ago

0.0.4-dev.20230717140341

2 years ago

0.0.4-dev.20230626130906

2 years ago

0.0.4-dev.20230626082931

2 years ago

0.0.4-dev.20230607102422

2 years ago

0.0.4-dev.20230621155103

2 years ago

0.0.2-dev.20230510083036

3 years ago

0.0.4-dev.20230614215927

2 years ago

0.0.4-dev.20230623112758

2 years ago

0.0.4-dev.20230614133801

2 years ago

0.0.4-dev.20230614133009

2 years ago

0.0.2-dev.20230505095132

3 years ago

0.0.4-dev.20230525155600

3 years ago

0.0.4-dev.20230621125608

2 years ago

0.0.4-dev.20230516094330

3 years ago

0.0.4-dev.20230605092225

3 years ago

0.0.4-dev.20230515140622

3 years ago

0.0.4-dev.20230526123213

3 years ago

0.0.4-dev.20230515174155

3 years ago

0.0.4-dev.20230515085758

3 years ago

0.0.4-dev.20230512072804

3 years ago

0.0.4-dev.20230622222421

2 years ago

0.0.2-dev.20230503122128

3 years ago

0.0.2-dev.20230510085353

3 years ago

0.0.4-dev.20230612140208

2 years ago

0.0.4-dev.20230525161016

3 years ago

0.0.4-dev.20230601112638

3 years ago

0.0.4-dev.20230607105233

2 years ago

0.0.4-dev.20230608153653

2 years ago

0.0.4-dev.20230606145157

2 years ago

0.0.4-dev.20230615084021

2 years ago

0.0.4-dev.20230608150820

2 years ago

0.0.4-dev.20230602123037

3 years ago

0.0.4-dev.20230601231556

3 years ago

0.0.4-dev.20230517144650

3 years ago

0.0.4-dev.20230622233305

2 years ago

0.0.4-dev.20230526155238

3 years ago

0.0.4-dev.20230517151243

3 years ago

0.0.4-dev.20230531154402

3 years ago

0.0.4-dev.20230607220754

2 years ago

0.0.4-dev.20230529101325

3 years ago

0.0.4-dev.20230616092428

2 years ago

0.0.4-dev.20230612120051

2 years ago

0.0.3

3 years ago

0.0.4-dev.20230622133655

2 years ago

0.0.4-dev.20230529223631

3 years ago

0.0.4-dev.20230623112646

2 years ago

0.0.4-dev.20230525075659

3 years ago

0.0.4-dev.20230517104405

3 years ago

0.0.4-dev.20230606180207

2 years ago

0.0.4-dev.20230602083008

3 years ago

0.0.4-dev.20230525140159

3 years ago

0.0.4-dev.20230614165120

2 years ago

0.0.4-dev.20230608133842

2 years ago

0.0.2-dev.20230509155502

3 years ago

0.0.4-dev.20230515150452

3 years ago

0.0.4-dev.20230612152759

2 years ago

0.0.4-dev.20230608133054

2 years ago

0.0.4-dev.20230614135343

2 years ago

0.0.4-dev.20230526123428

3 years ago

0.0.4-dev.20230607094947

2 years ago

0.0.4-dev.20230607232614

2 years ago

0.0.4-dev.20230612081930

2 years ago

0.0.4-dev.20230623104247

2 years ago

0.0.2-dev.20230509141106

3 years ago

0.0.4-dev.20230517132618

3 years ago

0.0.2-dev.20230509154301

3 years ago

0.0.4-dev.20230525123327

3 years ago

0.0.4-dev.20230530125326

3 years ago

0.0.4-dev.20230613235347

2 years ago

0.0.4-dev.20230623083255

2 years ago

0.0.4-dev.20230601153025

3 years ago

0.0.4-dev.20230615083928

2 years ago

0.0.4-dev.20230615083802

2 years ago

0.0.4-dev.20230613234815

2 years ago

0.0.4-dev.20230530132204

3 years ago

0.0.4-dev.20230601153819

3 years ago

0.0.4-dev.20230614134715

2 years ago

0.0.4-dev.20230607195427

2 years ago

0.0.2-dev.20230505164653

3 years ago

0.0.4-dev.20230621172455

2 years ago

0.0.4-dev.20230614115411

2 years ago

0.0.4-dev.20230526085504

3 years ago

0.0.4-dev.20230510141954

3 years ago

0.0.4-dev.20230510135148

3 years ago

0.0.2-dev.20230505160608

3 years ago

0.0.4-dev.20230606145404

2 years ago

0.0.4-dev.20230606104530

2 years ago

0.0.4-dev.20230517142202

3 years ago

0.0.4-dev.20230531232015

3 years ago

0.0.4-dev.20230510134734

3 years ago

0.0.4-dev.20230620193733

2 years ago

0.0.4-dev.20230531145844

3 years ago

0.0.4-dev.20230619135035

2 years ago

0.0.4-dev.20230606080404

2 years ago

0.0.4-dev.20230622090052

2 years ago

0.0.4-dev.20230616160527

2 years ago

0.0.4-dev.20230525144314

3 years ago

0.0.4-dev.20230607182345

2 years ago

0.0.4-dev.20230614174036

2 years ago

0.0.4-dev.20230531085520

3 years ago

0.0.4-dev.20230606142143

2 years ago

0.0.4-dev.20230602161015

3 years ago

0.0.4-dev.20230525140503

3 years ago

0.0.4-dev.20230522163418

3 years ago

0.0.2-dev.20230502074637

3 years ago

0.0.4-dev.20230522163416

3 years ago

0.0.4-dev.20230621100846

2 years ago

0.0.4-dev.20230517150219

3 years ago

0.0.4-dev.20230606154109

2 years ago

0.0.4-dev.20230615220523

2 years ago

0.0.4-dev.20230516133222

3 years ago

0.0.4-dev.20230608125800

2 years ago

0.0.4-dev.20230616152121

2 years ago

0.0.4-dev.20230607182459

2 years ago

0.0.4-dev.20230525085518

3 years ago

0.0.4-dev.20230531075831

3 years ago

0.0.4-dev.20230608132450

2 years ago

0.0.4-dev.20230616094543

2 years ago

0.0.4-dev.20230531145744

3 years ago

0.0.4-dev.20230517165808

3 years ago

0.0.4-dev.20230529145137

3 years ago

0.0.4-dev.20230525085508

3 years ago

0.0.4-dev.20230515124647

3 years ago

0.0.4-dev.20230614131241

2 years ago

0.0.4-dev.20230525102611

3 years ago

0.0.4-dev.20230606101733

2 years ago

0.0.4-dev.20230614114922

2 years ago

0.0.4-dev.20230620152955

2 years ago

0.0.4-dev.20230517193022

3 years ago

0.0.4-dev.20230530132806

3 years ago

0.0.2-dev.20230505161721

3 years ago

0.0.4-dev.20230612224711

2 years ago

0.0.2-dev.20230505164334

3 years ago

0.0.4-dev.20230622233949

2 years ago

0.0.4-dev.20230601121609

3 years ago

0.0.4-dev.20230525080051

3 years ago

0.0.4-dev.20230525144400

3 years ago

0.0.4-dev.20230619143142

2 years ago

0.0.4-dev.20230614205139

2 years ago

0.0.4-dev.20230515143946

3 years ago

0.0.4-dev.20230517121820

3 years ago

0.0.4-dev.20230622101714

2 years ago

0.0.4-dev.20230616152950

2 years ago

0.0.2-dev.20230504211801

3 years ago

0.0.4-dev.20230526140814

3 years ago

0.0.4-dev.20230526141109

3 years ago

0.0.4-dev.20230517081449

3 years ago

0.0.4-dev.20230607075256

2 years ago

0.0.4-dev.20230615142927

2 years ago

0.0.4-dev.20230517132328

3 years ago

0.0.2-dev.20230505161427

3 years ago

0.0.4-dev.20230614211641

2 years ago

0.0.4-dev.20230531170850

3 years ago

0.0.4-dev.20230607205953

2 years ago

0.0.4-dev.20230522163452

3 years ago

0.0.4-dev.20230525084629

3 years ago

0.0.4-dev.20230516133143

3 years ago

0.0.4-dev.20230614204420

2 years ago

0.0.4-dev.20230601112529

3 years ago

0.0.2-dev.20230505092326

3 years ago

0.0.4-dev.20230623113354

2 years ago

0.0.4-dev.20230607235719

2 years ago

0.0.4-dev.20230530153515

3 years ago

0.0.4-dev.20230606152913

2 years ago

0.0.4-dev.20230607234628

2 years ago

0.0.4-dev.20230529161246

3 years ago

0.0.2-dev.20230502150347

3 years ago

0.0.4-dev.20230531073520

3 years ago

0.0.4-dev.20230517121905

3 years ago

0.0.4-dev.20230623145540

2 years ago

0.0.4-dev.20230526135015

3 years ago

0.0.4-dev.20230525084856

3 years ago

0.0.4-dev.20230515165432

3 years ago

0.0.4-dev.20230529152535

3 years ago

0.0.4-dev.20230511103017

3 years ago

0.0.4-dev.20230614215309

2 years ago

0.0.2-dev.20230510081909

3 years ago

0.0.4-dev.20230616102246

2 years ago

0.0.2-dev.20230509154919

3 years ago

0.0.4-dev.20230622225305

2 years ago

0.0.4-dev.20230623121326

2 years ago

0.0.2-dev.20230505142223

3 years ago

0.0.2-dev.20230505124356

3 years ago

0.0.4-dev.20230613081859

2 years ago

0.0.4-dev.20230526123952

3 years ago

0.0.4-dev.20230531230914

3 years ago

0.0.4-dev.20230621162000

2 years ago

0.0.4-dev.20230606131757

2 years ago

0.0.4-dev.20230614002447

2 years ago

0.0.2-dev.20230428132447

3 years ago

0.0.2-dev.20230428094921

3 years ago

0.0.2-dev.20230427104107

3 years ago

0.0.2-dev.20230427083520

3 years ago

0.0.2-dev.20230427080852

3 years ago

0.0.2-dev.20230426131228

3 years ago

0.0.2-dev.20230425121233

3 years ago

0.0.2-dev.20230425095730

3 years ago

0.0.2-dev.20230424142428

3 years ago

0.0.2-dev.20230424141625

3 years ago

0.0.2-dev.20230424111555

3 years ago