React UI component primitives built with styled-components
npm i styled-primitives
import React from 'react'
import { Heading, Text } from 'styled-primitives'
const App = props => (
<div>
<Heading>Hello</Heading>
<Text>Styled Primitives</Text>
</div>
)
<Text>Hello</Text>
<Text bold>Hello</Text>
<Text size={4}>Hello</Text>
<Text align='center'>Hello</Text>
<Heading>Hello</Heading>
<Heading size={8}>Hello</Heading>
<Heading align='center'>Hello</Heading>
<Heading.h1>Hello</Heading.h1>
<Color color='tomato'>Hello</Color>
<Color backgroundColor='tomato'>Hello</Color>
<Color rounded backgroundColor='tomato'>Hello</Color>
<Border color='tomato' />
<Border top color='tomato' />
<Border right color='tomato' />
<Border bottom color='tomato' />
<Border left color='tomato' />
<Border rounded color='tomato' />
<Border rounded={6} color='tomato' />
<Shadow
x={0}
y={2}
blur={4}
spread={1}
color='rgba(0, 0, 0, .25)'
/>
<Label size={1}>Label</Label>
<Input
value={value}
onChange={onChange}
/>
<Select
value={value}
onChange={onChange}
>
<option>Hello</option>
<option>Goodbye</option>
</Select>
<Textarea defaultValue='Hello' />
<Slider defaultValue={25} />
-
[ ]
<Gradient />
-
[ ]
<Radio />
-
[ ]
<Checkbox />
-
[ ]
<Progress />
MIT License