0.0.3 • Published 4 years ago
styled-ui v0.0.3
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