Skip to content

malcodeman/malcomponents

Repository files navigation

style: styled-components code style: prettier GitHub license npm

Collection of React components.

Getting started

yarn add malcomponents
import React from "react";
import { ThemeProvider, LightTheme, Button, GlobalStyle } from "malcomponents";

function App() {
  return (
    <ThemeProvider theme={LightTheme}>
      <Button>Button</Button>
      <GlobalStyle />
    </ThemeProvider>
  );
}

export default App;

Global styles

Components within the design system assume that a set of global styles have been configured.

Theming

We require that you select a theme as part of boilerplate setup. Our components require a theme to assign styles. We provide two themes out of the box, LightTheme and DarkTheme, which style components in light & dark variants.

import React from "react";
import { ThemeProvider, DarkTheme, Button, GlobalStyle } from "malcomponents";

function App() {
  return (
    <ThemeProvider theme={DarkTheme}>
      <Button>Button</Button>
      <GlobalStyle />
    </ThemeProvider>
  );
}

export default App;

License

MIT