Getting Started

To start using our styleguide you first need to add all the packages.

yarn add @marvelapp/ui @marvelapp/theme styled-components

Once you’ve added the packages you need to make sure that all components are wrapped in the <ThemeProvider> and our theme object is passed to it.

import { ThemeProvider } from 'styled-components';
import theme from '@marvelapp/theme';

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>;

Our theme object follows the Styled System Theme Specification, which lets you define custom color palettes, typographic scales, fonts, and more.

// example theme.js
export default {
  fonts: {
    body:
      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
    heading: '"Avenir Next", sans-serif',
    monospace: 'Menlo, monospace',
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
  },
};