@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 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 viem vite-plugin-svgr zustand

@everything-registry/sub-chunk-583

0.1.1-dev.20241030100406

10 months ago

1.0.1-dev.20241031090157

10 months ago

1.0.0

10 months ago

0.1.1-dev.20241015101242

10 months ago

0.1.1-dev.20241010094448

10 months ago

0.1.1-dev.20241014105429

10 months ago

0.1.1-dev.20240830155640

12 months ago

0.1.1-dev.20240830152053

12 months ago

0.1.1-dev.20240827113035

12 months ago

0.0.5-dev.20240531135100

1 year ago

0.0.5-dev.20240523122641

1 year ago

0.0.5-dev.20240605165214

1 year ago

0.0.5-dev.20240531154425

1 year ago

0.0.5-dev.20240531134832

1 year ago

0.0.6-dev.20240725152458

1 year ago

0.0.5-dev.20240530141135

1 year 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

1 year ago

0.0.5

1 year ago

0.1.1-dev.20240715145239

1 year ago

0.1.1-dev.20240821131612

12 months 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

12 months ago

0.0.5-dev.20240529153122

1 year ago

0.0.5-dev.20240523123420

1 year ago

0.0.5-dev.20240527212745

1 year 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

1 year ago

0.1.1-dev.20240725132850

1 year ago

0.0.5-dev.20240522140200

1 year ago

0.1.1-dev.20240806073800

1 year ago

0.0.5-dev.20240521145845

1 year ago

0.0.5-dev.20240521171816

1 year ago

0.0.5-dev.20240521171843

1 year ago

0.0.5-dev.20240521100010

1 year ago

0.0.5-dev.20240521130643

1 year ago

0.0.5-dev.20240517003813

1 year ago

0.0.4-next.20240516004856

1 year ago

0.0.4-next.20240515224719

1 year ago

0.0.4

1 year ago

0.0.5-next.20240516202234

1 year ago

0.0.4-next.20240516201431

1 year ago

0.0.5-next.20240516212853

1 year ago

0.0.4-dev.20240515124838

1 year ago

0.0.4-next.20240516005117

1 year ago

0.0.4-next.20240515220303

1 year ago

0.0.4-dev.20240515124107

1 year ago

0.0.4-dev.20240516122715

1 year ago

0.0.4-next.20240516001747

1 year ago

0.0.5-next.20240516213908

1 year ago

0.0.4-next.20240516201000

1 year ago

0.0.4-next.20240515171248

1 year ago

0.0.4-next.20240516002224

1 year ago

0.0.4-dev.20240515123117

1 year ago

0.0.4-dev.20240515123357

1 year ago

0.0.4-next.20240515215913

1 year ago

0.0.4-next.20240516123225

1 year ago

0.0.4-dev.20240514152025

1 year ago

0.0.4-dev.20240513132823

1 year ago

0.0.4-dev.20240510134438

1 year ago

0.0.4-dev.20240510134418

1 year ago

0.0.4-dev.20240510143231

1 year ago

0.0.4-dev.20240510130151

1 year ago

0.0.4-dev.20240510140915

1 year ago

0.0.4-dev.20240506210918

1 year ago

0.0.4-dev.20240506125218

1 year ago

0.0.4-dev.20240502125229

1 year ago

0.0.4-dev.20240429153446

1 year ago

0.0.4-dev.20240426205130

1 year ago

0.0.4-dev.20240426205806

1 year ago

0.0.4-dev.20240426205727

1 year ago

0.0.4-dev.20240423135642

1 year ago

0.0.4-dev.20240418091746

1 year ago

0.0.4-dev.20240417132033

1 year ago

0.0.4-dev.20240417143213

1 year ago

0.0.4-dev.20240417124653

1 year ago

0.0.4-dev.20240305151809

1 year ago

0.0.4-dev.20240305170308

1 year ago

0.0.4-dev.20240305151623

1 year ago

0.0.4-dev.20240226111628

1 year 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

2 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

2 years ago

0.0.4-dev.20230525155600

2 years ago

