Introduction

Axis is a theme-based component library that is fully responsive and extensible.

Installation

Use npm or yarn:

$ yarn add @theise3107/axis

Axis supports SSR by default, no configuration needed

Use ThemeProvider to wrapper all of the styled-components to provide the theme as prop:

app.js

import React from 'react'
import { ThemeProvider } from '@therise3107/axis'

import theme from 'styles/theme'

const app = ({ children }) => (
  <ThemeProvider theme={theme}>
    {children}
  </ThemeProvider>
)

Providing your theme is optional but it is highly recommended to extend the default theme as per your style

Use styled-components in your pages

import React from 'react'
import { Row, Column, Container, Heading, Text } from '@therise3107/axis'

const home = () => (
    <Container>
        <Row>
            <Column>
                <Heading>Cats 🐱</Heading>
                <Text>Cats are planning global invasion!</Text>
            </Column>
            
            <Column>
                <Heading>Dogs 🐶</Heading>
                <Text>Dogs are here to the rescue!</Text>
            </Column>
        </Row>
    </Container>
)