Getting Started

UI Kit - LaWallet

Manual Installation

To manually add LaWallet to your project, install the required packages.

npm i @lawallet/ui

@lawallet/ui (opens in a new tab) is an open source library that contains the atomic components used in the LaWallet web application.

Create theme

Create and export a new theme using createTheme.

theme.ts

import { createTheme } from '@lawallet/ui';
 
export const appTheme = createTheme({
  colors: {
    black: '#1C1C1C',
    white: '#f1f1f1',
    primary: '#56B68C',
    secondary: '#FDC800',
    gray5: '#0D0D0D',
    gray10: '#1A1A1A',
    gray15: '#262626',
    gray20: '#333333',
    gray25: '#404040',
    gray30: '#4D4D4D',
    gray35: '#595959',
    gray40: '#666666',
    gray45: '#737373',
    gray50: '#808080',
    success: '#56B68C',
    warning: '#F9B550',
    error: '#E95053',
    background: '#1C1C1C',
    text: '#f1f1f1',
  },
  borders: {
    buttonRadius: '50px',
  },
});

Wrap App in UI Kit Provider

Wrap your app in the ReactProvider React Context Provider and pass the appTheme you created earlier to the theme property.

Check out the ReactProvider and NextProvider docs to learn more about React Context in LaWallet.

createTheme