Unstyled NPM | npm.io

unstyled

React components with minimal styling, easily to extend. Based on styled-components. Inspired by React Native components and SemanticUI. Will cover all common used html tags and adding convenient components for widely used UI elements.

WIP: This package is in an early alpha stage. Breaking changes can occur without notification. Already used in production (caution!). Feedback and contributions are welcome.

Versioning (prior to 1.0.0)

0.Y.Z:

Y => Breaking changes and Features
Z => Patches

Installation

$ yarn add unstyled

or (if you prefer)

$ npm i --save unstyled

Usage with GatsbyJS

As this lib is mainly used with GatsbyJS for fast prototyping of new websites I'll cover that first.

yarn add unstyled styled-components gatsby-plugin-styled-components

Make sure to install "gatsby-plugin-styled-components" and configure it in `gatsby-config':

plugins: ["gatsby-plugin-styled-components", ...]

Example

import React from "react";
import { Container, Button } from "unstyled";

const App = () => (
  <Container>
      <h1>Elements</h1>
      <Button>Basic Button</Button>
  </Container>
);

export default App;

Extend Elements

It's easy to extend elements and apply your own styles. Just use styled-components extend feature.

import Button from 'unstyled'

const CustomButton = Button.extend`
  color: tomato;
`

Theming

Wrap your own theme via styled-components ThemeProvider.

import styled, { ThemeProvider } from "styled-components"
import {StyledComponentsTheme, Button} from "unstyled"

const Element = () => (
  <ThemeProvider theme={StyledComponentsTheme}>
    <div>
      <h2>Button with custom theme:</h2>
      <Button>
        Styled Button
      </Button>
    </div>
  </ThemeProvider>
)

export default Element