styled-ui

styled-ui

UI Kit based on Styled Components

Work in progress. I will be glad to any help in the development of this project.

Example

import React from 'react'
import styled, { ThemeProvider } from 'styled-components'
import {
  DefaultTheme,
  Row,
  Column,
  Navbar,
  Menu,
  MenuItem,
  Title,
  Button,
  Label,
  Input
} from 'styled-ui'
import Logo from '../Logo'

const StyledLogo = styled(Logo)`
  margin-right: 1.25rem;
  display: block;
`

const App = () => (
  <ThemeProvider theme={DefaultTheme}>
    <div>
      <Navbar>
        <StyledLogo width='1.5rem' height='1.5rem' />
        <Menu>
          <MenuItem active>
            <a href='/about'>About Us</a>
          </MenuItem>
          <MenuItem>
            <a href='/products'>Products</a>
          </MenuItem>
          <MenuItem>
            <a href='/contacts'>Contacts</a>
          </MenuItem>
        </Menu>
      </Navbar>
      <Row>
        <Title>Hello World!</Title>
      </Row>
      <Row>
        <Button>Push me</Button>
        <Button primary>Don't push on left</Button>
      </Row>
      <Row>
        <Column width={1 / 3}>
          <form>
            <Label htmlFor='amount'>Enter amount</Label>
            <Input id='amount' type='number' defaultValue='1000' />
          </form>
        </Column>
        <Column width={2 / 3}>
          Thank you for your interest in this project.
        </Column>
      </Row>
    </div>
  </ThemeProvider>
)

export default App