0.0.4-dev.20230621125608

2 years ago

0.0.4-dev.20230516094330

2 years ago

0.0.4-dev.20230605092225

2 years ago

0.0.4-dev.20230515140622

2 years ago

0.0.4-dev.20230526123213

2 years ago

0.0.4-dev.20230515174155

2 years ago

0.0.4-dev.20230515085758

2 years ago

0.0.4-dev.20230512072804

2 years ago

0.0.4-dev.20230622222421

2 years ago

0.0.2-dev.20230503122128

2 years ago

0.0.2-dev.20230510085353

2 years ago

0.0.4-dev.20230612140208

2 years ago

0.0.4-dev.20230525161016

2 years ago

0.0.4-dev.20230601112638

2 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

2 years ago

0.0.4-dev.20230601231556

2 years ago

0.0.4-dev.20230517144650

2 years ago

0.0.4-dev.20230622233305

2 years ago

0.0.4-dev.20230526155238

2 years ago

0.0.4-dev.20230517151243

2 years ago

0.0.4-dev.20230531154402

2 years ago

0.0.4-dev.20230607220754

2 years ago

0.0.4-dev.20230529101325

2 years ago

0.0.4-dev.20230616092428

2 years ago

0.0.4-dev.20230612120051

2 years ago

0.0.3

2 years ago

0.0.4-dev.20230622133655

2 years ago

0.0.4-dev.20230529223631

2 years ago

0.0.4-dev.20230623112646

2 years ago

0.0.4-dev.20230525075659

2 years ago

0.0.4-dev.20230517104405

2 years ago

0.0.4-dev.20230606180207

2 years ago

0.0.4-dev.20230602083008

2 years ago

0.0.4-dev.20230525140159

2 years ago

0.0.4-dev.20230614165120

2 years ago

0.0.4-dev.20230608133842

2 years ago

0.0.2-dev.20230509155502

2 years ago

0.0.4-dev.20230515150452

2 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

2 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

2 years ago

0.0.4-dev.20230517132618

2 years ago

0.0.2-dev.20230509154301

2 years ago

0.0.4-dev.20230525123327

2 years ago

0.0.4-dev.20230530125326

2 years ago

0.0.4-dev.20230613235347

2 years ago

0.0.4-dev.20230623083255

2 years ago

0.0.4-dev.20230601153025

2 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

2 years ago

0.0.4-dev.20230601153819

2 years ago

0.0.4-dev.20230614134715

2 years ago

0.0.4-dev.20230607195427

2 years ago

0.0.2-dev.20230505164653

2 years ago

0.0.4-dev.20230621172455

2 years ago

0.0.4-dev.20230614115411

2 years ago

0.0.4-dev.20230526085504

2 years ago

0.0.4-dev.20230510141954

2 years ago

0.0.4-dev.20230510135148

2 years ago

0.0.2-dev.20230505160608

2 years ago

0.0.4-dev.20230606145404

2 years ago

0.0.4-dev.20230606104530

2 years ago

0.0.4-dev.20230517142202

2 years ago

0.0.4-dev.20230531232015

2 years ago

0.0.4-dev.20230510134734

2 years ago

0.0.4-dev.20230620193733

2 years ago

0.0.4-dev.20230531145844

2 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

2 years ago

0.0.4-dev.20230607182345

2 years ago

0.0.4-dev.20230614174036

2 years ago

0.0.4-dev.20230531085520

2 years ago

0.0.4-dev.20230606142143

2 years ago

0.0.4-dev.20230602161015

2 years ago

0.0.4-dev.20230525140503

2 years ago

0.0.4-dev.20230522163418

2 years ago

0.0.2-dev.20230502074637

2 years ago

0.0.4-dev.20230522163416

2 years ago

0.0.4-dev.20230621100846

2 years ago

0.0.4-dev.20230517150219

2 years ago

0.0.4-dev.20230606154109

2 years ago

0.0.4-dev.20230615220523

2 years ago

0.0.4-dev.20230516133222

2 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

2 years ago

0.0.4-dev.20230531075831

2 years ago

