Implemented with React components following Atomic Design.
Requires a bundler with ES module support.
yarn add @hageveld/ui styled-components
Wrap your app in a ThemeProvider to use the included light theme.
import { Button, light } from '@hageveld/ui';
import React from 'react';
import { ThemeProvider } from 'styled-components';
<ThemeProvider theme={light}>
<Button>Button</Button>
</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 typeface-lato and typeface-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