The shared UI component library used across all MyCrypto products.
Implemented with React components following Atomic Design.
Requires a bundler with ES module support.
yarn add @mycrypto/ui styled-components
Wrap your app in a ThemeProvider to use the included theme.
import { Body, theme } from '@mycrypto/ui';
import { ThemeProvider } from 'styled-components';
<ThemeProvider theme={theme}>
<Body>Hello, world!</Body>
</ThemeProvider>;Our designs use the Lato and Roboto Mono typefaces, which you will probably need to install in your app or site. There are several options depending on your requirements and build tooling:
- Use @fontsource/lato and @fontsource/roboto-mono to self-host your typefaces when using npm/yarn with Webpack or any other build tool with CSS and font loaders (instructions)
- Use Google Fonts to load the fonts from a CDN (over the Internet) without any configuration (note that Google collects some usage data)
- Download Lato and Roboto Mono directly if you need more control over font loading or if you only plan on using the fonts locally
You can launch the storybook simply by running yarn start. To test changes inside other projects directly, you can use yarn link:
# Inside the UI folder
yarn link
yarn build
# Inside your own project
yarn link @mycrypto/ui
The npm package is automatically updated by GitHub CI whenever the version is changed inside package.json.