0.0.4-dev.20230608132450

2 years ago

0.0.4-dev.20230616094543

2 years ago

0.0.4-dev.20230531145744

2 years ago

0.0.4-dev.20230517165808

2 years ago

0.0.4-dev.20230529145137

2 years ago

0.0.4-dev.20230525085508

2 years ago

0.0.4-dev.20230515124647

2 years ago

0.0.4-dev.20230614131241

2 years ago

0.0.4-dev.20230525102611

2 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

2 years ago

0.0.4-dev.20230530132806

2 years ago

0.0.2-dev.20230505161721

2 years ago

0.0.4-dev.20230612224711

2 years ago

0.0.2-dev.20230505164334

2 years ago

0.0.4-dev.20230622233949

2 years ago

0.0.4-dev.20230601121609

2 years ago

0.0.4-dev.20230525080051

2 years ago

0.0.4-dev.20230525144400

2 years ago

0.0.4-dev.20230619143142

2 years ago

0.0.4-dev.20230614205139

2 years ago

0.0.4-dev.20230515143946

2 years ago

0.0.4-dev.20230517121820

2 years ago

0.0.4-dev.20230622101714

2 years ago

0.0.4-dev.20230616152950

2 years ago

0.0.2-dev.20230504211801

2 years ago

0.0.4-dev.20230526140814

2 years ago

0.0.4-dev.20230526141109

2 years ago

0.0.4-dev.20230517081449

2 years ago

0.0.4-dev.20230607075256

2 years ago

0.0.4-dev.20230615142927

2 years ago

0.0.4-dev.20230517132328

2 years ago

0.0.2-dev.20230505161427

2 years ago

0.0.4-dev.20230614211641

2 years ago

0.0.4-dev.20230531170850

2 years ago

0.0.4-dev.20230607205953

2 years ago

0.0.4-dev.20230522163452

2 years ago

0.0.4-dev.20230525084629

2 years ago

0.0.4-dev.20230516133143

2 years ago

0.0.4-dev.20230614204420

2 years ago

0.0.4-dev.20230601112529

2 years ago

0.0.2-dev.20230505092326

2 years ago

0.0.4-dev.20230623113354

2 years ago

0.0.4-dev.20230607235719

2 years ago

0.0.4-dev.20230530153515

2 years ago

0.0.4-dev.20230606152913

2 years ago

0.0.4-dev.20230607234628

2 years ago

0.0.4-dev.20230529161246

2 years ago

0.0.2-dev.20230502150347

2 years ago

0.0.4-dev.20230531073520

2 years ago

0.0.4-dev.20230517121905

2 years ago

0.0.4-dev.20230623145540

2 years ago

0.0.4-dev.20230526135015

2 years ago

0.0.4-dev.20230525084856

2 years ago

0.0.4-dev.20230515165432

2 years ago

0.0.4-dev.20230529152535

2 years ago

0.0.4-dev.20230511103017

2 years ago

0.0.4-dev.20230614215309

2 years ago

0.0.2-dev.20230510081909

2 years ago

0.0.4-dev.20230616102246

2 years ago

0.0.2-dev.20230509154919

2 years ago

0.0.4-dev.20230622225305

2 years ago

0.0.4-dev.20230623121326

2 years ago

0.0.2-dev.20230505142223

2 years ago

0.0.2-dev.20230505124356

2 years ago

0.0.4-dev.20230613081859

2 years ago

0.0.4-dev.20230526123952

2 years ago

0.0.4-dev.20230531230914

2 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

2 years ago

0.0.2-dev.20230428094921

2 years ago

0.0.2-dev.20230427104107

2 years ago

0.0.2-dev.20230427083520

2 years ago

0.0.2-dev.20230427080852

2 years ago

0.0.2-dev.20230426131228

2 years ago

0.0.2-dev.20230425121233

2 years ago

0.0.2-dev.20230425095730

2 years ago

0.0.2-dev.20230424142428

2 years ago

0.0.2-dev.20230424141625

2 years ago

0.0.2-dev.20230424111555

2 years ago