React components with minimal styling, easily to extend. Based on styled-components.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
www
.eslintrc.yml
.gitignore
.npmignore
.prettierrc
.travis.yml
LICENSE
README.md
netlify.toml
package.json
rollup.config.js
yarn.lock

README.md

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

License

Licensed under the MIT License, Copyright © 2017 superlumen.

See LICENSE for more information.

style: styled-components