Malachite

A lightweight Styled Components library composed of configurable, pre-styled components that can be used to kickstart your UI development process.

Guide

Malachite breaks down its components into four categories: Elements, Components and Helpers.

Basic Usage

// Your application root
import React from "react";
import Malachite from "malachite";

class App extends Component {
    // ...
}

export default () => <Malachite app={() => <App />} />;

// Or

export default () => (
    <Malachite>
        <App />
    </Malachite>
)

Customising the theme

You can pass an object literal to the theme prop of the Malachite component. It will override existing values and add any new values to the theme object which is available in your app's styled-components.

const theme = {
    colors: {
        primary: "pink"
    }
}

export default () => (
    <Malachite theme={theme}>
        <App />
    </Malachite>
)

Elements

Elements are native html elements that have the theme configuration applied to them.

Components

Components are common UI patters, typically composed using Elements.

Helpers

Helpers are functions that are used within this library, you should use them on your custom components too.

Screens helper

The screens helper sort of works like a sass mixin, it provides a cleaner syntax for screen media queries.

Usage:

const MyComponent = styled.div`
    ${screens.md`
        background-color: pink;
    `};
`;